Pulsar
Liveness-probe telemetry scanning three service instances with ECG spikes and replica countersliveness-probeinterval: 10ssvc/apiinstance-0instance-1instance-2OKOKOK1/11/11/1

Deployment Heartbeat

CSS

Liveness-probe telemetry scanning three service instances: probe dots traverse a shared baseline, an ECG spike confirms each poll, and per-card readouts show replica counts and probe intervals.

Tier
CSS
Dependencies
None
Duration
6.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Loading and waiting, Dashboards and reporting
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
deploy
Tags
looppulselineui

Companion assets

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

Animated
Liveness-probe telemetry scanning three service instances with ECG spikes and replica countersliveness-probeinterval: 10ssvc/apiinstance-0instance-1instance-2OKOKOK1/11/11/1
CSS tier
Static vector
Deployment Heartbeat, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-heartbeat-title" class="pulsar pulsar-deploy-heartbeat" data-pulsar="deploy-heartbeat" role="img" viewBox="0 0 160 96"><title id="deploy-heartbeat-title">Liveness-probe telemetry scanning three service instances with ECG spikes and replica counters</title><g fill="currentColor" font-family="monospace" font-size="4.5" opacity=".45"><text x="12" y="12">liveness-probe</text><text x="12" y="18" opacity=".35">interval: 10s</text><text id="deploy-heartbeat-svc" x="106" y="12">svc/api</text></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><line x1="12" x2="148" y1="20" y2="20"></line><line x1="12" x2="148" y1="36" y2="36"></line><line x1="12" x2="148" y1="52" y2="52"></line></g><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><rect width="40" height="28" x="10" y="59" rx="2"></rect><rect width="40" height="28" x="60" y="59" rx="2"></rect><rect width="40" height="28" x="110" y="59" rx="2"></rect></g><g fill="currentColor" font-family="monospace" font-size="4" opacity=".4"><text x="14" y="67">instance-0</text><text x="64" y="67">instance-1</text><text x="114" y="67">instance-2</text></g><line id="deploy-heartbeat-base" x1="16" x2="148" y1="36" y2="36" fill="none" stroke="currentColor" stroke-width=".5" opacity=".35"></line><g id="deploy-heartbeat-sig0" opacity="0"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" points="16,36 28,36 30,28 32,44 34,36 50,36"></polyline><circle cx="50" cy="36" r="2" fill="currentColor"></circle><text x="28" y="25" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">OK</text></g><g id="deploy-heartbeat-sig1" opacity="0"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" points="66,36 78,36 80,28 82,44 84,36 100,36"></polyline><circle cx="100" cy="36" r="2" fill="currentColor"></circle><text x="78" y="25" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">OK</text></g><g id="deploy-heartbeat-sig2" opacity="0"><polyline fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2" points="116,36 128,36 130,28 132,44 134,36 148,36"></polyline><circle cx="148" cy="36" r="2" fill="currentColor"></circle><text x="128" y="25" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">OK</text></g><g id="deploy-heartbeat-card0" opacity=".3"><rect width="24" height="3" x="13" y="70" fill="currentColor" opacity=".2" rx=".8"></rect><circle cx="38" cy="78" r="2.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><text x="14" y="83" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">1/1</text></g><g id="deploy-heartbeat-card1" opacity=".3"><rect width="24" height="3" x="63" y="70" fill="currentColor" opacity=".2" rx=".8"></rect><circle cx="88" cy="78" r="2.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><text x="64" y="83" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">1/1</text></g><g id="deploy-heartbeat-card2" opacity=".3"><rect width="24" height="3" x="113" y="70" fill="currentColor" opacity=".2" rx=".8"></rect><circle cx="138" cy="78" r="2.5" fill="none" stroke="currentColor" stroke-width=".8"></circle><text x="114" y="83" fill="currentColor" font-family="monospace" font-size="6" font-weight="700">1/1</text></g></svg>

animation.css

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

.pulsar-deploy-heartbeat #deploy-heartbeat-svc,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig0,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig1,
.pulsar-deploy-heartbeat #deploy-heartbeat-sig2,
.pulsar-deploy-heartbeat #deploy-heartbeat-card0,
.pulsar-deploy-heartbeat #deploy-heartbeat-card1,
.pulsar-deploy-heartbeat #deploy-heartbeat-card2 {
  color: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-heartbeat #deploy-heartbeat-svc {
  fill: var(--pulsar-accent, currentColor);
  animation: deploy-heartbeat-svc 4000ms ease-in-out infinite;
}

@keyframes deploy-heartbeat-svc {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

.pulsar-deploy-heartbeat #deploy-heartbeat-sig0 {
  animation: deploy-heartbeat-sig 4000ms 400ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-sig1 {
  animation: deploy-heartbeat-sig 4000ms 1400ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-sig2 {
  animation: deploy-heartbeat-sig 4000ms 2400ms ease-out infinite;
}

@keyframes deploy-heartbeat-sig {
  0%,
  75%,
  100% {
    opacity: 0;
  }
  5%,
  50% {
    opacity: 1;
  }
}

.pulsar-deploy-heartbeat #deploy-heartbeat-card0 {
  animation: deploy-heartbeat-card 4000ms 600ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-card1 {
  animation: deploy-heartbeat-card 4000ms 1600ms ease-out infinite;
}
.pulsar-deploy-heartbeat #deploy-heartbeat-card2 {
  animation: deploy-heartbeat-card 4000ms 2600ms ease-out infinite;
}

@keyframes deploy-heartbeat-card {
  0%,
  70%,
  100% {
    opacity: 0.3;
  }
  10%,
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-heartbeat * {
    animation: none !important;
  }
  .pulsar-deploy-heartbeat #deploy-heartbeat-sig0,
  .pulsar-deploy-heartbeat #deploy-heartbeat-sig1,
  .pulsar-deploy-heartbeat #deploy-heartbeat-sig2,
  .pulsar-deploy-heartbeat #deploy-heartbeat-card0,
  .pulsar-deploy-heartbeat #deploy-heartbeat-card1,
  .pulsar-deploy-heartbeat #deploy-heartbeat-card2 {
    opacity: 1;
  }
}

From this family15 in Deploy

See the family