Pulsar
Infrastructure provisioning: wireframe cube assembles edge by edge with step labels illuminating in sequenceprovisioning infrastructureinit① network② compute③ storage④ services⑤ ready

Infrastructure Provisioning

CSS

A wireframe cube assembles edge-by-edge, vertex by vertex, while step labels illuminate in sequence representing network, compute, storage, and service layers being provisioned — culminating in a pulsing core node.

Tier
CSS
Dependencies
None
Duration
16.5 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
loopgeometricstaggerui

Companion assets

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

Animated
Infrastructure provisioning: wireframe cube assembles edge by edge with step labels illuminating in sequenceprovisioning infrastructureinit① network② compute③ storage④ services⑤ ready
CSS tier
Static vector
Infrastructure Provisioning, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-provision-title" class="pulsar pulsar-deploy-provision" data-pulsar="deploy-provision" role="img" viewBox="0 0 160 96"><title id="deploy-provision-title">Infrastructure provisioning: wireframe cube assembles edge by edge with step labels illuminating in sequence</title><g fill="currentColor" font-family="monospace"><text x="10" y="11" font-size="5" opacity=".55">provisioning infrastructure</text><text id="deploy-provision-phase" x="128" y="11" font-size="5" font-weight="700" opacity=".8">init</text></g><g id="deploy-provision-top" opacity="0"><g fill="none" stroke="currentColor" stroke-linecap="round"><line x1="80" x2="52" y1="18" y2="33"></line><line x1="80" x2="108" y1="18" y2="33"></line><line x1="52" x2="80" y1="33" y2="48"></line><line x1="108" x2="80" y1="33" y2="48"></line></g><g fill="currentColor"><circle cx="80" cy="18" r="1.5"></circle><circle cx="52" cy="33" r="1.5"></circle><circle cx="108" cy="33" r="1.5"></circle></g></g><g id="deploy-provision-mid" opacity="0"><g fill="none" stroke="currentColor" stroke-linecap="round"><line x1="52" x2="52" y1="33" y2="63"></line><line x1="80" x2="80" y1="48" y2="78"></line><line x1="108" x2="108" y1="33" y2="63"></line></g><circle cx="80" cy="48" r="1.5" fill="currentColor"></circle></g><g id="deploy-provision-base" opacity="0"><g fill="none" stroke="currentColor" stroke-linecap="round"><line x1="52" x2="80" y1="63" y2="78"></line><line x1="80" x2="108" y1="78" y2="63"></line></g><g fill="currentColor"><circle cx="52" cy="63" r="1.5"></circle><circle cx="108" cy="63" r="1.5"></circle><circle cx="80" cy="78" r="1.5"></circle></g></g><circle id="deploy-provision-core" cx="80" cy="48" r="4" fill="currentColor" opacity="0"></circle><circle id="deploy-provision-ring" cx="80" cy="48" r="4" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><g fill="currentColor" font-family="monospace" font-size="4" opacity=".35"><text id="deploy-provision-s1" x="120" y="30">① network</text><text id="deploy-provision-s2" x="120" y="40">② compute</text><text id="deploy-provision-s3" x="120" y="50">③ storage</text><text id="deploy-provision-s4" x="120" y="60">④ services</text><text id="deploy-provision-s5" x="120" y="70">⑤ ready</text></g></svg>

animation.css

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

.pulsar-deploy-provision #deploy-provision-top,
.pulsar-deploy-provision #deploy-provision-mid,
.pulsar-deploy-provision #deploy-provision-base,
.pulsar-deploy-provision #deploy-provision-core {
  color: var(--pulsar-accent, currentColor);
}

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

.pulsar-deploy-provision #deploy-provision-phase,
.pulsar-deploy-provision #deploy-provision-s1,
.pulsar-deploy-provision #deploy-provision-s2,
.pulsar-deploy-provision #deploy-provision-s3,
.pulsar-deploy-provision #deploy-provision-s4,
.pulsar-deploy-provision #deploy-provision-s5 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-provision #deploy-provision-top {
  animation: deploy-provision-stage 10000ms 1000ms ease-out infinite;
}

.pulsar-deploy-provision #deploy-provision-mid {
  animation: deploy-provision-stage 10000ms 2500ms ease-out infinite;
}

.pulsar-deploy-provision #deploy-provision-base {
  animation: deploy-provision-stage 10000ms 4000ms ease-out infinite;
}

@keyframes deploy-provision-stage {
  0%,
  85%,
  100% {
    opacity: 0;
  }
  3%,
  75% {
    opacity: 0.9;
  }
}

.pulsar-deploy-provision #deploy-provision-core {
  animation: deploy-provision-cp 10000ms 5500ms ease-in-out infinite;
}

@keyframes deploy-provision-cp {
  0%,
  90%,
  100% {
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  20% {
    opacity: 0.3;
  }
  75% {
    opacity: 0.1;
  }
}

.pulsar-deploy-provision #deploy-provision-ring {
  animation: deploy-provision-rx 10000ms 5500ms ease-out infinite;
}

@keyframes deploy-provision-rx {
  0%,
  30%,
  100% {
    opacity: 0;
    r: 4;
  }
  5% {
    opacity: 0.8;
    r: 10;
  }
}

.pulsar-deploy-provision #deploy-provision-s1 {
  animation: deploy-provision-step 10000ms 1000ms ease-out infinite;
}
.pulsar-deploy-provision #deploy-provision-s2 {
  animation: deploy-provision-step 10000ms 2500ms ease-out infinite;
}
.pulsar-deploy-provision #deploy-provision-s3 {
  animation: deploy-provision-step 10000ms 4000ms ease-out infinite;
}
.pulsar-deploy-provision #deploy-provision-s4 {
  animation: deploy-provision-step 10000ms 5500ms ease-out infinite;
}
.pulsar-deploy-provision #deploy-provision-s5 {
  animation: deploy-provision-step 10000ms 6500ms ease-out infinite;
}

@keyframes deploy-provision-step {
  0%,
  85%,
  100% {
    opacity: 0.35;
  }
  3%,
  35% {
    opacity: 1;
  }
  65% {
    opacity: 0.5;
  }
}

.pulsar-deploy-provision #deploy-provision-phase {
  animation: deploy-provision-ph 10000ms ease-in-out infinite;
}

@keyframes deploy-provision-ph {
  0%,
  90%,
  100% {
    opacity: 0.5;
  }
  10%,
  65% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-provision * {
    animation: none !important;
  }
  .pulsar-deploy-provision #deploy-provision-top,
  .pulsar-deploy-provision #deploy-provision-mid,
  .pulsar-deploy-provision #deploy-provision-base {
    opacity: 0.9;
  }
  .pulsar-deploy-provision #deploy-provision-core {
    opacity: 0.5;
  }
  .pulsar-deploy-provision #deploy-provision-s1,
  .pulsar-deploy-provision #deploy-provision-s2,
  .pulsar-deploy-provision #deploy-provision-s3,
  .pulsar-deploy-provision #deploy-provision-s4,
  .pulsar-deploy-provision #deploy-provision-s5 {
    opacity: 1;
  }
}

From this family15 in Deploy

See the family