Elevator Cutaway

<div class="hln-elevator-cutaway" role="img" aria-label="An elevator moves between floors in a cutaway building"><svg viewBox="-75 -52.09 158 86.18" aria-hidden="true"><g><polygon points="-30,11 10,31 10,29 -30,9"/><polygon points="40,16 10,31 10,29 40,14"/><polygon points="0,-6 40,14 10,29 -30,9"/></g><g><polygon points="-23.5,8.25 -22,9 -22,-39 -23.5,-39.75"/><polygon points="1.5,-2.75 -22,9 -22,-39 1.5,-50.75"/><polygon points="0,-51.5 1.5,-50.75 -22,-39 -23.5,-39.75"/></g><g><polygon points="0,-2 30,13 30,-35 0,-50"/><polygon points="31.5,12.25 30,13 30,-35 31.5,-35.75"/><polygon points="1.5,-50.75 31.5,-35.75 30,-35 0,-50"/></g><path d="M-12.55,5 L-12.55,8 A2.55,1.27 0 0 0 -7.45,8 L-7.45,5 Z"/><ellipse cx="-10" cy="5" rx="2.55" ry="1.27"/><circle cx="-10" cy="2" r="3"/><polygon points="6,-3 14,1 14,-6 6,-10" class="hln-elevator-cutaway-l"/><g><polygon points="-22,-7 -2,3 -2,1.8 -22,-8.2"/><polygon points="20,-8 -2,3 -2,1.8 20,-9.2"/><polygon points="0,-19.2 20,-9.2 -2,1.8 -22,-8.2"/></g><g><polygon points="10,-3 20,2 20,0.8 10,-4.2"/><polygon points="30,-3 20,2 20,0.8 30,-4.2"/><polygon points="20,-9.2 30,-4.2 20,0.8 10,-4.2"/></g><g><polygon points="-4,-12.2 5,-7.7 5,-8.5 -4,-13"/><polygon points="10,-10.2 5,-7.7 5,-8.5 10,-11"/><polygon points="1,-15.5 10,-11 5,-8.5 -4,-13"/></g><line x1="-3" y1="-11.7" x2="-3" y2="-15.5"/><line x1="4" y1="-8.2" x2="4" y2="-12"/><g><polygon points="-4,-16 5,-11.5 5,-12.3 -4,-16.8"/><polygon points="10,-14 5,-11.5 5,-12.3 10,-14.8"/><polygon points="1,-19.3 10,-14.8 5,-12.3 -4,-16.8"/></g><g><polygon points="2.5,-17.05 6.5,-15.05 6.5,-18.05 2.5,-20.05"/><polygon points="7.5,-15.55 6.5,-15.05 6.5,-18.05 7.5,-18.55"/><polygon points="3.5,-20.55 7.5,-18.55 6.5,-18.05 2.5,-20.05"/></g><path d="M0.73,-8 L0.73,-4.2 A1.27,0.64 0 0 0 3.27,-4.2 L3.27,-8 Z"/><ellipse cx="2" cy="-8" rx="1.27" ry="0.64"/><circle cx="2" cy="-9.4" r="1.1"/><g><polygon points="-22,-23 -2,-13 -2,-14.2 -22,-24.2"/><polygon points="20,-24 -2,-13 -2,-14.2 20,-25.2"/><polygon points="0,-35.2 20,-25.2 -2,-14.2 -22,-24.2"/></g><g><polygon points="10,-19 20,-14 20,-15.2 10,-20.2"/><polygon points="30,-19 20,-14 20,-15.2 30,-20.2"/><polygon points="20,-25.2 30,-20.2 20,-15.2 10,-20.2"/></g><polygon points="6,-36 14,-32 14,-39 6,-43" class="hln-elevator-cutaway-l"/><path d="M-3.27,-24 L-3.27,-20.2 A1.27,0.64 0 0 0 -0.73,-20.2 L-0.73,-24 Z"/><ellipse cx="-2" cy="-24" rx="1.27" ry="0.64"/><circle cx="-2" cy="-25.4" r="1.1"/><path d="M-4.27,-27.5 L-4.27,-23.7 A1.27,0.64 0 0 0 -1.73,-23.7 L-1.73,-27.5 Z"/><ellipse cx="-3" cy="-27.5" rx="1.27" ry="0.64"/><circle cx="-3" cy="-28.9" r="1.1"/><line x1="10" y1="13" x2="10" y2="-35" class="hln-elevator-cutaway-l"/><line x1="20" y1="18" x2="20" y2="-30" class="hln-elevator-cutaway-l"/><g class="hln-elevator-cutaway-car"><g class="hln-elevator-cutaway-cable"><line x1="10" y1="7" x2="10" y2="-30"/></g><g class="hln-elevator-cutaway-a"><polygon points="2,18 10,22 10,11 2,7"/><polygon points="18,18 10,22 10,11 18,7"/><polygon points="10,3 18,7 10,11 2,7"/></g><polygon points="3.5,18.75 8.5,21.25 8.5,12.75 3.5,10.25"/><g class="hln-elevator-cutaway-dl"><polygon points="3.5,18.75 6,20 6,11.5 3.5,10.25" class="hln-elevator-cutaway-a"/></g><g class="hln-elevator-cutaway-dr"><polygon points="6,20 8.5,21.25 8.5,12.75 6,11.5" class="hln-elevator-cutaway-a"/></g></g><line x1="0" y1="18" x2="0" y2="-30" class="hln-elevator-cutaway-l"/><line x1="10" y1="23" x2="10" y2="-25" class="hln-elevator-cutaway-l"/><line x1="20" y1="18" x2="20" y2="-30" class="hln-elevator-cutaway-l"/><g><polygon points="-23.5,-39.75 8,-24 8,-25.5 -23.5,-41.25"/><polygon points="31.5,-35.75 8,-24 8,-25.5 31.5,-37.25"/><polygon points="0,-53 31.5,-37.25 8,-25.5 -23.5,-41.25"/></g><g><polygon points="2,-31.5 10,-27.5 10,-31.5 2,-35.5"/><polygon points="18,-31.5 10,-27.5 10,-31.5 18,-35.5"/><polygon points="10,-39.5 18,-35.5 10,-31.5 2,-35.5"/></g></svg></div>

.hln-elevator-cutaway {
  --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-elevator-cutaway svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-elevator-cutaway svg * {
  vector-effect: non-scaling-stroke;
}
.hln-elevator-cutaway-l {
  stroke: #9a9ca3;
}
.hln-elevator-cutaway-a {
  fill: var(--c);
}
.hln-elevator-cutaway-car {
  animation: hln-elevator-cutaway-car 9s linear infinite;
}
.hln-elevator-cutaway-cable {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hln-elevator-cutaway-cable 9s linear infinite;
}
.hln-elevator-cutaway-dl {
  animation: hln-elevator-cutaway-dl 9s linear infinite;
}
.hln-elevator-cutaway-dr {
  animation: hln-elevator-cutaway-dr 9s linear infinite;
}
@keyframes hln-elevator-cutaway-car {
  0% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  8% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  11% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  12% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.45, 0, .25, 1.06); }
  34% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -33.2)); }
  36% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -33.2)); }
  41% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -33.2)); }
  47% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -33.2)); }
  50% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -33.2)); }
  51% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -33.2)); animation-timing-function: cubic-bezier(.45, 0, .25, 1.06); }
  63% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -17.2)); }
  65% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -17.2)); }
  70% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -17.2)); }
  76% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -17.2)); }
  79% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -17.2)); }
  80% { transform: translate(calc(var(--u) * 0), calc(var(--u) * -17.2)); animation-timing-function: cubic-bezier(.45, 0, .25, 1.06); }
  94% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  95% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  100% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
}
@keyframes hln-elevator-cutaway-cable {
  0% { transform: scaleY(1); }
  8% { transform: scaleY(1); }
  11% { transform: scaleY(1); }
  12% { transform: scaleY(1); animation-timing-function: cubic-bezier(.45, 0, .25, 1.06); }
  34% { transform: scaleY(0.1); }
  36% { transform: scaleY(0.1); }
  41% { transform: scaleY(0.1); }
  47% { transform: scaleY(0.1); }
  50% { transform: scaleY(0.1); }
  51% { transform: scaleY(0.1); animation-timing-function: cubic-bezier(.45, 0, .25, 1.06); }
  63% { transform: scaleY(0.54); }
  65% { transform: scaleY(0.54); }
  70% { transform: scaleY(0.54); }
  76% { transform: scaleY(0.54); }
  79% { transform: scaleY(0.54); }
  80% { transform: scaleY(0.54); animation-timing-function: cubic-bezier(.45, 0, .25, 1.06); }
  94% { transform: scaleY(1); }
  95% { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}
@keyframes hln-elevator-cutaway-dl {
  0% { transform: translate(calc(var(--u) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  8% { transform: translate(calc(var(--u) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  11% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  12% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  34% { 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) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  41% { transform: translate(calc(var(--u) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  47% { transform: translate(calc(var(--u) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  51% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  63% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  65% { 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) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  76% { transform: translate(calc(var(--u) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  79% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  80% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  94% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  95% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: translate(calc(var(--u) * -1.6), calc(var(--u) * -0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
}
@keyframes hln-elevator-cutaway-dr {
  0% { transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  8% { transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  11% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  12% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  34% { 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) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  41% { transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  47% { transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  50% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  51% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  63% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  65% { 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) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  76% { transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  79% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  80% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  94% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  95% { transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  100% { transform: translate(calc(var(--u) * 1.6), calc(var(--u) * 0.8)); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-elevator-cutaway * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 3.4s) !important;
  }
}

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

Similar hairline animations