Parcel to Doorstep

<div class="hln-parcel-to-doorstep" role="img" aria-label="A parcel travels from a warehouse shelf by conveyor and van to a front door"><svg viewBox="-68 -21.91 172 93.82" aria-hidden="true"><line x1="-82" y1="-9" x2="108" y2="86"/><line x1="-96" y1="-2" x2="94" y2="93"/><g class="hln-parcel-to-doorstep-route"><line x1="-14" y1="32" x2="19" y2="48.5" class="hln-parcel-to-doorstep-dash" stroke-dasharray="3 3"/></g><g><polygon points="42,45 64,56 64,42 42,31"/><polygon points="80,48 64,56 64,42 80,34"/><polygon points="58,23 80,34 64,42 42,31"/></g><polygon class="hln-parcel-to-doorstep-l" points="58,24.5 77,34 64,40.5 45,31"/><g><polygon points="62,34 67,36.5 67,33.5 62,31"/><polygon points="72,34 67,36.5 67,33.5 72,31"/><polygon points="67,28.5 72,31 67,33.5 62,31"/></g><polygon points="46,47 51,49.5 51,41.5 46,39"/><polygon points="55,45.5 59,47.5 59,43.5 55,41.5" class="hln-parcel-to-doorstep-l"/><polygon points="76,44 72,46 72,42 76,40" class="hln-parcel-to-doorstep-l"/><polygon points="70,47 66,49 66,45 70,43" class="hln-parcel-to-doorstep-l"/><line x1="46" y1="47" x2="38" y2="51" class="hln-parcel-to-doorstep-l"/><line x1="51" y1="49.5" x2="43" y2="53.5" class="hln-parcel-to-doorstep-l"/><g class="hln-parcel-to-doorstep-drop"><g class="hln-parcel-to-doorstep-a"><polygon points="40,50.5 44,52.5 44,49 40,47"/><polygon points="48,50.5 44,52.5 44,49 48,47"/><polygon points="44,45 48,47 44,49 40,47"/></g></g><g><polygon points="-28,14 -2,27 -2,25 -28,12"/><polygon points="26,13 -2,27 -2,25 26,11"/><polygon points="0,-2 26,11 -2,25 -28,12"/></g><g><polygon points="-6,3 16,14 16,-4 -6,-15"/><polygon points="22,11 16,14 16,-4 22,-7"/><polygon points="0,-18 22,-7 16,-4 -6,-15"/></g><line x1="-6" y1="-3" x2="16" y2="8" class="hln-parcel-to-doorstep-l"/><line x1="-6" y1="-9" x2="16" y2="2" class="hln-parcel-to-doorstep-l"/><line x1="1.3" y1="6.65" x2="1.3" y2="-11.35" class="hln-parcel-to-doorstep-l"/><line x1="8.6" y1="10.3" x2="8.6" y2="-7.7" class="hln-parcel-to-doorstep-l"/><polygon points="-4.5,3.75 -1,5.5 -1,2.5 -4.5,0.75" class="hln-parcel-to-doorstep-l"/><polygon points="10,5 14.5,7.25 14.5,3.25 10,1" class="hln-parcel-to-doorstep-l"/><polygon points="3,-4.5 6.5,-2.75 6.5,-5.75 3,-7.5" class="hln-parcel-to-doorstep-l"/><line x1="2" y1="13" x2="2" y2="9"/><line x1="-10" y1="19" x2="-10" y2="15"/><line x1="-21" y1="20.5" x2="-21" y2="14.5"/><line x1="-15" y1="23.5" x2="-15" y2="17.5"/><g><polygon points="-23,15.5 -17,18.5 -17,16.5 -23,13.5"/><polygon points="8,6 -17,18.5 -17,16.5 8,4"/><polygon points="2,1 8,4 -17,16.5 -23,13.5"/></g><line x1="0" y1="2" x2="6" y2="5" class="hln-parcel-to-doorstep-l"/><line x1="-2.5" y1="3.25" x2="3.5" y2="6.25" class="hln-parcel-to-doorstep-l"/><line x1="-5" y1="4.5" x2="1" y2="7.5" class="hln-parcel-to-doorstep-l"/><line x1="-7.5" y1="5.75" x2="-1.5" y2="8.75" class="hln-parcel-to-doorstep-l"/><line x1="-10" y1="7" x2="-4" y2="10" class="hln-parcel-to-doorstep-l"/><line x1="-12.5" y1="8.25" x2="-6.5" y2="11.25" class="hln-parcel-to-doorstep-l"/><line x1="-15" y1="9.5" x2="-9" y2="12.5" class="hln-parcel-to-doorstep-l"/><line x1="-17.5" y1="10.75" x2="-11.5" y2="13.75" class="hln-parcel-to-doorstep-l"/><line x1="-20" y1="12" x2="-14" y2="15" class="hln-parcel-to-doorstep-l"/><line x1="-22.5" y1="13.25" x2="-16.5" y2="16.25" class="hln-parcel-to-doorstep-l"/><g class="hln-parcel-to-doorstep-ride"><g class="hln-parcel-to-doorstep-pop"><g class="hln-parcel-to-doorstep-a"><polygon points="-2,4 2,6 2,2.5 -2,0.5"/><polygon points="6,4 2,6 2,2.5 6,0.5"/><polygon points="2,-1.5 6,0.5 2,2.5 -2,0.5"/></g></g></g><g class="hln-parcel-to-doorstep-van"><g><polygon points="-38,21 -23,28.5 -23,18.5 -38,11"/><polygon points="-15,24.5 -23,28.5 -23,18.5 -15,14.5"/><polygon points="-30,7 -15,14.5 -23,18.5 -38,11"/></g><g><polygon points="-23,28.5 -16.5,31.75 -16.5,25.25 -23,22"/><polygon points="-8.5,27.75 -16.5,31.75 -16.5,25.25 -8.5,21.25"/><polygon points="-15,18 -8.5,21.25 -16.5,25.25 -23,22"/></g><polygon points="-9.7,25.35 -15.3,28.15 -15.3,25.15 -9.7,22.35" class="hln-parcel-to-doorstep-l"/><polygon points="-22,26 -18,28 -18,25 -22,23" class="hln-parcel-to-doorstep-l"/><line x1="-30" y1="24" x2="-30" y2="16" class="hln-parcel-to-doorstep-l"/><polygon points="-32,24 -32.05,23.53 -32.2,23.03 -32.44,22.53 -32.75,22.06 -33.13,21.63 -33.55,21.27 -34,21 -34.45,20.83 -34.87,20.76 -35.25,20.81 -35.56,20.97 -35.8,21.23 -35.95,21.58 -36,22 -35.95,22.47 -35.8,22.97 -35.56,23.47 -35.25,23.94 -34.87,24.37 -34.45,24.73 -34,25 -33.55,25.17 -33.13,25.24 -32.75,25.19 -32.44,25.03 -32.2,24.77 -32.05,24.42"/><polygon points="-18.5,30.75 -18.55,30.28 -18.7,29.78 -18.94,29.28 -19.25,28.81 -19.63,28.38 -20.05,28.02 -20.5,27.75 -20.95,27.58 -21.37,27.51 -21.75,27.56 -22.06,27.72 -22.3,27.98 -22.45,28.33 -22.5,28.75 -22.45,29.22 -22.3,29.72 -22.06,30.22 -21.75,30.69 -21.37,31.12 -20.95,31.48 -20.5,31.75 -20.05,31.92 -19.63,31.99 -19.25,31.94 -18.94,31.78 -18.7,31.52 -18.55,31.17"/><polygon points="-33.2,23.4 -33.22,23.21 -33.28,23.01 -33.37,22.81 -33.5,22.62 -33.65,22.45 -33.82,22.31 -34,22.2 -34.18,22.13 -34.35,22.11 -34.5,22.13 -34.63,22.19 -34.72,22.29 -34.78,22.43 -34.8,22.6 -34.78,22.79 -34.72,22.99 -34.63,23.19 -34.5,23.38 -34.35,23.55 -34.18,23.69 -34,23.8 -33.82,23.87 -33.65,23.89 -33.5,23.87 -33.37,23.81 -33.28,23.71 -33.22,23.57" class="hln-parcel-to-doorstep-l"/><polygon points="-19.7,30.15 -19.72,29.96 -19.78,29.76 -19.87,29.56 -20,29.37 -20.15,29.2 -20.32,29.06 -20.5,28.95 -20.68,28.88 -20.85,28.86 -21,28.88 -21.13,28.94 -21.22,29.04 -21.28,29.18 -21.3,29.35 -21.28,29.54 -21.22,29.74 -21.13,29.94 -21,30.13 -20.85,30.3 -20.68,30.44 -20.5,30.55 -20.32,30.62 -20.15,30.64 -20,30.62 -19.87,30.56 -19.78,30.46 -19.72,30.32" class="hln-parcel-to-doorstep-l"/></g></svg></div>

.hln-parcel-to-doorstep {
  --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-parcel-to-doorstep svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-parcel-to-doorstep svg * {
  vector-effect: non-scaling-stroke;
}
.hln-parcel-to-doorstep-l {
  stroke: #9a9ca3;
}
.hln-parcel-to-doorstep-a {
  fill: var(--c);
}
.hln-parcel-to-doorstep-dash {
  fill: none;
  stroke: var(--c);
}
.hln-parcel-to-doorstep-route {
  animation: hln-parcel-to-doorstep-route 8s linear infinite;
}
.hln-parcel-to-doorstep-van {
  animation: hln-parcel-to-doorstep-van 8s linear infinite;
}
.hln-parcel-to-doorstep-ride {
  animation: hln-parcel-to-doorstep-ride 8s linear infinite;
}
.hln-parcel-to-doorstep-pop,
.hln-parcel-to-doorstep-drop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hln-parcel-to-doorstep-pop {
  animation: hln-parcel-to-doorstep-pop 8s linear infinite;
}
.hln-parcel-to-doorstep-drop {
  animation: hln-parcel-to-doorstep-drop 8s linear infinite;
}
@keyframes hln-parcel-to-doorstep-ride {
  0%, 10% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  26%, 100% { transform: translate(calc(var(--u) * -27), calc(var(--u) * 13.5)); }
}
@keyframes hln-parcel-to-doorstep-pop {
  0% { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  6% { transform: scale(1); opacity: 1; }
  25.9% { transform: scale(1); opacity: 1; }
  26%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes hln-parcel-to-doorstep-van {
  0%, 26% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: ease-out; }
  28% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  32% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.5, 0, .25, 1.06); }
  56%, 70% { transform: translate(calc(var(--u) * 36), calc(var(--u) * 18)); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  84% { transform: translate(calc(var(--u) * 190), calc(var(--u) * 95)); }
  84.1% { transform: translate(calc(var(--u) * -110), calc(var(--u) * -55)); animation-timing-function: cubic-bezier(.2, .7, .3, 1.04); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@keyframes hln-parcel-to-doorstep-route {
  0%, 32% { clip-path: inset(0 100% 0 0); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .25, 1); }
  56%, 72% { clip-path: inset(0 0 0 0); opacity: 1; }
  82% { clip-path: inset(0 0 0 0); opacity: 0; }
  83%, 100% { clip-path: inset(0 100% 0 0); opacity: 1; }
}
@keyframes hln-parcel-to-doorstep-drop {
  0%, 57% { transform: scale(0); opacity: 1; animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  63%, 80% { transform: scale(1); opacity: 1; }
  86% { transform: scale(1); opacity: 0; }
  87%, 100% { transform: scale(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-parcel-to-doorstep * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 5.2s) !important;
  }
}

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

Similar hairline animations