Pulsar
Active cluster nodes passing through a graceful degradation boundary where they decommission and drain

Cluster Node Drain

CSS

Active cluster nodes advance sequentially across a vertical decommissioning boundary where they dim, contract, and drain from active service topology.

Tier
CSS
Dependencies
None
Duration
6 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Transitions and reveals
Industries
SaaS and software, IT services and infrastructure
Style
Minimal line · light stroke
Set
cluster
Tags
looplinedotswipe

Companion assets

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

Animated
Active cluster nodes passing through a graceful degradation boundary where they decommission and drain
CSS tier
Static vector
Cluster Node Drain, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="cluster-drain-title" class="pulsar pulsar-cluster-drain" data-pulsar="cluster-drain" role="img" viewBox="0 0 160 96"><title id="cluster-drain-title">Active cluster nodes passing through a graceful degradation boundary where they decommission and drain</title><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="16" x2="144" y1="48" y2="48"></line><line x1="16" x2="80" y1="36" y2="36"></line><line x1="16" x2="80" y1="60" y2="60"></line><line x1="80" x2="144" y1="36" y2="36" stroke-dasharray="2 3"></line><line x1="80" x2="144" y1="60" y2="60" stroke-dasharray="2 3"></line></g><g id="cluster-drain-gate"><line x1="80" x2="80" y1="26" y2="70" fill="none" stroke="currentColor" stroke-width="1.2"></line><polygon fill="currentColor" points="80,24 84,28 76,28"></polygon><polygon fill="currentColor" points="80,72 84,68 76,68"></polygon></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".1"><line x1="90" x2="98" y1="38" y2="58"></line><line x1="106" x2="114" y1="38" y2="58"></line><line x1="122" x2="130" y1="38" y2="58"></line></g><g id="cluster-drain-n1"><circle cx="28" cy="48" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="28" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-drain-n2"><circle cx="48" cy="48" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="48" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-drain-n3"><circle cx="68" cy="48" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="68" cy="48" r="2" fill="currentColor"></circle></g><g id="cluster-drain-n4"><circle cx="88" cy="48" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="88" cy="48" r="2" fill="currentColor"></circle></g></svg>

animation.css

.pulsar-cluster-drain {
  --pulsar-accent: currentColor;
}

.pulsar-cluster-drain #cluster-drain-gate line {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-drain #cluster-drain-gate polygon {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-drain #cluster-drain-n1 circle:last-child,
.pulsar-cluster-drain #cluster-drain-n2 circle:last-child,
.pulsar-cluster-drain #cluster-drain-n3 circle:last-child,
.pulsar-cluster-drain #cluster-drain-n4 circle:last-child {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-drain #cluster-drain-n1 {
  animation: cluster-drain-flow1 6000ms linear infinite;
}
.pulsar-cluster-drain #cluster-drain-n2 {
  animation: cluster-drain-flow2 6000ms linear infinite;
}
.pulsar-cluster-drain #cluster-drain-n3 {
  animation: cluster-drain-flow3 6000ms linear infinite;
}
.pulsar-cluster-drain #cluster-drain-n4 {
  animation: cluster-drain-flow4 6000ms linear infinite;
}

/* N1 starts at 28, travels to 76 */
@keyframes cluster-drain-flow1 {
  0% {
    transform: translateX(0);
    opacity: 0.2;
  }
  15% {
    opacity: 1;
  }
  85% {
    transform: translateX(48px);
    opacity: 1;
  }
  100% {
    transform: translateX(54px);
    opacity: 0.8;
  }
}

/* N2 starts at 48, crosses 80 at ~60% */
@keyframes cluster-drain-flow2 {
  0% {
    transform: translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateX(28px);
    opacity: 1;
  }
  75% {
    transform: translateX(42px) scale(0.7);
    opacity: 0.4;
  }
  90%,
  100% {
    transform: translateX(50px) scale(0.2);
    opacity: 0;
  }
}

/* N3 starts at 68, crosses 80 at ~30% */
@keyframes cluster-drain-flow3 {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    transform: translateX(14px);
    opacity: 1;
  }
  55% {
    transform: translateX(32px) scale(0.6);
    opacity: 0.3;
  }
  75%,
  100% {
    transform: translateX(45px) scale(0.2);
    opacity: 0;
  }
}

/* N4 starts at 88 (already past gate), drains out immediately, then respawns at far left */
@keyframes cluster-drain-flow4 {
  0% {
    transform: translateX(0) scale(0.9);
    opacity: 0.6;
  }
  25% {
    transform: translateX(20px) scale(0.3);
    opacity: 0;
  }
  35% {
    transform: translateX(-70px) scale(0.2);
    opacity: 0;
  }
  50% {
    transform: translateX(-60px) scale(1);
    opacity: 0.9;
  }
  90%,
  100% {
    transform: translateX(-20px) scale(1);
    opacity: 1;
  }
}

.pulsar-cluster-drain #cluster-drain-gate {
  animation: cluster-drain-gate-glow 6000ms ease-in-out infinite;
}

@keyframes cluster-drain-gate-glow {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-cluster-drain * {
    animation: none !important;
  }
  .pulsar-cluster-drain #cluster-drain-n1,
  .pulsar-cluster-drain #cluster-drain-n2 {
    opacity: 1;
  }
  .pulsar-cluster-drain #cluster-drain-n3 {
    opacity: 0.5;
    transform: scale(0.7);
  }
  .pulsar-cluster-drain #cluster-drain-n4 {
    opacity: 0.2;
    transform: scale(0.4);
  }
}

From this family15 in Cluster

See the family