Pulsar
Secure signal tunnel establishing isolated channel between nodes

Tunnel

CSS

A secure communication channel expands symmetrically from the midpoint between two nodes, conducting an authenticated data stream.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Security and trust
Industries
SaaS and software, Security and identity
Style
Minimal line · light stroke
Set
signal
Tags
loopminimaluilinepulse

Companion assets

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

Animated
Secure signal tunnel establishing isolated channel between nodes
CSS tier
Static vector
Tunnel, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="signal-tunnel-title" class="pulsar pulsar-signal-tunnel" data-pulsar="signal-tunnel" role="img" viewBox="0 0 120 40"><title id="signal-tunnel-title">Secure signal tunnel establishing isolated channel between nodes</title><line id="signal-tunnel-axis" x1="20" x2="100" y1="20" y2="20" stroke="currentColor" stroke-dasharray="2 3" stroke-opacity=".15" stroke-width="1"></line><line id="signal-tunnel-rail-top" x1="24" x2="96" y1="12" y2="12" stroke="currentColor" stroke-dasharray="72" stroke-dashoffset="0" stroke-width="1.5" opacity=".3"></line><line id="signal-tunnel-rail-bot" x1="24" x2="96" y1="28" y2="28" stroke="currentColor" stroke-dasharray="72" stroke-dashoffset="0" stroke-width="1.5" opacity=".3"></line><circle id="signal-tunnel-mid" cx="60" cy="20" r="2" fill="currentColor" opacity=".3"></circle><line id="signal-tunnel-pulse" x1="24" x2="96" y1="20" y2="20" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="16 80" stroke-dashoffset="16" stroke-linecap="round" stroke-width="2"></line><circle id="signal-tunnel-node-a" cx="20" cy="20" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-tunnel-node-b" cx="100" cy="20" r="3" fill="none" stroke="currentColor" stroke-width="2"></circle><circle id="signal-tunnel-ripple-b" cx="100" cy="20" r="3" fill="none" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" opacity="0"></circle></svg>

animation.css

.pulsar-signal-tunnel #signal-tunnel-rail-top {
  animation: signal-tunnel-rails 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 60px 12px;
}

.pulsar-signal-tunnel #signal-tunnel-rail-bot {
  animation: signal-tunnel-rails 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 60px 28px;
}

.pulsar-signal-tunnel #signal-tunnel-pulse {
  animation: signal-tunnel-transmit 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-signal-tunnel #signal-tunnel-ripple-b {
  animation: signal-tunnel-recv 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 100px 20px;
}

@keyframes signal-tunnel-rails {
  0%,
  8% {
    transform: scaleX(0);
    opacity: 0;
  }
  30%,
  75% {
    transform: scaleX(1);
    opacity: 0.45;
  }
  86%,
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

@keyframes signal-tunnel-transmit {
  0%,
  30% {
    stroke-dashoffset: 16;
    opacity: 0;
  }
  34% {
    opacity: 1;
  }
  64% {
    stroke-dashoffset: -80;
    opacity: 1;
  }
  68%,
  100% {
    stroke-dashoffset: -80;
    opacity: 0;
  }
}

@keyframes signal-tunnel-recv {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.6);
  }
  65% {
    opacity: 0.9;
  }
  80% {
    opacity: 0;
    transform: scale(3);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-signal-tunnel * {
    animation: none !important;
    transform: none;
  }
  .pulsar-signal-tunnel #signal-tunnel-rail-top,
  .pulsar-signal-tunnel #signal-tunnel-rail-bot {
    transform: scaleX(1);
    opacity: 0.4;
  }
  .pulsar-signal-tunnel #signal-tunnel-pulse {
    stroke-dashoffset: -32;
    opacity: 0.7;
  }
}

From this family13 in Signal

See the family