Pulsar

Transmission Flow

CSS

A high-voltage transmission line with three parallel wires carries glowing current pulses that travel smoothly from a left tower to a right tower.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Decorative and illustrative
Use cases
Dashboards and reporting, Ambient background
Industries
Energy and utilities, Cross-industry
Style
Duotone · light stroke
Set
grid
Tags
linegridpulsegeometric

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
CSS tier
Static vector
Transmission Flow, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="pulsar pulsar-grid-transmission" data-pulsar="grid-transmission" viewBox="0 0 160 96"><path stroke-width="1.5" d="m24 84 12-64 12 64M28 64h16M31 42h10m-21-8h32M16 48h40" class="grid-trans-tower" opacity=".4"></path><path stroke-width="1.5" d="m112 84 12-64 12 64m-20-20h16m-13-22h10m-21-8h32m-36 14h40" class="grid-trans-tower" opacity=".4"></path><path d="M20 34q60 14 88 0" class="grid-trans-wire" opacity=".25"></path><path d="M36 42q44 14 88 0" class="grid-trans-wire" opacity=".25"></path><path d="M16 48q64 14 88 0" class="grid-trans-wire" opacity=".25"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M20 34q60 14 88 0" class="grid-trans-pulse grid-trans-p1"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M36 42q44 14 88 0" class="grid-trans-pulse grid-trans-p2"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M16 48q64 14 88 0" class="grid-trans-pulse grid-trans-p3"></path></svg>

animation.css

.pulsar-grid-transmission {
  display: block;
  overflow: visible;
}
.pulsar-grid-transmission .grid-trans-pulse {
  stroke-dasharray: 14 90;
  animation: grid-transmission-flow-anim 4000ms linear infinite;
}
.pulsar-grid-transmission .grid-trans-p1 {
  animation-delay: 0ms;
}
.pulsar-grid-transmission .grid-trans-p2 {
  animation-delay: -1333ms;
}
.pulsar-grid-transmission .grid-trans-p3 {
  animation-delay: -2666ms;
}

@keyframes grid-transmission-flow-anim {
  0% {
    stroke-dashoffset: 104;
    opacity: 0.2;
  }
  30%,
  70% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -104;
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-grid-transmission .grid-trans-pulse {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
}

From this family15 in Grid

See the family