Pulsar
Cluster replica matrix rolling update across nodes with verified checkmark status indicators

Cluster

CSS

A central grid of nine square nodes updates column by column with fading checkmark indicators during a rolling rollout.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Determinate progress, Dashboards and reporting
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
Cluster replica matrix rolling update across nodes with verified checkmark status indicators
CSS tier
Static vector
Cluster, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-cluster-title" class="pulsar pulsar-deploy-cluster" data-pulsar="deploy-cluster" role="img" viewBox="0 0 160 96"><title id="deploy-cluster-title">Cluster replica matrix rolling update across nodes with verified checkmark status indicators</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-cluster-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-cluster-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" opacity=".35"><line x1="50" x2="110" y1="32" y2="32"></line><line x1="50" x2="110" y1="48" y2="48"></line><line x1="50" x2="110" y1="64" y2="64"></line><line x1="50" x2="50" y1="32" y2="64"></line><line x1="80" x2="80" y1="32" y2="64"></line><line x1="110" x2="110" y1="32" y2="64"></line></g><g id="deploy-cluster-col-1"><g id="deploy-cluster-n-11"><rect width="14" height="14" x="43" y="25" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m47 32 2 2 4-4"></path></g><g id="deploy-cluster-n-12"><rect width="14" height="14" x="43" y="41" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m47 48 2 2 4-4"></path></g><g id="deploy-cluster-n-13"><rect width="14" height="14" x="43" y="57" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m47 64 2 2 4-4"></path></g></g><g id="deploy-cluster-col-2"><g id="deploy-cluster-n-21"><rect width="14" height="14" x="73" y="25" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m77 32 2 2 4-4"></path></g><g id="deploy-cluster-n-22"><rect width="14" height="14" x="73" y="41" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m77 48 2 2 4-4"></path></g><g id="deploy-cluster-n-23"><rect width="14" height="14" x="73" y="57" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m77 64 2 2 4-4"></path></g></g><g id="deploy-cluster-col-3"><g id="deploy-cluster-n-31"><rect width="14" height="14" x="103" y="25" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m107 32 2 2 4-4"></path></g><g id="deploy-cluster-n-32"><rect width="14" height="14" x="103" y="41" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m107 48 2 2 4-4"></path></g><g id="deploy-cluster-n-33"><rect width="14" height="14" x="103" y="57" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" d="m107 64 2 2 4-4"></path></g></g><circle id="deploy-cluster-beacon" cx="80" cy="18" r="2" fill="currentColor"></circle><circle id="deploy-cluster-pulse-ring" cx="80" cy="18" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

animation.css

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

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

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

.pulsar-deploy-cluster #deploy-cluster-col-1 path,
.pulsar-deploy-cluster #deploy-cluster-col-1 rect {
  animation: deploy-cluster-c1 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-cluster #deploy-cluster-col-2 path,
.pulsar-deploy-cluster #deploy-cluster-col-2 rect {
  animation: deploy-cluster-c2 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-cluster #deploy-cluster-col-3 path,
.pulsar-deploy-cluster #deploy-cluster-col-3 rect {
  animation: deploy-cluster-c3 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-cluster #deploy-cluster-pulse-ring {
  animation: deploy-cluster-top-pulse 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 18px;
}

@keyframes deploy-cluster-c1 {
  0%,
  10% {
    stroke: currentColor;
    opacity: 0.4;
  }
  20%,
  90% {
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-cluster-c2 {
  0%,
  30% {
    stroke: currentColor;
    opacity: 0.4;
  }
  42%,
  90% {
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-cluster-c3 {
  0%,
  52% {
    stroke: currentColor;
    opacity: 0.4;
  }
  64%,
  90% {
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-cluster-top-pulse {
  0%,
  70% {
    opacity: 0;
    transform: scale(0.5);
  }
  75% {
    opacity: 0.9;
  }
  88%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-cluster * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-cluster #deploy-cluster-col-1 path,
  .pulsar-deploy-cluster #deploy-cluster-col-2 path,
  .pulsar-deploy-cluster #deploy-cluster-col-3 path {
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
}

From this family15 in Deploy

See the family