Pulsar
Three cluster nodes emitting staggered concentric pulse waves to report node liveness

Cluster Heartbeat

CSS

A series of soft concentric pulse circles expand outward from three central nodes in a staggered sequence across a topology grid.

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

Companion assets

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

Animated
Three cluster nodes emitting staggered concentric pulse waves to report node liveness
CSS tier
Static vector
Cluster Heartbeat, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="cluster-heartbeat-title" class="pulsar pulsar-cluster-heartbeat" data-pulsar="cluster-heartbeat" role="img" viewBox="0 0 160 96"><title id="cluster-heartbeat-title">Three cluster nodes emitting staggered concentric pulse waves to report node liveness</title><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".25"><line x1="56" x2="80" y1="52" y2="34"></line><line x1="80" x2="104" y1="34" y2="52"></line><line x1="56" x2="104" y1="52" y2="52"></line></g><circle id="cluster-heartbeat-rA1" cx="56" cy="52" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><circle id="cluster-heartbeat-rA2" cx="56" cy="52" r="5" fill="none" stroke="currentColor" stroke-width=".8" opacity="0"></circle><circle id="cluster-heartbeat-rB1" cx="80" cy="34" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><circle id="cluster-heartbeat-rB2" cx="80" cy="34" r="5" fill="none" stroke="currentColor" stroke-width=".8" opacity="0"></circle><circle id="cluster-heartbeat-rC1" cx="104" cy="52" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><circle id="cluster-heartbeat-rC2" cx="104" cy="52" r="5" fill="none" stroke="currentColor" stroke-width=".8" opacity="0"></circle><g id="cluster-heartbeat-nA"><circle cx="56" cy="52" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="56" cy="52" r="2" fill="currentColor"></circle></g><g id="cluster-heartbeat-nB"><circle cx="80" cy="34" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="80" cy="34" r="2" fill="currentColor"></circle></g><g id="cluster-heartbeat-nC"><circle cx="104" cy="52" r="4.5" fill="none" stroke="currentColor"></circle><circle cx="104" cy="52" r="2" fill="currentColor"></circle></g></svg>

animation.css

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

.pulsar-cluster-heartbeat #cluster-heartbeat-rA1,
.pulsar-cluster-heartbeat #cluster-heartbeat-rA2,
.pulsar-cluster-heartbeat #cluster-heartbeat-rB1,
.pulsar-cluster-heartbeat #cluster-heartbeat-rB2,
.pulsar-cluster-heartbeat #cluster-heartbeat-rC1,
.pulsar-cluster-heartbeat #cluster-heartbeat-rC2 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-heartbeat #cluster-heartbeat-nA circle:last-child,
.pulsar-cluster-heartbeat #cluster-heartbeat-nB circle:last-child,
.pulsar-cluster-heartbeat #cluster-heartbeat-nC circle:last-child {
  fill: var(--pulsar-accent, currentColor);
}

/* Node A pulse */
.pulsar-cluster-heartbeat #cluster-heartbeat-rA1 {
  transform-origin: 56px 52px;
  animation: cluster-heartbeat-wave 5400ms 0ms ease-out infinite;
}

.pulsar-cluster-heartbeat #cluster-heartbeat-rA2 {
  transform-origin: 56px 52px;
  animation: cluster-heartbeat-wave 5400ms 300ms ease-out infinite;
}

/* Node B pulse */
.pulsar-cluster-heartbeat #cluster-heartbeat-rB1 {
  transform-origin: 80px 34px;
  animation: cluster-heartbeat-wave 5400ms 1800ms ease-out infinite;
}

.pulsar-cluster-heartbeat #cluster-heartbeat-rB2 {
  transform-origin: 80px 34px;
  animation: cluster-heartbeat-wave 5400ms 2100ms ease-out infinite;
}

/* Node C pulse */
.pulsar-cluster-heartbeat #cluster-heartbeat-rC1 {
  transform-origin: 104px 52px;
  animation: cluster-heartbeat-wave 5400ms 3600ms ease-out infinite;
}

.pulsar-cluster-heartbeat #cluster-heartbeat-rC2 {
  transform-origin: 104px 52px;
  animation: cluster-heartbeat-wave 5400ms 3900ms ease-out infinite;
}

@keyframes cluster-heartbeat-wave {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  10% {
    opacity: 0.8;
  }
  35% {
    opacity: 0;
    transform: scale(3);
  }
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

.pulsar-cluster-heartbeat #cluster-heartbeat-nA {
  animation: cluster-heartbeat-node 5400ms 0ms ease-in-out infinite;
}

.pulsar-cluster-heartbeat #cluster-heartbeat-nB {
  animation: cluster-heartbeat-node 5400ms 1800ms ease-in-out infinite;
}

.pulsar-cluster-heartbeat #cluster-heartbeat-nC {
  animation: cluster-heartbeat-node 5400ms 3600ms ease-in-out infinite;
}

@keyframes cluster-heartbeat-node {
  0%,
  35%,
  100% {
    transform: scale(1);
  }
  8% {
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-cluster-heartbeat * {
    animation: none !important;
  }
  .pulsar-cluster-heartbeat #cluster-heartbeat-rA1,
  .pulsar-cluster-heartbeat #cluster-heartbeat-rB1,
  .pulsar-cluster-heartbeat #cluster-heartbeat-rC1 {
    opacity: 0.4;
    transform: scale(1.6);
  }
}

From this family15 in Cluster

See the family