AI CSS Animations

Network Packet Route

An accent packet hops across a 3 by 3 grid of isometric network pads, turning at a right angle, and pings the host it reaches. SVG pads and routes, CSS translate and scale.

Also known as: network packet animation, isometric network diagram, hairline isometric.

HTML

<div class="hln-network-packet" role="img" aria-label="A packet routed across a network grid">
  <svg viewBox="-110 -60 220 120" aria-hidden="true"><g transform="translate(0 2) scale(1.4)"><line class="hln-network-packet-in" x1="5.5" y1="-21.25" x2="18.5" y2="-14.75"/><line class="hln-network-packet-in" x1="-5.5" y1="-21.25" x2="-18.5" y2="-14.75"/><line class="hln-network-packet-in" x1="29.5" y1="-9.25" x2="42.5" y2="-2.75"/><line class="hln-network-packet-in" x1="-29.5" y1="-9.25" x2="-42.5" y2="-2.75"/><line class="hln-network-packet-in" x1="-18.5" y1="-9.25" x2="-5.5" y2="-2.75"/><line class="hln-network-packet-in" x1="18.5" y1="-9.25" x2="5.5" y2="-2.75"/><line class="hln-network-packet-in" x1="5.5" y1="2.75" x2="18.5" y2="9.25"/><line class="hln-network-packet-in" x1="-5.5" y1="2.75" x2="-18.5" y2="9.25"/><line class="hln-network-packet-in" x1="-42.5" y1="2.75" x2="-29.5" y2="9.25"/><line class="hln-network-packet-in" x1="42.5" y1="2.75" x2="29.5" y2="9.25"/><line class="hln-network-packet-in" x1="-18.5" y1="14.75" x2="-5.5" y2="21.25"/><line class="hln-network-packet-in" x1="18.5" y1="14.75" x2="5.5" y2="21.25"/><g><polygon points="-11,-24 0,-18.5 0,-21.5 -11,-27"/><polygon points="11,-24 0,-18.5 0,-21.5 11,-27"/><polygon points="0,-32.5 11,-27 0,-21.5 -11,-27"/></g><polygon class="hln-network-packet-in" points="0,-29.5 5,-27 0,-24.5 -5,-27"/><g><polygon points="-35,-12 -24,-6.5 -24,-9.5 -35,-15"/><polygon points="-13,-12 -24,-6.5 -24,-9.5 -13,-15"/><polygon points="-24,-20.5 -13,-15 -24,-9.5 -35,-15"/></g><polygon class="hln-network-packet-in" points="-24,-17.5 -19,-15 -24,-12.5 -29,-15"/><g><polygon points="13,-12 24,-6.5 24,-9.5 13,-15"/><polygon points="35,-12 24,-6.5 24,-9.5 35,-15"/><polygon points="24,-20.5 35,-15 24,-9.5 13,-15"/></g><polygon class="hln-network-packet-in" points="24,-17.5 29,-15 24,-12.5 19,-15"/><g><polygon points="-59,0 -48,5.5 -48,2.5 -59,-3"/><polygon points="-37,0 -48,5.5 -48,2.5 -37,-3"/><polygon points="-48,-8.5 -37,-3 -48,2.5 -59,-3"/></g><polygon class="hln-network-packet-in" points="-48,-5.5 -43,-3 -48,-0.5 -53,-3"/><g><polygon points="-11,0 0,5.5 0,2.5 -11,-3"/><polygon points="11,0 0,5.5 0,2.5 11,-3"/><polygon points="0,-8.5 11,-3 0,2.5 -11,-3"/></g><polygon class="hln-network-packet-in" points="0,-5.5 5,-3 0,-0.5 -5,-3"/><g><polygon points="37,0 48,5.5 48,2.5 37,-3"/><polygon points="59,0 48,5.5 48,2.5 59,-3"/><polygon points="48,-8.5 59,-3 48,2.5 37,-3"/></g><polygon class="hln-network-packet-in" points="48,-5.5 53,-3 48,-0.5 43,-3"/><g><polygon points="-35,12 -24,17.5 -24,14.5 -35,9"/><polygon points="-13,12 -24,17.5 -24,14.5 -13,9"/><polygon points="-24,3.5 -13,9 -24,14.5 -35,9"/></g><polygon class="hln-network-packet-in" points="-24,6.5 -19,9 -24,11.5 -29,9"/><g><polygon points="13,12 24,17.5 24,14.5 13,9"/><polygon points="35,12 24,17.5 24,14.5 35,9"/><polygon points="24,3.5 35,9 24,14.5 13,9"/></g><polygon class="hln-network-packet-in" points="24,6.5 29,9 24,11.5 19,9"/><g><polygon points="-11,24 0,29.5 0,26.5 -11,21"/><polygon points="11,24 0,29.5 0,26.5 11,21"/><polygon points="0,15.5 11,21 0,26.5 -11,21"/></g><polygon class="hln-network-packet-in" points="0,18.5 5,21 0,23.5 -5,21"/><ellipse class="hln-network-packet-ping" cx="0" cy="21" rx="8.49" ry="4.24"/><g class="hln-network-packet-move"><g class="hln-network-packet-pkt"><g><polygon points="-4,-3 0,-1 0,-5 -4,-7"/><polygon points="4,-3 0,-1 0,-5 4,-7"/><polygon points="0,-9 4,-7 0,-5 -4,-7"/></g></g></g></g></svg>
</div>

CSS

.hln-network-packet {
  --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-network-packet svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-network-packet svg * {
  vector-effect: non-scaling-stroke;
}
.hln-network-packet .hln-network-packet-in {
  stroke: #9a9ca3;
}
.hln-network-packet .hln-network-packet-move {
  translate: 0 calc(-24 * var(--u));
  animation: hln-network-packet-move 5.6s infinite;
}
.hln-network-packet .hln-network-packet-pkt {
  transform-box: fill-box;
  transform-origin: 50% 80%;
  animation: hln-network-packet-pkt 5.6s infinite;
}
.hln-network-packet .hln-network-packet-pkt polygon {
  fill: var(--c);
}
.hln-network-packet .hln-network-packet-ping {
  fill: none;
  stroke: var(--c);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hln-network-packet-ping 5.6s infinite;
}
@keyframes hln-network-packet-move {
  0% { translate: 0 calc(-24 * var(--u)); }
  12% { translate: 0 calc(-24 * var(--u)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  32% { translate: calc(48 * var(--u)) 0; }
  38% { translate: calc(48 * var(--u)) 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  58% { translate: 0 calc(24 * var(--u)); }
  100% { translate: 0 calc(24 * var(--u)); }
}
@keyframes hln-network-packet-pkt {
  0%, 2% { scale: 0; animation-timing-function: cubic-bezier(0.3, 1.45, 0.45, 1); }
  10%, 58% { scale: 1; animation-timing-function: ease-in; }
  63%, 100% { scale: 0; }
}
@keyframes hln-network-packet-ping {
  0%, 59% { opacity: 0; scale: 0.6; }
  60% { opacity: 1; scale: 0.6; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  80%, 100% { opacity: 0; scale: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-network-packet * {
    animation: none !important;
  }
  .hln-network-packet .hln-network-packet-move { translate: calc(48 * var(--u)) 0; }
}

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

Customizing this snippet

  • Color: set --hln-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --hln-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hairline animations

Server Blade Slide Out
Router Signal Rings
City Block Night Shift
Wind Farm