Pulsar

Bypass

CSS

A loop of dots flows around a central block that is marked with a failure cross, bypassing the broken node completely.

Tier
CSS
Dependencies
None
Duration
5.5 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Security and trust
Industries
IT services and infrastructure, Cross-industry
Style
Technical · light stroke
Set
failover
Tags
geometriclineloopparticlesui

Companion assets

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

Animated
CSS tier
Static vector
Bypass, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-failover-bypass" data-pulsar="failover-bypass" viewBox="0 0 160 96"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><rect id="failover-bypass-box" width="32" height="32" x="64" y="32" fill="currentColor" fill-opacity=".06" rx="4"></rect><line id="failover-bypass-cross-1" x1="72" x2="88" y1="40" y2="56" stroke-width="2"></line><line id="failover-bypass-cross-2" x1="88" x2="72" y1="40" y2="56" stroke-width="2"></line></g><line x1="16" x2="52" y1="48" y2="48" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"></line><line x1="108" x2="144" y1="48" y2="48" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"></line><g stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path id="failover-bypass-arch-top" d="M44 48c0-28 72-28 72 0"></path><path id="failover-bypass-arch-bot" d="M44 48c0 28 72 28 72 0"></path></g><g fill="var(--pulsar-accent, currentColor)"><circle id="failover-bypass-dot-t1" cx="60" cy="28" r="2.5"></circle><circle id="failover-bypass-dot-t2" cx="100" cy="28" r="2.5"></circle><circle id="failover-bypass-dot-b1" cx="60" cy="68" r="2.5"></circle><circle id="failover-bypass-dot-b2" cx="100" cy="68" r="2.5"></circle></g></svg>

animation.css

.pulsar-failover-bypass #failover-bypass-box,
.pulsar-failover-bypass #failover-bypass-cross-1,
.pulsar-failover-bypass #failover-bypass-cross-2 {
  animation: failover-bypass-fault 5500ms ease-in-out infinite;
}

@keyframes failover-bypass-fault {
  0%,
  25% {
    opacity: 0.4;
  }
  32%,
  82% {
    opacity: 1;
    stroke: currentColor;
  }
  90%,
  100% {
    opacity: 0.4;
  }
}

.pulsar-failover-bypass #failover-bypass-arch-top,
.pulsar-failover-bypass #failover-bypass-arch-bot {
  animation: failover-bypass-arches 5500ms ease-in-out infinite;
}

@keyframes failover-bypass-arches {
  0%,
  26% {
    opacity: 0.25;
  }
  36%,
  82% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0.25;
  }
}

.pulsar-failover-bypass #failover-bypass-dot-t1,
.pulsar-failover-bypass #failover-bypass-dot-t2,
.pulsar-failover-bypass #failover-bypass-dot-b1,
.pulsar-failover-bypass #failover-bypass-dot-b2 {
  animation: failover-bypass-stream 5500ms linear infinite;
}

@keyframes failover-bypass-stream {
  0%,
  28% {
    opacity: 0;
    transform: translateX(-12px);
  }
  38%,
  78% {
    opacity: 1;
    transform: translateX(12px);
  }
  86%,
  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-failover-bypass * {
    animation: none !important;
  }
}

From this family15 in Failover

See the family