Pulsar
Three empty cluster node templates assembling dashed wireframe chassis and provisioning solid compute cores

Cluster Node Provision

CSS

Dashed wireframe chassis bounds draw themselves around three empty node templates, which then ignite with solid compute cores and active status pips.

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

Companion assets

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

Animated
Three empty cluster node templates assembling dashed wireframe chassis and provisioning solid compute cores
CSS tier
Static vector
Cluster Node Provision, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="cluster-provision-title" class="pulsar pulsar-cluster-provision" data-pulsar="cluster-provision" role="img" viewBox="0 0 160 96"><title id="cluster-provision-title">Three empty cluster node templates assembling dashed wireframe chassis and provisioning solid compute cores</title><line x1="16" x2="144" y1="48" y2="48" fill="none" stroke="currentColor" stroke-dasharray="2 4" stroke-width=".5" opacity=".2"></line><rect id="cluster-provision-box1" width="32" height="40" x="24" y="28" fill="none" stroke="currentColor" stroke-dasharray="144" stroke-dashoffset="144" stroke-width=".8" rx="2"></rect><circle id="cluster-provision-core1" cx="40" cy="48" r="4.5" fill="currentColor" opacity="0"></circle><circle cx="40" cy="48" r="7" fill="none" stroke="currentColor" stroke-width=".6" opacity=".2"></circle><line x1="32" x2="48" y1="62" y2="62" fill="none" stroke="currentColor" stroke-width=".5" opacity=".25"></line><circle id="cluster-provision-led1" cx="40" cy="62" r="1.2" fill="currentColor" opacity="0"></circle><rect id="cluster-provision-box2" width="32" height="40" x="64" y="28" fill="none" stroke="currentColor" stroke-dasharray="144" stroke-dashoffset="144" stroke-width=".8" rx="2"></rect><circle id="cluster-provision-core2" cx="80" cy="48" r="4.5" fill="currentColor" opacity="0"></circle><circle cx="80" cy="48" r="7" fill="none" stroke="currentColor" stroke-width=".6" opacity=".2"></circle><line x1="72" x2="88" y1="62" y2="62" fill="none" stroke="currentColor" stroke-width=".5" opacity=".25"></line><circle id="cluster-provision-led2" cx="80" cy="62" r="1.2" fill="currentColor" opacity="0"></circle><rect id="cluster-provision-box3" width="32" height="40" x="104" y="28" fill="none" stroke="currentColor" stroke-dasharray="144" stroke-dashoffset="144" stroke-width=".8" rx="2"></rect><circle id="cluster-provision-core3" cx="120" cy="48" r="4.5" fill="currentColor" opacity="0"></circle><circle cx="120" cy="48" r="7" fill="none" stroke="currentColor" stroke-width=".6" opacity=".2"></circle><line x1="112" x2="128" y1="62" y2="62" fill="none" stroke="currentColor" stroke-width=".5" opacity=".25"></line><circle id="cluster-provision-led3" cx="120" cy="62" r="1.2" fill="currentColor" opacity="0"></circle></svg>

animation.css

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

.pulsar-cluster-provision #cluster-provision-box1,
.pulsar-cluster-provision #cluster-provision-box2,
.pulsar-cluster-provision #cluster-provision-box3 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-provision #cluster-provision-core1,
.pulsar-cluster-provision #cluster-provision-core2,
.pulsar-cluster-provision #cluster-provision-core3,
.pulsar-cluster-provision #cluster-provision-led1,
.pulsar-cluster-provision #cluster-provision-led2,
.pulsar-cluster-provision #cluster-provision-led3 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-cluster-provision #cluster-provision-box1 {
  animation: cluster-provision-draw 6000ms 0ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.pulsar-cluster-provision #cluster-provision-box2 {
  animation: cluster-provision-draw 6000ms 400ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.pulsar-cluster-provision #cluster-provision-box3 {
  animation: cluster-provision-draw 6000ms 800ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes cluster-provision-draw {
  0% {
    stroke-dashoffset: 144;
    opacity: 0.2;
  }
  30%,
  80% {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
  95%,
  100% {
    stroke-dashoffset: 144;
    opacity: 0.2;
  }
}

.pulsar-cluster-provision #cluster-provision-core1,
.pulsar-cluster-provision #cluster-provision-led1 {
  animation: cluster-provision-core-in 6000ms 1800ms ease-out infinite;
}
.pulsar-cluster-provision #cluster-provision-core2,
.pulsar-cluster-provision #cluster-provision-led2 {
  animation: cluster-provision-core-in 6000ms 2200ms ease-out infinite;
}
.pulsar-cluster-provision #cluster-provision-core3,
.pulsar-cluster-provision #cluster-provision-led3 {
  animation: cluster-provision-core-in 6000ms 2600ms ease-out infinite;
}

@keyframes cluster-provision-core-in {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  15%,
  70% {
    opacity: 1;
    transform: scale(1);
  }
  85%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-cluster-provision * {
    animation: none !important;
  }
  .pulsar-cluster-provision #cluster-provision-box1,
  .pulsar-cluster-provision #cluster-provision-box2,
  .pulsar-cluster-provision #cluster-provision-box3 {
    stroke-dashoffset: 0;
    opacity: 0.8;
  }
  .pulsar-cluster-provision #cluster-provision-core1,
  .pulsar-cluster-provision #cluster-provision-core2,
  .pulsar-cluster-provision #cluster-provision-core3,
  .pulsar-cluster-provision #cluster-provision-led1,
  .pulsar-cluster-provision #cluster-provision-led2,
  .pulsar-cluster-provision #cluster-provision-led3 {
    opacity: 1;
  }
}

From this family15 in Cluster

See the family