Pulsar
Redundancy failover pipeline dynamically diverting active stream through diagonal backup channel upon primary route break

Redundancy failover

CSS

Two parallel deployment pipelines where a break in the primary track automatically reroutes active traffic through a diagonal failover channel.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Security and trust, Workflow and approvals
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
deploy
Tags
loopprogresslineui

Companion assets

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

Animated
Redundancy failover pipeline dynamically diverting active stream through diagonal backup channel upon primary route break
CSS tier
Static vector
Redundancy failover, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-redundancy-title" class="pulsar pulsar-deploy-redundancy" data-pulsar="deploy-redundancy" role="img" viewBox="0 0 160 96"><title id="deploy-redundancy-title">Redundancy failover pipeline dynamically diverting active stream through diagonal backup channel upon primary route break</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-redundancy-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-redundancy-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line x1="28" x2="68" y1="38" y2="38" opacity=".4"></line><line id="deploy-redundancy-rail-break" x1="72" x2="132" y1="38" y2="38" stroke-dasharray="3 3" opacity=".3"></line><line id="deploy-redundancy-rail-diag" x1="64" x2="96" y1="38" y2="58" stroke-dasharray="2 3" opacity=".5"></line><line x1="28" x2="132" y1="58" y2="58" opacity=".4"></line></g><line id="deploy-redundancy-break-marker" x1="70" x2="70" y1="33" y2="43" stroke="currentColor" stroke-width="1.5" opacity="0"></line><line id="deploy-redundancy-flow-pri" x1="28" x2="64" y1="38" y2="38" fill="none" stroke="currentColor" stroke-dasharray="36" stroke-dashoffset="36" stroke-width="1.75"></line><line id="deploy-redundancy-flow-bypass" x1="64" x2="96" y1="38" y2="58" fill="none" stroke="currentColor" stroke-dasharray="38" stroke-dashoffset="38" stroke-width="1.75"></line><line id="deploy-redundancy-flow-sec" x1="96" x2="132" y1="58" y2="58" fill="none" stroke="currentColor" stroke-dasharray="36" stroke-dashoffset="36" stroke-width="1.75"></line><circle cx="28" cy="38" r="3" fill="currentColor" opacity=".5"></circle><circle cx="28" cy="58" r="3" fill="currentColor" opacity=".5"></circle><circle id="deploy-redundancy-node-pri" cx="64" cy="38" r="3.5" fill="currentColor"></circle><circle id="deploy-redundancy-node-sec" cx="96" cy="58" r="3.5" fill="currentColor"></circle><circle id="deploy-redundancy-exit-node" cx="132" cy="58" r="3" fill="currentColor"></circle><circle id="deploy-redundancy-pulse-ring" cx="132" cy="58" r="7" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

animation.css

.pulsar-deploy-redundancy {
  --pulsar-accent: currentColor;
}

.pulsar-deploy-redundancy #deploy-redundancy-node-pri,
.pulsar-deploy-redundancy #deploy-redundancy-node-sec,
.pulsar-deploy-redundancy #deploy-redundancy-exit-node {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-redundancy #deploy-redundancy-flow-pri,
.pulsar-deploy-redundancy #deploy-redundancy-flow-bypass,
.pulsar-deploy-redundancy #deploy-redundancy-flow-sec,
.pulsar-deploy-redundancy #deploy-redundancy-pulse-ring,
.pulsar-deploy-redundancy #deploy-redundancy-break-marker {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-redundancy #deploy-redundancy-flow-pri {
  animation: deploy-redundancy-f-pri 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-redundancy #deploy-redundancy-break-marker {
  animation: deploy-redundancy-fault 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-redundancy #deploy-redundancy-flow-bypass {
  animation: deploy-redundancy-f-bypass 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-redundancy #deploy-redundancy-flow-sec {
  animation: deploy-redundancy-f-sec 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-redundancy #deploy-redundancy-pulse-ring {
  animation: deploy-redundancy-ring 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 132px 58px;
}

@keyframes deploy-redundancy-f-pri {
  0% {
    stroke-dashoffset: 36;
    opacity: 0.3;
  }
  24%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: 36;
    opacity: 0.3;
  }
}

@keyframes deploy-redundancy-fault {
  0%,
  22% {
    opacity: 0;
    transform: scaleY(0.4);
  }
  28%,
  85% {
    opacity: 1;
    transform: scaleY(1);
  }
  96%,
  100% {
    opacity: 0;
    transform: scaleY(0.4);
  }
}

@keyframes deploy-redundancy-f-bypass {
  0%,
  26% {
    stroke-dashoffset: 38;
    opacity: 0;
  }
  50%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: -38;
    opacity: 0;
  }
}

@keyframes deploy-redundancy-f-sec {
  0%,
  50% {
    stroke-dashoffset: 36;
    opacity: 0;
  }
  72%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  96%,
  100% {
    stroke-dashoffset: -36;
    opacity: 0;
  }
}

@keyframes deploy-redundancy-ring {
  0%,
  70% {
    opacity: 0;
    transform: scale(0.5);
  }
  76% {
    opacity: 0.9;
  }
  90% {
    opacity: 0;
    transform: scale(2.4);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-redundancy * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-redundancy #deploy-redundancy-flow-pri,
  .pulsar-deploy-redundancy #deploy-redundancy-flow-bypass,
  .pulsar-deploy-redundancy #deploy-redundancy-flow-sec {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

From this family15 in Deploy

See the family