Pulsar
Seven peripheral cluster nodes reaching consensus in a clockwise wave to commit a block at the central hub

Cluster Consensus

CSS

Seven peripheral voter nodes validate state in a clockwise sequence, locking into a polygon topology as the central coordinator emits a verified consensus pulse.

Tier
CSS
Dependencies
None
Duration
8.4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Sync and integration
Industries
IT services and infrastructure, Cross-industry
Style
Minimal line · light stroke
Set
cluster
Tags
looporbitringdots

Companion assets

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

Animated
Seven peripheral cluster nodes reaching consensus in a clockwise wave to commit a block at the central hub
CSS tier
Static vector
Cluster Consensus, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="cluster-consensus-title" class="pulsar pulsar-cluster-consensus" data-pulsar="cluster-consensus" role="img" viewBox="0 0 160 96"><title id="cluster-consensus-title">Seven peripheral cluster nodes reaching consensus in a clockwise wave to commit a block at the central hub</title><circle cx="80" cy="48" r="26" fill="none" stroke="currentColor" stroke-dasharray="2 3" stroke-width=".5" opacity=".2"></circle><polygon id="cluster-consensus-poly" fill="currentColor" fill-opacity=".05" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" points="80,22 100,32 105,54 91,71 69,71 55,54 60,32" opacity="0"></polygon><circle cx="80" cy="48" r="7" fill="none" stroke="currentColor" stroke-width=".8" opacity=".3"></circle><circle id="cluster-consensus-hub" cx="80" cy="48" r="4.5" fill="currentColor"></circle><circle id="cluster-consensus-pulse" cx="80" cy="48" r="7" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><g id="cluster-consensus-n0"><circle cx="80" cy="22" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="80" cy="22" r="1.5" fill="currentColor"></circle></g><g id="cluster-consensus-n1"><circle cx="100" cy="32" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="100" cy="32" r="1.5" fill="currentColor"></circle></g><g id="cluster-consensus-n2"><circle cx="105" cy="54" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="105" cy="54" r="1.5" fill="currentColor"></circle></g><g id="cluster-consensus-n3"><circle cx="91" cy="71" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="91" cy="71" r="1.5" fill="currentColor"></circle></g><g id="cluster-consensus-n4"><circle cx="69" cy="71" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="69" cy="71" r="1.5" fill="currentColor"></circle></g><g id="cluster-consensus-n5"><circle cx="55" cy="54" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="55" cy="54" r="1.5" fill="currentColor"></circle></g><g id="cluster-consensus-n6"><circle cx="60" cy="32" r="3.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><circle cx="60" cy="32" r="1.5" fill="currentColor"></circle></g></svg>

animation.css

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

.pulsar-cluster-consensus #cluster-consensus-poly,
.pulsar-cluster-consensus #cluster-consensus-pulse {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-consensus #cluster-consensus-hub {
  fill: var(--pulsar-accent, currentColor);
}

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

.pulsar-cluster-consensus #cluster-consensus-n0 {
  animation: cluster-consensus-node 5600ms 0ms ease-out infinite;
}
.pulsar-cluster-consensus #cluster-consensus-n1 {
  animation: cluster-consensus-node 5600ms 400ms ease-out infinite;
}
.pulsar-cluster-consensus #cluster-consensus-n2 {
  animation: cluster-consensus-node 5600ms 800ms ease-out infinite;
}
.pulsar-cluster-consensus #cluster-consensus-n3 {
  animation: cluster-consensus-node 5600ms 1200ms ease-out infinite;
}
.pulsar-cluster-consensus #cluster-consensus-n4 {
  animation: cluster-consensus-node 5600ms 1600ms ease-out infinite;
}
.pulsar-cluster-consensus #cluster-consensus-n5 {
  animation: cluster-consensus-node 5600ms 2000ms ease-out infinite;
}
.pulsar-cluster-consensus #cluster-consensus-n6 {
  animation: cluster-consensus-node 5600ms 2400ms ease-out infinite;
}

@keyframes cluster-consensus-node {
  0% {
    opacity: 0.3;
  }
  15%,
  65% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0.3;
  }
}

.pulsar-cluster-consensus #cluster-consensus-poly {
  animation: cluster-consensus-poly-fade 5600ms 2800ms ease-in-out infinite;
}

@keyframes cluster-consensus-poly-fade {
  0% {
    opacity: 0;
  }
  15%,
  50% {
    opacity: 1;
  }
  75%,
  100% {
    opacity: 0;
  }
}

.pulsar-cluster-consensus #cluster-consensus-hub {
  animation: cluster-consensus-hub-pulse 5600ms 2800ms ease-in-out infinite;
}

@keyframes cluster-consensus-hub-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  15% {
    transform: scale(1.3);
    opacity: 1;
  }
  35%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

.pulsar-cluster-consensus #cluster-consensus-pulse {
  transform-origin: 80px 48px;
  animation: cluster-consensus-ring 5600ms 2800ms ease-out infinite;
}

@keyframes cluster-consensus-ring {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  10% {
    opacity: 0.8;
  }
  35% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-cluster-consensus * {
    animation: none !important;
  }
  .pulsar-cluster-consensus #cluster-consensus-n0,
  .pulsar-cluster-consensus #cluster-consensus-n1,
  .pulsar-cluster-consensus #cluster-consensus-n2,
  .pulsar-cluster-consensus #cluster-consensus-n3,
  .pulsar-cluster-consensus #cluster-consensus-n4,
  .pulsar-cluster-consensus #cluster-consensus-n5,
  .pulsar-cluster-consensus #cluster-consensus-n6 {
    opacity: 1;
  }
  .pulsar-cluster-consensus #cluster-consensus-poly {
    opacity: 0.8;
  }
}

From this family15 in Cluster

See the family