Pulsar
Blue-green deployment router alternating active traffic between primary and secondary infrastructure stacks

Blue-Green Switch

CSS

Two identical infrastructure stacks fade and alternate traffic as an articulated deployment router pivots between blue and green environments.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Workflow and approvals, Automation and rules
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
Blue-green deployment router alternating active traffic between primary and secondary infrastructure stacks
CSS tier
Static vector
Blue-Green Switch, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-blue-green-title" class="pulsar pulsar-deploy-blue-green" data-pulsar="deploy-blue-green" role="img" viewBox="0 0 160 96"><title id="deploy-blue-green-title">Blue-green deployment router alternating active traffic between primary and secondary infrastructure stacks</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-blue-green-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-blue-green-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="40" y1="48" y2="48" opacity=".4"></line><path id="deploy-blue-green-rail-blue" d="m48 48 16-14h24" opacity=".3"></path><path id="deploy-blue-green-rail-green" d="m48 48 16 14h24" opacity=".3"></path></g><circle id="deploy-blue-green-router-ring" cx="44" cy="48" r="6" fill="none" stroke="currentColor" stroke-width="1.25"></circle><circle id="deploy-blue-green-router-core" cx="44" cy="48" r="2.5" fill="currentColor"></circle><line id="deploy-blue-green-switch-blade" x1="44" x2="54" y1="48" y2="40" stroke="currentColor" stroke-width="1.5"></line><path id="deploy-blue-green-flow-blue" fill="none" stroke="currentColor" stroke-dasharray="8 12" stroke-width="1.5" d="m48 48 16-14h24"></path><path id="deploy-blue-green-flow-green" fill="none" stroke="currentColor" stroke-dasharray="8 12" stroke-width="1.5" d="m48 48 16 14h24"></path><g id="deploy-blue-green-stack-blue"><rect width="32" height="6" x="92" y="24" fill="currentColor" rx="1"></rect><rect width="32" height="6" x="92" y="32" fill="currentColor" rx="1"></rect><rect width="32" height="6" x="92" y="40" fill="currentColor" rx="1"></rect><circle id="deploy-blue-green-beacon-blue" cx="128" cy="34" r="2" fill="currentColor"></circle><circle id="deploy-blue-green-ring-blue" cx="128" cy="34" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></g><g id="deploy-blue-green-stack-green"><rect width="32" height="6" x="92" y="52" fill="currentColor" rx="1"></rect><rect width="32" height="6" x="92" y="60" fill="currentColor" rx="1"></rect><rect width="32" height="6" x="92" y="68" fill="currentColor" rx="1"></rect><circle id="deploy-blue-green-beacon-green" cx="128" cy="62" r="2" fill="currentColor"></circle><circle id="deploy-blue-green-ring-green" cx="128" cy="62" r="5" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></g></svg>

animation.css

.pulsar-deploy-blue-green {
  --pulsar-accent: currentColor;
}

.pulsar-deploy-blue-green #deploy-blue-green-router-core,
.pulsar-deploy-blue-green #deploy-blue-green-beacon-blue,
.pulsar-deploy-blue-green #deploy-blue-green-beacon-green {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-blue-green #deploy-blue-green-switch-blade,
.pulsar-deploy-blue-green #deploy-blue-green-ring-blue,
.pulsar-deploy-blue-green #deploy-blue-green-ring-green {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-blue-green #deploy-blue-green-switch-blade {
  animation: deploy-blue-green-blade 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 44px 48px;
}

.pulsar-deploy-blue-green #deploy-blue-green-flow-blue {
  stroke: var(--pulsar-accent, currentColor);
  animation: deploy-blue-green-stream-blue 4000ms linear infinite;
}

.pulsar-deploy-blue-green #deploy-blue-green-flow-green {
  stroke: var(--pulsar-accent, currentColor);
  animation: deploy-blue-green-stream-green 4000ms linear infinite;
}

.pulsar-deploy-blue-green #deploy-blue-green-stack-blue rect {
  animation: deploy-blue-green-bars-blue 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-blue-green #deploy-blue-green-stack-green rect {
  animation: deploy-blue-green-bars-green 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-blue-green #deploy-blue-green-ring-blue {
  animation: deploy-blue-green-pulse-blue 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 128px 34px;
}

.pulsar-deploy-blue-green #deploy-blue-green-ring-green {
  animation: deploy-blue-green-pulse-green 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 128px 62px;
}

@keyframes deploy-blue-green-blade {
  0%,
  42% {
    transform: rotate(0deg);
  }
  50%,
  92% {
    transform: rotate(32deg);
  }
  98%,
  100% {
    transform: rotate(0deg);
  }
}

@keyframes deploy-blue-green-stream-blue {
  0% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  42% {
    opacity: 1;
  }
  48%,
  95% {
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -80;
    opacity: 1;
  }
}

@keyframes deploy-blue-green-stream-green {
  0%,
  46% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
  52% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  98%,
  100% {
    stroke-dashoffset: -80;
    opacity: 0;
  }
}

@keyframes deploy-blue-green-bars-blue {
  0%,
  42% {
    fill: var(--pulsar-accent, currentColor);
    opacity: 0.9;
  }
  50%,
  92% {
    fill: currentColor;
    opacity: 0.3;
  }
  98%,
  100% {
    fill: var(--pulsar-accent, currentColor);
    opacity: 0.9;
  }
}

@keyframes deploy-blue-green-bars-green {
  0%,
  42% {
    fill: currentColor;
    opacity: 0.3;
  }
  50%,
  92% {
    fill: var(--pulsar-accent, currentColor);
    opacity: 0.9;
  }
  98%,
  100% {
    fill: currentColor;
    opacity: 0.3;
  }
}

@keyframes deploy-blue-green-pulse-blue {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.6);
  }
  16% {
    opacity: 0.85;
  }
  30% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes deploy-blue-green-pulse-green {
  0%,
  54% {
    opacity: 0;
    transform: scale(0.6);
  }
  60% {
    opacity: 0.85;
  }
  74% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-blue-green * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-blue-green #deploy-blue-green-stack-blue rect,
  .pulsar-deploy-blue-green #deploy-blue-green-stack-green rect {
    fill: var(--pulsar-accent, currentColor);
    opacity: 0.7;
  }
}

From this family15 in Deploy

See the family