Ship to Shore Crane

<div class="hln-crane-ship" role="img" aria-label="A crane loads a container onto a ship that then sails away"><svg viewBox="-62 -27.27 144 78.55" aria-hidden="true"><line x1="-44" y1="8" x2="-38" y2="11" class="hln-crane-ship-l"/><line x1="-52" y1="20" x2="-46" y2="23" class="hln-crane-ship-l"/><line x1="18" y1="53" x2="24" y2="56" class="hln-crane-ship-l"/><line x1="40" y1="50" x2="46" y2="53" class="hln-crane-ship-l"/><line x1="-44" y1="30" x2="-38" y2="33" class="hln-crane-ship-l"/><line x1="-14" y1="47" x2="-8" y2="50" class="hln-crane-ship-l"/><g><polygon points="-22,11 36,40 36,34 -22,5"/><polygon points="68,24 36,40 36,34 68,18"/><polygon points="10,-11 68,18 36,34 -22,5"/></g><line x1="-18" y1="9" x2="-18" y2="7" class="hln-crane-ship-l"/><line x1="-8" y1="14" x2="-8" y2="12" class="hln-crane-ship-l"/><line x1="2" y1="19" x2="2" y2="17" class="hln-crane-ship-l"/><line x1="12" y1="24" x2="12" y2="22" class="hln-crane-ship-l"/><line x1="22" y1="29" x2="22" y2="27" class="hln-crane-ship-l"/><line x1="32" y1="34" x2="32" y2="32" class="hln-crane-ship-l"/><g><polygon points="10.5,1.75 13,3 13,-31 10.5,-32.25"/><polygon points="15.5,1.75 13,3 13,-31 15.5,-32.25"/><polygon points="13,-33.5 15.5,-32.25 13,-31 10.5,-32.25"/></g><g><polygon points="32.5,12.75 35,14 35,-20 32.5,-21.25"/><polygon points="37.5,12.75 35,14 35,-20 37.5,-21.25"/><polygon points="35,-22.5 37.5,-21.25 35,-20 32.5,-21.25"/></g><line x1="11.75" y1="0.38" x2="33.75" y2="-18.62" class="hln-crane-ship-l"/><line x1="33.75" y1="11.38" x2="11.75" y2="-29.62" class="hln-crane-ship-l"/><g><polygon points="8.5,-32.25 35.5,-18.75 35.5,-21.75 8.5,-35.25"/><polygon points="40,-21 35.5,-18.75 35.5,-21.75 40,-24"/><polygon points="13,-37.5 40,-24 35.5,-21.75 8.5,-35.25"/></g><g><polygon points="-22,-10 -16,-7 -16,-9.5 -22,-12.5"/><polygon points="40,-35 -16,-7 -16,-9.5 40,-37.5"/><polygon points="34,-40.5 40,-37.5 -16,-9.5 -22,-12.5"/></g><g><polygon points="24,-36.5 32,-32.5 32,-37.5 24,-41.5"/><polygon points="41,-37 32,-32.5 32,-37.5 41,-42"/><polygon points="33,-46 41,-42 32,-37.5 24,-41.5"/></g><polygon points="26,-37 30,-35 30,-37 26,-39" class="hln-crane-ship-l"/><g class="hln-crane-ship-trolley"><g><polygon points="9.5,-22.85 14.5,-20.35 14.5,-22.75 9.5,-25.25"/><polygon points="19.5,-22.85 14.5,-20.35 14.5,-22.75 19.5,-25.25"/><polygon points="14.5,-27.75 19.5,-25.25 14.5,-22.75 9.5,-25.25"/></g><g class="hln-crane-ship-cable"><line x1="13.5" y1="-23.35" x2="13.5" y2="5.45"/><line x1="15.5" y1="-22.35" x2="15.5" y2="6.45"/></g></g><g class="hln-crane-ship-hook"><g><polygon points="7,5.5 17,10.5 17,9.7 7,4.7"/><polygon points="22,8 17,10.5 17,9.7 22,7.2"/><polygon points="12,2.2 22,7.2 17,9.7 7,4.7"/></g></g><g class="hln-crane-ship-ship"><polygon points="-36,22 6,43 6,37 -36,16"/><polygon points="6,43 23,44.5 23,38.5 6,37"/><polygon points="-22,9 20,30 23,38.5 6,37 -36,16"/><line x1="-36" y1="19" x2="6" y2="40" class="hln-crane-ship-l"/><line x1="6" y1="40" x2="23" y2="41.5" class="hln-crane-ship-l"/><g><polygon points="-33,15.5 -25,19.5 -25,9.5 -33,5.5"/><polygon points="-15,14.5 -25,19.5 -25,9.5 -15,4.5"/><polygon points="-23,0.5 -15,4.5 -25,9.5 -33,5.5"/></g><polygon points="-31.5,9.25 -26.5,11.75 -26.5,9.75 -31.5,7.25" class="hln-crane-ship-l"/><polygon points="-17,8.5 -23,11.5 -23,9.5 -17,6.5" class="hln-crane-ship-l"/><g><polygon points="-29,5.5 -25,7.5 -25,4.5 -29,2.5"/><polygon points="-19,4.5 -25,7.5 -25,4.5 -19,1.5"/><polygon points="-23,-0.5 -19,1.5 -25,4.5 -29,2.5"/></g><g><polygon points="1,27.5 11,32.5 11,27.5 1,22.5"/><polygon points="16,30 11,32.5 11,27.5 16,25"/><polygon points="6,20 16,25 11,27.5 1,22.5"/></g><line x1="3" y1="27.9" x2="3" y2="24.1" class="hln-crane-ship-l"/><line x1="5" y1="28.9" x2="5" y2="25.1" class="hln-crane-ship-l"/><line x1="7" y1="29.9" x2="7" y2="26.1" class="hln-crane-ship-l"/><line x1="9" y1="30.9" x2="9" y2="27.1" class="hln-crane-ship-l"/><g><polygon points="-4,30 6,35 6,30 -4,25"/><polygon points="11,32.5 6,35 6,30 11,27.5"/><polygon points="1,22.5 11,27.5 6,30 -4,25"/></g><line x1="-2" y1="30.4" x2="-2" y2="26.6" class="hln-crane-ship-l"/><line x1="0" y1="31.4" x2="0" y2="27.6" class="hln-crane-ship-l"/><line x1="2" y1="32.4" x2="2" y2="28.6" class="hln-crane-ship-l"/><line x1="4" y1="33.4" x2="4" y2="29.6" class="hln-crane-ship-l"/><g><polygon points="1,22.5 11,27.5 11,22.5 1,17.5"/><polygon points="16,25 11,27.5 11,22.5 16,20"/><polygon points="6,15 16,20 11,22.5 1,17.5"/></g><line x1="3" y1="22.9" x2="3" y2="19.1" class="hln-crane-ship-l"/><line x1="5" y1="23.9" x2="5" y2="20.1" class="hln-crane-ship-l"/><line x1="7" y1="24.9" x2="7" y2="21.1" class="hln-crane-ship-l"/><line x1="9" y1="25.9" x2="9" y2="22.1" class="hln-crane-ship-l"/></g><g class="hln-crane-ship-box"><g class="hln-crane-ship-pop"><g class="hln-crane-ship-a"><polygon points="7,10.5 17,15.5 17,10.5 7,5.5"/><polygon points="22,13 17,15.5 17,10.5 22,8"/><polygon points="12,3 22,8 17,10.5 7,5.5"/></g><line x1="9" y1="10.9" x2="9" y2="7.1" class="hln-crane-ship-l"/><line x1="11" y1="11.9" x2="11" y2="8.1" class="hln-crane-ship-l"/><line x1="13" y1="12.9" x2="13" y2="9.1" class="hln-crane-ship-l"/><line x1="15" y1="13.9" x2="15" y2="10.1" class="hln-crane-ship-l"/></g></g></svg></div>

.hln-crane-ship {
  --c: var(--hln-color, #ff4f2e);
  font-size: var(--hln-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 0.75em;
  background: #f6f5f1;
  overflow: hidden;
  --u: 1px;
}
.hln-crane-ship svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-crane-ship svg * {
  vector-effect: non-scaling-stroke;
}
.hln-crane-ship-l {
  stroke: #9a9ca3;
}
.hln-crane-ship-a {
  fill: var(--c);
}
.hln-crane-ship-trolley {
  animation: hln-crane-ship-trolley 8s linear infinite;
}
.hln-crane-ship-cable {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: hln-crane-ship-cable 8s linear infinite;
}
.hln-crane-ship-hook {
  animation: hln-crane-ship-hook 8s linear infinite;
}
.hln-crane-ship-box {
  animation: hln-crane-ship-box 8s linear infinite;
}
.hln-crane-ship-pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hln-crane-ship-pop 8s linear infinite;
}
.hln-crane-ship-ship {
  animation: hln-crane-ship-ship 8s linear infinite;
}
@keyframes hln-crane-ship-trolley {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  8% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  11% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  22% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  36% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  46% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); }
  50% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  58% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); }
  62% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  77% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@keyframes hln-crane-ship-cable {
  0% { transform: scaleY(0.48); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  8% { transform: scaleY(1); }
  11% { transform: scaleY(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  22% { transform: scaleY(0.38); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  36% { transform: scaleY(0.38); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  46% { transform: scaleY(1); }
  50% { transform: scaleY(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  58% { transform: scaleY(0.48); }
  62% { transform: scaleY(0.48); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  77% { transform: scaleY(0.48); }
  100% { transform: scaleY(0.48); }
}
@keyframes hln-crane-ship-hook {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -15)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  8% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  11% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  22% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -18)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  36% { transform: translate(calc(var(--u) * -22), calc(var(--u) * -7)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  46% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); }
  50% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  58% { transform: translate(calc(var(--u) * -22), calc(var(--u) * -4)); }
  62% { transform: translate(calc(var(--u) * -22), calc(var(--u) * -4)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  77% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -15)); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -15)); }
}
@keyframes hln-crane-ship-box {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  8% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  11% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  22% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -18)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  36% { transform: translate(calc(var(--u) * -22), calc(var(--u) * -7)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  46% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); }
  50% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  62% { transform: translate(calc(var(--u) * -22), calc(var(--u) * 11)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  78% { transform: translate(calc(var(--u) * 108), calc(var(--u) * 76)); }
  78.1%, 100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@keyframes hln-crane-ship-pop {
  0%, 77.9% { transform: scale(1); opacity: 1; }
  78%, 84% { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  90%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes hln-crane-ship-ship {
  0%, 62% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  78% { transform: translate(calc(var(--u) * 130), calc(var(--u) * 65)); }
  78.1% { transform: translate(calc(var(--u) * -120), calc(var(--u) * -60)); animation-timing-function: cubic-bezier(.15, .6, .3, 1.02); }
  96%, 100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-crane-ship * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 4.4s) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-crane-ship, .hln-crane-ship *, .hln-crane-ship::before, .hln-crane-ship::after, .hln-crane-ship *::before, .hln-crane-ship *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar hairline animations