Pulsar
Linear continuous deployment pipeline advancing through build, test, stage, and production stages

Pipeline

CSS

A linear sequence of four nodes lighting up sequentially as a pulse flows through them, foregrounding data readouts.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Determinate progress, Workflow and approvals
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
Linear continuous deployment pipeline advancing through build, test, stage, and production stages
CSS tier
Static vector
Pipeline, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-pipeline-title" class="pulsar pulsar-deploy-pipeline" data-pulsar="deploy-pipeline" role="img" viewBox="0 0 160 96"><title id="deploy-pipeline-title">Linear continuous deployment pipeline advancing through build, test, stage, and production stages</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-pipeline-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-pipeline-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.2"><path id="deploy-pipeline-tag-1" d="M35 34v4"></path><path id="deploy-pipeline-tag-2" d="M63 34v4m4-4v4"></path><path id="deploy-pipeline-tag-3" d="M91 34v4m4-4v4m4-4v4"></path><polygon id="deploy-pipeline-tag-4" fill="currentColor" points="125,32 128,36 125,40 122,36"></polygon></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="deploy-pipeline-track-1" x1="40" x2="60" y1="48" y2="48"></line><line id="deploy-pipeline-track-2" x1="70" x2="90" y1="48" y2="48"></line><line id="deploy-pipeline-track-3" x1="100" x2="120" y1="48" y2="48"></line></g><line id="deploy-pipeline-progress" x1="35" x2="125" y1="48" y2="48" fill="none" stroke="currentColor" stroke-dasharray="90" stroke-dashoffset="90" stroke-width="1.75"></line><circle id="deploy-pipeline-ring-1" cx="35" cy="48" r="5" fill="none" stroke="currentColor" stroke-width="1.25"></circle><circle id="deploy-pipeline-core-1" cx="35" cy="48" r="2" fill="currentColor"></circle><circle id="deploy-pipeline-ring-2" cx="65" cy="48" r="5" fill="none" stroke="currentColor" stroke-width="1.25"></circle><circle id="deploy-pipeline-core-2" cx="65" cy="48" r="2" fill="currentColor"></circle><circle id="deploy-pipeline-ring-3" cx="95" cy="48" r="5" fill="none" stroke="currentColor" stroke-width="1.25"></circle><circle id="deploy-pipeline-core-3" cx="95" cy="48" r="2" fill="currentColor"></circle><circle id="deploy-pipeline-ring-4" cx="125" cy="48" r="5" fill="none" stroke="currentColor" stroke-width="1.25"></circle><circle id="deploy-pipeline-core-4" cx="125" cy="48" r="2" fill="currentColor"></circle><circle id="deploy-pipeline-pulse-4" cx="125" cy="48" r="9" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

animation.css

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

.pulsar-deploy-pipeline #deploy-pipeline-progress,
.pulsar-deploy-pipeline #deploy-pipeline-pulse-4 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-pipeline #deploy-pipeline-tag-4 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-pipeline #deploy-pipeline-tag-1,
.pulsar-deploy-pipeline #deploy-pipeline-tag-2,
.pulsar-deploy-pipeline #deploy-pipeline-tag-3 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-pipeline #deploy-pipeline-progress {
  animation: deploy-pipeline-flow 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-pipeline #deploy-pipeline-core-1,
.pulsar-deploy-pipeline #deploy-pipeline-ring-1 {
  animation: deploy-pipeline-s1 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-pipeline #deploy-pipeline-core-2,
.pulsar-deploy-pipeline #deploy-pipeline-ring-2 {
  animation: deploy-pipeline-s2 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-pipeline #deploy-pipeline-core-3,
.pulsar-deploy-pipeline #deploy-pipeline-ring-3 {
  animation: deploy-pipeline-s3 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-pipeline #deploy-pipeline-core-4,
.pulsar-deploy-pipeline #deploy-pipeline-ring-4 {
  animation: deploy-pipeline-s4 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-pipeline #deploy-pipeline-pulse-4 {
  animation: deploy-pipeline-pulse 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 125px 48px;
}

@keyframes deploy-pipeline-flow {
  0%,
  12% {
    stroke-dashoffset: 90;
    opacity: 0.4;
  }
  35% {
    stroke-dashoffset: 60;
    opacity: 1;
  }
  60% {
    stroke-dashoffset: 30;
    opacity: 1;
  }
  80%,
  90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0.2;
  }
}

@keyframes deploy-pipeline-s1 {
  0%,
  92% {
    fill: var(--pulsar-accent, currentColor);
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-pipeline-s2 {
  0%,
  28% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
  35%,
  92% {
    fill: var(--pulsar-accent, currentColor);
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-pipeline-s3 {
  0%,
  53% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
  60%,
  92% {
    fill: var(--pulsar-accent, currentColor);
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-pipeline-s4 {
  0%,
  75% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
  82%,
  92% {
    fill: var(--pulsar-accent, currentColor);
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  96%,
  100% {
    fill: currentColor;
    stroke: currentColor;
    opacity: 0.4;
  }
}

@keyframes deploy-pipeline-pulse {
  0%,
  80% {
    opacity: 0;
    transform: scale(0.5);
  }
  84% {
    opacity: 0.9;
  }
  94%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-pipeline * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-pipeline #deploy-pipeline-progress {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .pulsar-deploy-pipeline #deploy-pipeline-core-1,
  .pulsar-deploy-pipeline #deploy-pipeline-core-2,
  .pulsar-deploy-pipeline #deploy-pipeline-core-3,
  .pulsar-deploy-pipeline #deploy-pipeline-core-4 {
    fill: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
}

From this family15 in Deploy

See the family