Forklift Put-Away

<div class="hln-forklift-rack" role="img" aria-label="A forklift stores a pallet on a rack and takes it down again"><svg viewBox="-34 -13.36 104 56.73" aria-hidden="true"><g><polygon points="-40,14 34,51 34,50 -40,13"/><polygon points="70,33 34,51 34,50 70,32"/><polygon points="-4,-5 70,32 34,50 -40,13"/></g><line x1="-31" y1="12.5" x2="-28" y2="14" class="hln-forklift-rack-l"/><line x1="-25" y1="15.5" x2="-22" y2="17" class="hln-forklift-rack-l"/><line x1="-19" y1="18.5" x2="-16" y2="20" class="hln-forklift-rack-l"/><line x1="-13" y1="21.5" x2="-10" y2="23" class="hln-forklift-rack-l"/><line x1="-7" y1="24.5" x2="-4" y2="26" class="hln-forklift-rack-l"/><line x1="-1" y1="27.5" x2="2" y2="29" class="hln-forklift-rack-l"/><line x1="5" y1="30.5" x2="8" y2="32" class="hln-forklift-rack-l"/><line x1="11" y1="33.5" x2="14" y2="35" class="hln-forklift-rack-l"/><g><polygon points="43,25 44,25.5 44,-7.5 43,-8"/><polygon points="45,25 44,25.5 44,-7.5 45,-8"/><polygon points="44,-8.5 45,-8 44,-7.5 43,-8"/></g><g><polygon points="55,31 56,31.5 56,-1.5 55,-2"/><polygon points="57,31 56,31.5 56,-1.5 57,-2"/><polygon points="56,-2.5 57,-2 56,-1.5 55,-2"/></g><g><polygon points="31,31 32,31.5 32,-1.5 31,-2"/><polygon points="33,31 32,31.5 32,-1.5 33,-2"/><polygon points="32,-2.5 33,-2 32,-1.5 31,-2"/></g><g><polygon points="43,37 44,37.5 44,4.5 43,4"/><polygon points="45,37 44,37.5 44,4.5 45,4"/><polygon points="44,3.5 45,4 44,4.5 43,4"/></g><g><polygon points="19.5,25.75 20.5,26.25 20.5,25.05 19.5,24.55"/><polygon points="44.5,14.25 20.5,26.25 20.5,25.05 44.5,13.05"/><polygon points="43.5,12.55 44.5,13.05 20.5,25.05 19.5,24.55"/></g><g><polygon points="19.5,14.75 20.5,15.25 20.5,14.05 19.5,13.55"/><polygon points="44.5,3.25 20.5,15.25 20.5,14.05 44.5,2.05"/><polygon points="43.5,1.55 44.5,2.05 20.5,14.05 19.5,13.55"/></g><g><polygon points="35.5,18.55 44.5,23.05 44.5,21.85 35.5,17.35"/><polygon points="52.5,19.05 44.5,23.05 44.5,21.85 52.5,17.85"/><polygon points="43.5,13.35 52.5,17.85 44.5,21.85 35.5,17.35"/></g><g><polygon points="37.5,17.35 44.5,20.85 44.5,15.85 37.5,12.35"/><polygon points="50.5,17.85 44.5,20.85 44.5,15.85 50.5,12.85"/><polygon points="43.5,9.35 50.5,12.85 44.5,15.85 37.5,12.35"/></g><g class="hln-forklift-rack-truck"><g><polygon points="-17,14.8 -14.5,16.05 -14.5,9.55 -17,8.3"/><polygon points="-7.5,12.55 -14.5,16.05 -14.5,9.55 -7.5,6.05"/><polygon points="-10,4.8 -7.5,6.05 -14.5,9.55 -17,8.3"/></g><g><polygon points="-16,15.8 -5,21.3 -5,16.3 -16,10.8"/><polygon points="3,17.3 -5,21.3 -5,16.3 3,12.3"/><polygon points="-8,6.8 3,12.3 -5,16.3 -16,10.8"/></g><polygon points="-11.6,17.4 -11.65,16.98 -11.78,16.53 -11.99,16.08 -12.28,15.65 -12.62,15.27 -13,14.95 -13.4,14.7 -13.8,14.54 -14.18,14.49 -14.52,14.53 -14.81,14.67 -15.02,14.91 -15.15,15.22 -15.2,15.6 -15.15,16.02 -15.02,16.47 -14.81,16.92 -14.52,17.35 -14.18,17.73 -13.8,18.05 -13.4,18.3 -13,18.46 -12.62,18.51 -12.28,18.47 -11.99,18.33 -11.78,18.09 -11.65,17.78"/><polygon points="-5.6,20.4 -5.65,19.98 -5.78,19.53 -5.99,19.08 -6.28,18.65 -6.62,18.27 -7,17.95 -7.4,17.7 -7.8,17.54 -8.18,17.49 -8.52,17.53 -8.81,17.67 -9.02,17.91 -9.15,18.22 -9.2,18.6 -9.15,19.02 -9.02,19.47 -8.81,19.92 -8.52,20.35 -8.18,20.73 -7.8,21.05 -7.4,21.3 -7,21.46 -6.62,21.51 -6.28,21.47 -5.99,21.33 -5.78,21.09 -5.65,20.78"/><g><polygon points="-11,11.3 -7,13.3 -7,11.9 -11,9.9"/><polygon points="-3,11.3 -7,13.3 -7,11.9 -3,9.9"/><polygon points="-7,7.9 -3,9.9 -7,11.9 -11,9.9"/></g><g><polygon points="-11,9.9 -10,10.4 -10,7.4 -11,6.9"/><polygon points="-6,8.4 -10,10.4 -10,7.4 -6,5.4"/><polygon points="-7,4.9 -6,5.4 -10,7.4 -11,6.9"/></g><line x1="-7.5" y1="7.55" x2="-7.5" y2="-1.25"/><line x1="-0.5" y1="11.05" x2="-0.5" y2="2.25"/><line x1="-14.5" y1="11.05" x2="-14.5" y2="2.25"/><line x1="-7.5" y1="14.55" x2="-7.5" y2="5.75"/><g><polygon points="-15.5,2.25 -7.5,6.25 -7.5,5.65 -15.5,1.65"/><polygon points="0.5,2.25 -7.5,6.25 -7.5,5.65 0.5,1.65"/><polygon points="-7.5,-2.35 0.5,1.65 -7.5,5.65 -15.5,1.65"/></g><line x1="-9.5" y1="-1.35" x2="-1.5" y2="2.65" class="hln-forklift-rack-l"/><line x1="-11.5" y1="-0.35" x2="-3.5" y2="3.65" class="hln-forklift-rack-l"/><line x1="-13.5" y1="0.65" x2="-5.5" y2="4.65" class="hln-forklift-rack-l"/><g><polygon points="1.4,19.3 2.4,19.8 2.4,1.8 1.4,1.3"/><polygon points="3.4,19.3 2.4,19.8 2.4,1.8 3.4,1.3"/><polygon points="2.4,0.8 3.4,1.3 2.4,1.8 1.4,1.3"/></g><g><polygon points="-4.4,22.2 -3.4,22.7 -3.4,4.7 -4.4,4.2"/><polygon points="-2.4,22.2 -3.4,22.7 -3.4,4.7 -2.4,4.2"/><polygon points="-3.4,3.7 -2.4,4.2 -3.4,4.7 -4.4,4.2"/></g><g class="hln-forklift-rack-lift"><g><polygon points="-3.5,21.55 -2.7,21.95 -2.7,17.95 -3.5,17.55"/><polygon points="4.3,18.45 -2.7,21.95 -2.7,17.95 4.3,14.45"/><polygon points="3.5,14.05 4.3,14.45 -2.7,17.95 -3.5,17.55"/></g><g><polygon points="1.4,19.1 10.4,23.6 10.4,22.8 1.4,18.3"/><polygon points="11.8,22.9 10.4,23.6 10.4,22.8 11.8,22.1"/><polygon points="2.8,17.6 11.8,22.1 10.4,22.8 1.4,18.3"/></g><g><polygon points="-2.8,21.2 6.2,25.7 6.2,24.9 -2.8,20.4"/><polygon points="7.6,25 6.2,25.7 6.2,24.9 7.6,24.2"/><polygon points="-1.4,19.7 7.6,24.2 6.2,24.9 -2.8,20.4"/></g></g></g><g class="hln-forklift-rack-load"><g><polygon points="-3,21 6,25.5 6,24.3 -3,19.8"/><polygon points="13,22 6,25.5 6,24.3 13,20.8"/><polygon points="4,16.3 13,20.8 6,24.3 -3,19.8"/></g><line x1="-3" y1="20.4" x2="6" y2="24.9" class="hln-forklift-rack-l"/><g class="hln-forklift-rack-a"><polygon points="-1,19.8 6,23.3 6,17.3 -1,13.8"/><polygon points="11,20.8 6,23.3 6,17.3 11,14.8"/><polygon points="4,11.3 11,14.8 6,17.3 -1,13.8"/></g></g><g><polygon points="31.5,31.75 32.5,32.25 32.5,31.05 31.5,30.55"/><polygon points="56.5,20.25 32.5,32.25 32.5,31.05 56.5,19.05"/><polygon points="55.5,18.55 56.5,19.05 32.5,31.05 31.5,30.55"/></g><g><polygon points="31.5,20.75 32.5,21.25 32.5,20.05 31.5,19.55"/><polygon points="56.5,9.25 32.5,21.25 32.5,20.05 56.5,8.05"/><polygon points="55.5,7.55 56.5,8.05 32.5,20.05 31.5,19.55"/></g><g><polygon points="19,37 20,37.5 20,4.5 19,4"/><polygon points="21,37 20,37.5 20,4.5 21,4"/><polygon points="20,3.5 21,4 20,4.5 19,4"/></g><g><polygon points="31,43 32,43.5 32,10.5 31,10"/><polygon points="33,43 32,43.5 32,10.5 33,10"/><polygon points="32,9.5 33,10 32,10.5 31,10"/></g><g><polygon points="19,4 32,10.5 32,9.5 19,3"/><polygon points="57,-2 32,10.5 32,9.5 57,-3"/><polygon points="44,-9.5 57,-3 32,9.5 19,3"/></g></svg></div>

.hln-forklift-rack {
  --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-forklift-rack svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-forklift-rack svg * {
  vector-effect: non-scaling-stroke;
}
.hln-forklift-rack-l {
  stroke: #9a9ca3;
}
.hln-forklift-rack-a {
  fill: var(--c);
}
.hln-forklift-rack-truck {
  animation: hln-forklift-rack-truck 8s linear infinite;
}
.hln-forklift-rack-lift {
  animation: hln-forklift-rack-lift 8s linear infinite;
}
.hln-forklift-rack-load {
  animation: hln-forklift-rack-load 8s linear infinite;
}
@keyframes hln-forklift-rack-truck {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  5% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  13% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  27% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 13)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  31% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 13)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  32% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 13)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  42% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  48% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  54% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  59% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  70% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 13)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  72% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 13)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  75% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 13)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  86% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  94% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@keyframes hln-forklift-rack-lift {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  5% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  13% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -11.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  27% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -11.2)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  31% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -10.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  32% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -10.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  42% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -10.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  48% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  54% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  59% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -10.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  70% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -10.2)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  72% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -10.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  75% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -11.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  86% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -11.2)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  94% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@keyframes hln-forklift-rack-load {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  5% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  13% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -11.2)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  27% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 1.8)); animation-timing-function: cubic-bezier(.25, 1.2, .4, 1); }
  31% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  32% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); }
  42% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); }
  48% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); }
  54% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); }
  59% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); }
  70% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); }
  72% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 2.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  75% { transform: translate(calc(var(--u) * 26), calc(var(--u) * 1.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  86% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -11.2)); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  94% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-forklift-rack * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 3.6s) !important;
  }
}

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

Similar hairline animations