City Block Night Shift

<div class="hln-city-windows" role="img" aria-label="A city block where one lit window moves from building to building"><svg viewBox="-80 -42.54 156 85.09" aria-hidden="true"><line x1="-68" y1="4" x2="42" y2="59"/><line x1="-78" y1="9" x2="32" y2="64"/><line x1="-67" y1="9.5" x2="-63" y2="11.5" class="hln-city-windows-l"/><line x1="-59" y1="13.5" x2="-55" y2="15.5" class="hln-city-windows-l"/><line x1="-51" y1="17.5" x2="-47" y2="19.5" class="hln-city-windows-l"/><line x1="-43" y1="21.5" x2="-39" y2="23.5" class="hln-city-windows-l"/><line x1="-35" y1="25.5" x2="-31" y2="27.5" class="hln-city-windows-l"/><line x1="-27" y1="29.5" x2="-23" y2="31.5" class="hln-city-windows-l"/><line x1="-19" y1="33.5" x2="-15" y2="35.5" class="hln-city-windows-l"/><line x1="-11" y1="37.5" x2="-7" y2="39.5" class="hln-city-windows-l"/><line x1="-3" y1="41.5" x2="1" y2="43.5" class="hln-city-windows-l"/><line x1="5" y1="45.5" x2="9" y2="47.5" class="hln-city-windows-l"/><line x1="13" y1="49.5" x2="17" y2="51.5" class="hln-city-windows-l"/><line x1="21" y1="53.5" x2="25" y2="55.5" class="hln-city-windows-l"/><line x1="29" y1="57.5" x2="33" y2="59.5" class="hln-city-windows-l"/><g><polygon points="-40,14 6,37 6,35 -40,12"/><polygon points="46,17 6,37 6,35 46,15"/><polygon points="0,-8 46,15 6,35 -40,12"/></g><g><polygon points="-12,4 2,11 2,-29 -12,-36"/><polygon points="14,5 2,11 2,-29 14,-35"/><polygon points="0,-42 14,-35 2,-29 -12,-36"/></g><polygon points="-10,1 -7.6,2.2 -7.6,-1 -10,-2.2" class="hln-city-windows-l"/><polygon points="-6,3 -3.6,4.2 -3.6,1 -6,-0.2" class="hln-city-windows-l"/><polygon points="-2,5 0.4,6.2 0.4,3 -2,1.8" class="hln-city-windows-l"/><polygon points="-10,-4 -7.6,-2.8 -7.6,-6 -10,-7.2" class="hln-city-windows-l"/><polygon points="-6,-2 -3.6,-0.8 -3.6,-4 -6,-5.2" class="hln-city-windows-l"/><polygon points="-2,0 0.4,1.2 0.4,-2 -2,-3.2" class="hln-city-windows-l"/><polygon points="-10,-9 -7.6,-7.8 -7.6,-11 -10,-12.2" class="hln-city-windows-l"/><polygon points="-6,-7 -3.6,-5.8 -3.6,-9 -6,-10.2" class="hln-city-windows-l"/><polygon points="-2,-5 0.4,-3.8 0.4,-7 -2,-8.2" class="hln-city-windows-l"/><polygon points="-10,-14 -7.6,-12.8 -7.6,-16 -10,-17.2" class="hln-city-windows-l"/><polygon points="-6,-12 -3.6,-10.8 -3.6,-14 -6,-15.2" class="hln-city-windows-l"/><polygon points="-2,-10 0.4,-8.8 0.4,-12 -2,-13.2" class="hln-city-windows-l"/><polygon points="-10,-19 -7.6,-17.8 -7.6,-21 -10,-22.2" class="hln-city-windows-l"/><polygon points="-6,-17 -3.6,-15.8 -3.6,-19 -6,-20.2" class="hln-city-windows-l"/><polygon points="-2,-15 0.4,-13.8 0.4,-17 -2,-18.2" class="hln-city-windows-l"/><polygon points="-10,-24 -7.6,-22.8 -7.6,-26 -10,-27.2" class="hln-city-windows-l"/><polygon points="-6,-22 -3.6,-20.8 -3.6,-24 -6,-25.2" class="hln-city-windows-l"/><polygon points="-2,-20 0.4,-18.8 0.4,-22 -2,-23.2" class="hln-city-windows-l"/><polygon points="-10,-29 -7.6,-27.8 -7.6,-31 -10,-32.2" class="hln-city-windows-l"/><polygon points="-6,-27 -3.6,-25.8 -3.6,-29 -6,-30.2" class="hln-city-windows-l"/><polygon points="-2,-25 0.4,-23.8 0.4,-27 -2,-28.2" class="hln-city-windows-l"/><polygon points="12,2 9.6,3.2 9.6,0 12,-1.2" class="hln-city-windows-l"/><polygon points="8,4 5.6,5.2 5.6,2 8,0.8" class="hln-city-windows-l"/><polygon points="12,-3 9.6,-1.8 9.6,-5 12,-6.2" class="hln-city-windows-l"/><polygon points="8,-1 5.6,0.2 5.6,-3 8,-4.2" class="hln-city-windows-l"/><polygon points="12,-8 9.6,-6.8 9.6,-10 12,-11.2" class="hln-city-windows-l"/><polygon points="8,-6 5.6,-4.8 5.6,-8 8,-9.2" class="hln-city-windows-l"/><polygon points="12,-13 9.6,-11.8 9.6,-15 12,-16.2" class="hln-city-windows-l"/><polygon points="8,-11 5.6,-9.8 5.6,-13 8,-14.2" class="hln-city-windows-l"/><polygon points="12,-18 9.6,-16.8 9.6,-20 12,-21.2" class="hln-city-windows-l"/><polygon points="8,-16 5.6,-14.8 5.6,-18 8,-19.2" class="hln-city-windows-l"/><polygon points="12,-23 9.6,-21.8 9.6,-25 12,-26.2" class="hln-city-windows-l"/><polygon points="8,-21 5.6,-19.8 5.6,-23 8,-24.2" class="hln-city-windows-l"/><polygon points="12,-28 9.6,-26.8 9.6,-30 12,-31.2" class="hln-city-windows-l"/><polygon points="8,-26 5.6,-24.8 5.6,-28 8,-29.2" class="hln-city-windows-l"/><g class="hln-city-windows-lit" style="--delay: -0s"><polygon points="8,-21 5.6,-19.8 5.6,-23 8,-24.2" class="hln-city-windows-a"/></g><path d="M-2.39,-39.5 L-2.39,-35.5 A3.39,1.7 0 0 0 4.39,-35.5 L4.39,-39.5 Z"/><ellipse cx="1" cy="-39.5" rx="3.39" ry="1.7"/><line x1="0" y1="-39" x2="0" y2="-44"/><g><polygon points="8,12 22,19 22,-5 8,-12"/><polygon points="34,13 22,19 22,-5 34,-11"/><polygon points="20,-18 34,-11 22,-5 8,-12"/></g><polygon points="10,9 12.4,10.2 12.4,7 10,5.8" class="hln-city-windows-l"/><polygon points="14,11 16.4,12.2 16.4,9 14,7.8" class="hln-city-windows-l"/><polygon points="18,13 20.4,14.2 20.4,11 18,9.8" class="hln-city-windows-l"/><polygon points="10,4 12.4,5.2 12.4,2 10,0.8" class="hln-city-windows-l"/><polygon points="14,6 16.4,7.2 16.4,4 14,2.8" class="hln-city-windows-l"/><polygon points="18,8 20.4,9.2 20.4,6 18,4.8" class="hln-city-windows-l"/><polygon points="10,-1 12.4,0.2 12.4,-3 10,-4.2" class="hln-city-windows-l"/><polygon points="14,1 16.4,2.2 16.4,-1 14,-2.2" class="hln-city-windows-l"/><polygon points="18,3 20.4,4.2 20.4,1 18,-0.2" class="hln-city-windows-l"/><polygon points="32,10 29.6,11.2 29.6,8 32,6.8" class="hln-city-windows-l"/><polygon points="28,12 25.6,13.2 25.6,10 28,8.8" class="hln-city-windows-l"/><polygon points="32,5 29.6,6.2 29.6,3 32,1.8" class="hln-city-windows-l"/><polygon points="28,7 25.6,8.2 25.6,5 28,3.8" class="hln-city-windows-l"/><polygon points="32,0 29.6,1.2 29.6,-2 32,-3.2" class="hln-city-windows-l"/><polygon points="28,2 25.6,3.2 25.6,0 28,-1.2" class="hln-city-windows-l"/><g class="hln-city-windows-lit" style="--delay: -1.5s"><polygon points="28,-3 25.6,-1.8 25.6,-5 28,-6.2" class="hln-city-windows-a"/></g><g><polygon points="17,-13.5 21,-11.5 21,-13.5 17,-15.5"/><polygon points="24,-13 21,-11.5 21,-13.5 24,-15"/><polygon points="20,-17 24,-15 21,-13.5 17,-15.5"/></g><g><polygon points="22.5,-10.75 26.5,-8.75 26.5,-10.75 22.5,-12.75"/><polygon points="29.5,-10.25 26.5,-8.75 26.5,-10.75 29.5,-12.25"/><polygon points="25.5,-14.25 29.5,-12.25 26.5,-10.75 22.5,-12.75"/></g><g><polygon points="-30,13 -18,19 -18,3 -30,-3"/><polygon points="-4,12 -18,19 -18,3 -4,-4"/><polygon points="-16,-10 -4,-4 -18,3 -30,-3"/></g><polygon points="-28,10 -25.6,11.2 -25.6,8 -28,6.8" class="hln-city-windows-l"/><polygon points="-24,12 -21.6,13.2 -21.6,10 -24,8.8" class="hln-city-windows-l"/><polygon points="-28,5 -25.6,6.2 -25.6,3 -28,1.8" class="hln-city-windows-l"/><polygon points="-24,7 -21.6,8.2 -21.6,5 -24,3.8" class="hln-city-windows-l"/><polygon points="-6,9 -8.4,10.2 -8.4,7 -6,5.8" class="hln-city-windows-l"/><polygon points="-10,11 -12.4,12.2 -12.4,9 -10,7.8" class="hln-city-windows-l"/><polygon points="-14,13 -16.4,14.2 -16.4,11 -14,9.8" class="hln-city-windows-l"/><polygon points="-6,4 -8.4,5.2 -8.4,2 -6,0.8" class="hln-city-windows-l"/><polygon points="-10,6 -12.4,7.2 -12.4,4 -10,2.8" class="hln-city-windows-l"/><polygon points="-14,8 -16.4,9.2 -16.4,6 -14,4.8" class="hln-city-windows-l"/><g class="hln-city-windows-lit" style="--delay: -3s"><polygon points="-24,12 -21.6,13.2 -21.6,10 -24,8.8" class="hln-city-windows-a"/></g><polygon class="hln-city-windows-l" points="-16,-8.5 -7,-4 -18,1.5 -27,-3"/><g><polygon points="-12,21 3,28.5 3,-1.5 -12,-9"/><polygon points="18,21 3,28.5 3,-1.5 18,-9"/><polygon points="3,-16.5 18,-9 3,-1.5 -12,-9"/></g><polygon points="-10,18 -7.6,19.2 -7.6,16 -10,14.8" class="hln-city-windows-l"/><polygon points="-6,20 -3.6,21.2 -3.6,18 -6,16.8" class="hln-city-windows-l"/><polygon points="-2,22 0.4,23.2 0.4,20 -2,18.8" class="hln-city-windows-l"/><polygon points="-10,13 -7.6,14.2 -7.6,11 -10,9.8" class="hln-city-windows-l"/><polygon points="-6,15 -3.6,16.2 -3.6,13 -6,11.8" class="hln-city-windows-l"/><polygon points="-2,17 0.4,18.2 0.4,15 -2,13.8" class="hln-city-windows-l"/><polygon points="-10,8 -7.6,9.2 -7.6,6 -10,4.8" class="hln-city-windows-l"/><polygon points="-6,10 -3.6,11.2 -3.6,8 -6,6.8" class="hln-city-windows-l"/><polygon points="-2,12 0.4,13.2 0.4,10 -2,8.8" class="hln-city-windows-l"/><polygon points="-10,3 -7.6,4.2 -7.6,1 -10,-0.2" class="hln-city-windows-l"/><polygon points="-6,5 -3.6,6.2 -3.6,3 -6,1.8" class="hln-city-windows-l"/><polygon points="-2,7 0.4,8.2 0.4,5 -2,3.8" class="hln-city-windows-l"/><polygon points="-10,-2 -7.6,-0.8 -7.6,-4 -10,-5.2" class="hln-city-windows-l"/><polygon points="-6,0 -3.6,1.2 -3.6,-2 -6,-3.2" class="hln-city-windows-l"/><polygon points="-2,2 0.4,3.2 0.4,0 -2,-1.2" class="hln-city-windows-l"/><polygon points="16,18 13.6,19.2 13.6,16 16,14.8" class="hln-city-windows-l"/><polygon points="12,20 9.6,21.2 9.6,18 12,16.8" class="hln-city-windows-l"/><polygon points="8,22 5.6,23.2 5.6,20 8,18.8" class="hln-city-windows-l"/><polygon points="16,13 13.6,14.2 13.6,11 16,9.8" class="hln-city-windows-l"/><polygon points="12,15 9.6,16.2 9.6,13 12,11.8" class="hln-city-windows-l"/><polygon points="8,17 5.6,18.2 5.6,15 8,13.8" class="hln-city-windows-l"/><polygon points="16,8 13.6,9.2 13.6,6 16,4.8" class="hln-city-windows-l"/><polygon points="12,10 9.6,11.2 9.6,8 12,6.8" class="hln-city-windows-l"/><polygon points="8,12 5.6,13.2 5.6,10 8,8.8" class="hln-city-windows-l"/><polygon points="16,3 13.6,4.2 13.6,1 16,-0.2" class="hln-city-windows-l"/><polygon points="12,5 9.6,6.2 9.6,3 12,1.8" class="hln-city-windows-l"/><polygon points="8,7 5.6,8.2 5.6,5 8,3.8" class="hln-city-windows-l"/><polygon points="16,-2 13.6,-0.8 13.6,-4 16,-5.2" class="hln-city-windows-l"/><polygon points="12,0 9.6,1.2 9.6,-2 12,-3.2" class="hln-city-windows-l"/><polygon points="8,2 5.6,3.2 5.6,0 8,-1.2" class="hln-city-windows-l"/><g class="hln-city-windows-lit" style="--delay: -4.5s"><polygon points="12,5 9.6,6.2 9.6,3 12,1.8" class="hln-city-windows-a"/></g><g><polygon points="-3,-10.5 3,-7.5 3,-10.5 -3,-13.5"/><polygon points="9,-10.5 3,-7.5 3,-10.5 9,-13.5"/><polygon points="3,-16.5 9,-13.5 3,-10.5 -3,-13.5"/></g><line x1="4" y1="-6" x2="4" y2="-14"/><g class="hln-city-windows-car"><g><polygon points="-64.5,11.45 -55.5,15.95 -55.5,12.95 -64.5,8.45"/><polygon points="-50.5,13.45 -55.5,15.95 -55.5,12.95 -50.5,10.45"/><polygon points="-59.5,5.95 -50.5,10.45 -55.5,12.95 -64.5,8.45"/></g><g><polygon points="-62,9.7 -57,12.2 -57,10 -62,7.5"/><polygon points="-52,9.7 -57,12.2 -57,10 -52,7.5"/><polygon points="-57,5 -52,7.5 -57,10 -62,7.5"/></g><polygon points="-61.1,13.05 -61.12,12.84 -61.19,12.61 -61.3,12.39 -61.44,12.18 -61.61,11.98 -61.8,11.82 -62,11.7 -62.2,11.62 -62.39,11.59 -62.56,11.62 -62.7,11.69 -62.81,11.8 -62.88,11.96 -62.9,12.15 -62.88,12.36 -62.81,12.59 -62.7,12.81 -62.56,13.02 -62.39,13.22 -62.2,13.38 -62,13.5 -61.8,13.58 -61.61,13.61 -61.44,13.58 -61.3,13.51 -61.19,13.4 -61.12,13.24"/><polygon points="-56.6,15.3 -56.62,15.09 -56.69,14.86 -56.8,14.64 -56.94,14.43 -57.11,14.23 -57.3,14.07 -57.5,13.95 -57.7,13.87 -57.89,13.84 -58.06,13.87 -58.2,13.94 -58.31,14.05 -58.38,14.21 -58.4,14.4 -58.38,14.61 -58.31,14.84 -58.2,15.06 -58.06,15.27 -57.89,15.47 -57.7,15.63 -57.5,15.75 -57.3,15.83 -57.11,15.86 -56.94,15.83 -56.8,15.76 -56.69,15.65 -56.62,15.49"/></g></svg></div>

.hln-city-windows {
  --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-city-windows svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-city-windows svg * {
  vector-effect: non-scaling-stroke;
}
.hln-city-windows-l {
  stroke: #9a9ca3;
}
.hln-city-windows-a {
  fill: var(--c);
}
.hln-city-windows-lit {
  animation: hln-city-windows-lit 6s linear infinite;
  animation-delay: var(--delay);
}
.hln-city-windows-car {
  animation: hln-city-windows-car 6s linear infinite;
}
@keyframes hln-city-windows-lit {
  0% { opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  5%, 24% { opacity: 1; animation-timing-function: ease-in; }
  30%, 100% { opacity: 0; }
}
@keyframes hln-city-windows-car {
  0% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  8% { opacity: 1; transform: translate(calc(var(--u) * 9), calc(var(--u) * 4.5)); }
  92% { opacity: 1; transform: translate(calc(var(--u) * 103), calc(var(--u) * 51.5)); }
  100% { opacity: 0; transform: translate(calc(var(--u) * 112), calc(var(--u) * 56)); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-city-windows * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 0.8s) !important;
  }
}

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

Similar hairline animations