Pods Scaling Out

<div class="hln-pods-scale-out" role="img" aria-label="Pods scaling out from two to six">
  <svg viewBox="-110 -60 220 120" aria-hidden="true"><g transform="translate(0 8) scale(1.55)"><g><polygon points="-37,-3.5 7,18.5 7,15.5 -37,-6.5"/><polygon points="37,3.5 7,18.5 7,15.5 37,0.5"/><polygon points="-7,-21.5 37,0.5 7,15.5 -37,-6.5"/></g><polygon class="hln-pods-scale-out-in" points="-7,-18.5 3,-13.5 -7,-8.5 -17,-13.5"/><polygon class="hln-pods-scale-out-in" points="-21,-11.5 -11,-6.5 -21,-1.5 -31,-6.5"/><polygon class="hln-pods-scale-out-in" points="7,-11.5 17,-6.5 7,-1.5 -3,-6.5"/><polygon class="hln-pods-scale-out-in" points="-7,-4.5 3,0.5 -7,5.5 -17,0.5"/><polygon class="hln-pods-scale-out-in" points="21,-4.5 31,0.5 21,5.5 11,0.5"/><polygon class="hln-pods-scale-out-in" points="7,2.5 17,7.5 7,12.5 -3,7.5"/><g><g><polygon points="-17,-13.5 -7,-8.5 -7,-18.5 -17,-23.5"/><polygon points="3,-13.5 -7,-8.5 -7,-18.5 3,-23.5"/><polygon points="-7,-28.5 3,-23.5 -7,-18.5 -17,-23.5"/></g><polygon class="hln-pods-scale-out-in" points="-7,-25.5 -3,-23.5 -7,-21.5 -11,-23.5"/></g><g class="hln-pods-scale-out-pod" style="--d: 0s"><g><polygon points="-31,-6.5 -21,-1.5 -21,-11.5 -31,-16.5"/><polygon points="-11,-6.5 -21,-1.5 -21,-11.5 -11,-16.5"/><polygon points="-21,-21.5 -11,-16.5 -21,-11.5 -31,-16.5"/></g><polygon class="hln-pods-scale-out-in" points="-21,-18.5 -17,-16.5 -21,-14.5 -25,-16.5"/></g><g><g><polygon points="-3,-6.5 7,-1.5 7,-11.5 -3,-16.5"/><polygon points="17,-6.5 7,-1.5 7,-11.5 17,-16.5"/><polygon points="7,-21.5 17,-16.5 7,-11.5 -3,-16.5"/></g><polygon class="hln-pods-scale-out-in" points="7,-18.5 11,-16.5 7,-14.5 3,-16.5"/></g><g class="hln-pods-scale-out-pod" style="--d: 0.16s"><g><polygon points="-17,0.5 -7,5.5 -7,-4.5 -17,-9.5"/><polygon points="3,0.5 -7,5.5 -7,-4.5 3,-9.5"/><polygon points="-7,-14.5 3,-9.5 -7,-4.5 -17,-9.5"/></g><polygon class="hln-pods-scale-out-in" points="-7,-11.5 -3,-9.5 -7,-7.5 -11,-9.5"/></g><g class="hln-pods-scale-out-pod" style="--d: 0.32s"><g><polygon points="11,0.5 21,5.5 21,-4.5 11,-9.5"/><polygon points="31,0.5 21,5.5 21,-4.5 31,-9.5"/><polygon points="21,-14.5 31,-9.5 21,-4.5 11,-9.5"/></g><polygon class="hln-pods-scale-out-in" points="21,-11.5 25,-9.5 21,-7.5 17,-9.5"/></g><g class="hln-pods-scale-out-pod" style="--d: 0.48s"><g><polygon points="-3,7.5 7,12.5 7,2.5 -3,-2.5"/><polygon points="17,7.5 7,12.5 7,2.5 17,-2.5"/><polygon points="7,-7.5 17,-2.5 7,2.5 -3,-2.5"/></g><polygon class="hln-pods-scale-out-in" points="7,-4.5 11,-2.5 7,-0.5 3,-2.5"/></g></g></svg>
</div>

.hln-pods-scale-out {
  --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-pods-scale-out svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-pods-scale-out svg * {
  vector-effect: non-scaling-stroke;
}
.hln-pods-scale-out .hln-pods-scale-out-in {
  stroke: #9a9ca3;
}
.hln-pods-scale-out .hln-pods-scale-out-pod {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hln-pods-scale-out-pod 6s var(--d) infinite;
}
.hln-pods-scale-out .hln-pods-scale-out-pod > g > polygon:last-child {
  animation: hln-pods-scale-out-flash 6s var(--d) infinite;
}
@keyframes hln-pods-scale-out-pod {
  0%, 8% { scale: 0; animation-timing-function: cubic-bezier(0.3, 1.45, 0.45, 1); }
  18%, 70% { scale: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3); }
  76%, 100% { scale: 0; }
}
@keyframes hln-pods-scale-out-flash {
  0%, 12% { fill: var(--c); }
  34%, 100% { fill: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-pods-scale-out * {
    animation: none !important;
  }
  .hln-pods-scale-out .hln-pods-scale-out-pod:last-child > g > polygon:last-child { fill: var(--c); }
}

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

Similar hairline animations