Pulsar
Modulating bandwidth channel with adaptive data streams

Bandwidth

CSS

A transmission corridor expands and constricts dynamically with capacity fluctuations as multiple secondary data streams modulate to fit available throughput.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Dashboards and reporting
Industries
SaaS and software, Energy and utilities
Style
Minimal line · light stroke
Set
signal
Tags
loopminimaluilinewave

Companion assets

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

Animated
Modulating bandwidth channel with adaptive data streams
CSS tier
Static vector
Bandwidth, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="signal-bandwidth-title" class="pulsar pulsar-signal-bandwidth" data-pulsar="signal-bandwidth" role="img" viewBox="0 0 120 40"><title id="signal-bandwidth-title">Modulating bandwidth channel with adaptive data streams</title><line id="signal-bandwidth-axis" x1="14" x2="106" y1="20" y2="20" stroke="currentColor" stroke-dasharray="2 3" stroke-opacity=".1" stroke-width="1"></line><line id="signal-bandwidth-cap-left" x1="14" x2="14" y1="8" y2="32" stroke="currentColor" stroke-linecap="round" stroke-opacity=".3" stroke-width="1.5"></line><line id="signal-bandwidth-cap-right" x1="106" x2="106" y1="8" y2="32" stroke="currentColor" stroke-linecap="round" stroke-opacity=".3" stroke-width="1.5"></line><line id="signal-bandwidth-rail-top" x1="14" x2="106" y1="16" y2="16" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" opacity=".4"></line><line id="signal-bandwidth-rail-bot" x1="14" x2="106" y1="24" y2="24" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" opacity=".4"></line><line id="signal-bandwidth-stream-top" x1="16" x2="104" y1="13" y2="13" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="14 18" stroke-linecap="round" stroke-width="1.5" opacity="0"></line><line id="signal-bandwidth-stream-mid" x1="16" x2="104" y1="20" y2="20" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="18 22" stroke-linecap="round" stroke-width="2"></line><line id="signal-bandwidth-stream-bot" x1="16" x2="104" y1="27" y2="27" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="14 18" stroke-linecap="round" stroke-width="1.5" opacity="0"></line></svg>

animation.css

.pulsar-signal-bandwidth #signal-bandwidth-rail-top {
  animation: signal-bandwidth-rail-top-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-signal-bandwidth #signal-bandwidth-rail-bot {
  animation: signal-bandwidth-rail-bot-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-signal-bandwidth #signal-bandwidth-stream-mid {
  animation: signal-bandwidth-flow-mid 4000ms linear infinite;
}

.pulsar-signal-bandwidth #signal-bandwidth-stream-top,
.pulsar-signal-bandwidth #signal-bandwidth-stream-bot {
  animation:
    signal-bandwidth-flow-side 4000ms linear infinite,
    signal-bandwidth-fade-side 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes signal-bandwidth-rail-top-anim {
  0%,
  15% {
    transform: translateY(0);
  }
  38%,
  65% {
    transform: translateY(-6px);
  }
  88%,
  100% {
    transform: translateY(0);
  }
}

@keyframes signal-bandwidth-rail-bot-anim {
  0%,
  15% {
    transform: translateY(0);
  }
  38%,
  65% {
    transform: translateY(6px);
  }
  88%,
  100% {
    transform: translateY(0);
  }
}

@keyframes signal-bandwidth-flow-mid {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -80;
  }
}

@keyframes signal-bandwidth-flow-side {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -64;
  }
}

@keyframes signal-bandwidth-fade-side {
  0%,
  20% {
    opacity: 0;
  }
  35%,
  68% {
    opacity: 0.9;
  }
  82%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-signal-bandwidth * {
    animation: none !important;
    transform: none;
  }
  .pulsar-signal-bandwidth #signal-bandwidth-rail-top {
    transform: translateY(-4px);
  }
  .pulsar-signal-bandwidth #signal-bandwidth-rail-bot {
    transform: translateY(4px);
  }
  .pulsar-signal-bandwidth #signal-bandwidth-stream-top,
  .pulsar-signal-bandwidth #signal-bandwidth-stream-bot {
    opacity: 0.6;
    stroke-dashoffset: 0;
  }
}

From this family13 in Signal

See the family