Pulsar
Progressive traffic shift dividing and shifting connection density between deployment versions

Traffic Shift

CSS

A main trunk line splits into two branches with animated pulses shifting traffic density from legacy to modern deployment targets.

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
Progressive traffic shift dividing and shifting connection density between deployment versions
CSS tier
Static vector
Traffic Shift, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-traffic-shift-title" class="pulsar pulsar-deploy-traffic-shift" data-pulsar="deploy-traffic-shift" role="img" viewBox="0 0 160 96"><title id="deploy-traffic-shift-title">Progressive traffic shift dividing and shifting connection density between deployment versions</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-traffic-shift-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-traffic-shift-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.25"><line x1="24" x2="56" y1="48" y2="48" opacity=".4"></line><path id="deploy-traffic-shift-rail-a" d="M56 48c12 0 16-16 28-16h44" opacity=".3"></path><path id="deploy-traffic-shift-rail-b" d="M56 48c12 0 16 16 28 16h44" opacity=".3"></path></g><circle id="deploy-traffic-shift-junction" cx="56" cy="48" r="3" fill="currentColor"></circle><path id="deploy-traffic-shift-flow-a" fill="none" stroke="currentColor" stroke-dasharray="10 14" stroke-width="1.5" d="M56 48c12 0 16-16 28-16h44"></path><path id="deploy-traffic-shift-flow-b" fill="none" stroke="currentColor" stroke-dasharray="8 12" stroke-width="1.75" d="M56 48c12 0 16 16 28 16h44"></path><circle id="deploy-traffic-shift-node-a" cx="128" cy="32" r="3" fill="currentColor"></circle><circle id="deploy-traffic-shift-node-b" cx="128" cy="64" r="3" fill="currentColor"></circle><circle id="deploy-traffic-shift-pulse-b" cx="128" cy="64" r="7" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

animation.css

.pulsar-deploy-traffic-shift {
  --pulsar-accent: currentColor;
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-junction,
.pulsar-deploy-traffic-shift #deploy-traffic-shift-node-b {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-flow-b,
.pulsar-deploy-traffic-shift #deploy-traffic-shift-pulse-b {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-flow-a {
  animation: deploy-traffic-shift-a 4000ms linear infinite;
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-flow-b {
  animation: deploy-traffic-shift-b 4000ms linear infinite;
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-node-a {
  animation: deploy-traffic-shift-na 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-node-b {
  animation: deploy-traffic-shift-nb 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 128px 64px;
}

.pulsar-deploy-traffic-shift #deploy-traffic-shift-pulse-b {
  animation: deploy-traffic-shift-ring-b 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 128px 64px;
}

@keyframes deploy-traffic-shift-a {
  0% {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
  30% {
    opacity: 0.9;
  }
  65%,
  92% {
    opacity: 0.15;
  }
  98%,
  100% {
    stroke-dashoffset: -72;
    opacity: 0.9;
  }
}

@keyframes deploy-traffic-shift-b {
  0%,
  25% {
    opacity: 0.1;
    stroke-dashoffset: 0;
  }
  45% {
    opacity: 0.6;
  }
  65%,
  92% {
    opacity: 1;
  }
  98%,
  100% {
    stroke-dashoffset: -80;
    opacity: 0.1;
  }
}

@keyframes deploy-traffic-shift-na {
  0%,
  35% {
    opacity: 0.9;
  }
  65%,
  92% {
    opacity: 0.3;
  }
  98%,
  100% {
    opacity: 0.9;
  }
}

@keyframes deploy-traffic-shift-nb {
  0%,
  35% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  65%,
  92% {
    opacity: 1;
    transform: scale(1.3);
  }
  98%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
}

@keyframes deploy-traffic-shift-ring-b {
  0%,
  65% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    opacity: 0.9;
  }
  84% {
    opacity: 0;
    transform: scale(2.4);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-traffic-shift * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-traffic-shift #deploy-traffic-shift-flow-b {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  .pulsar-deploy-traffic-shift #deploy-traffic-shift-node-b {
    opacity: 1;
  }
}

From this family15 in Deploy

See the family