Pulsar
Deployment release rollback cursor retreating along timeline track to restore previous stable checkpoint

Rollback

CSS

A deployment release cursor retreats backward along a segmented timeline upon alert, restoring the previous stable checkpoint.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Errors and warnings, 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
Deployment release rollback cursor retreating along timeline track to restore previous stable checkpoint
CSS tier
Static vector
Rollback, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="deploy-rollback-title" class="pulsar pulsar-deploy-rollback" data-pulsar="deploy-rollback" role="img" viewBox="0 0 160 96"><title id="deploy-rollback-title">Deployment release rollback cursor retreating along timeline track to restore previous stable checkpoint</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="deploy-rollback-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="deploy-rollback-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 id="deploy-rollback-track-stable" x1="40" x2="80" y1="48" y2="48"></line><line id="deploy-rollback-track-fault" x1="80" x2="120" y1="48" y2="48" stroke-dasharray="3 3"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.2" opacity=".7"><path d="M40 36v4"></path><path d="M80 34v6m-4 0h8"></path><path d="M120 34v6m-4 0h8"></path></g><circle id="deploy-rollback-node-0" cx="40" cy="48" r="3" fill="currentColor" opacity=".5"></circle><circle id="deploy-rollback-node-stable" cx="80" cy="48" r="4" fill="currentColor"></circle><circle id="deploy-rollback-ring-stable" cx="80" cy="48" r="8" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><circle id="deploy-rollback-node-fault" cx="120" cy="48" r="4" fill="none" stroke="currentColor" stroke-width="1.25"></circle><polygon id="deploy-rollback-warn-mark" fill="currentColor" points="120,24 123,30 117,30" opacity="0"></polygon><g id="deploy-rollback-cursor"><polygon fill="currentColor" points="120,44 124,48 120,52 116,48"></polygon><circle cx="120" cy="48" r="6" fill="none" stroke="currentColor"></circle></g></svg>

animation.css

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

.pulsar-deploy-rollback #deploy-rollback-node-stable,
.pulsar-deploy-rollback #deploy-rollback-warn-mark,
.pulsar-deploy-rollback #deploy-rollback-cursor polygon {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-rollback #deploy-rollback-ring-stable,
.pulsar-deploy-rollback #deploy-rollback-cursor circle {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-deploy-rollback #deploy-rollback-cursor {
  animation: deploy-rollback-rewind 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-rollback #deploy-rollback-track-fault {
  animation: deploy-rollback-fade-track 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-deploy-rollback #deploy-rollback-warn-mark {
  animation: deploy-rollback-alert 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 120px 27px;
}

.pulsar-deploy-rollback #deploy-rollback-ring-stable {
  animation: deploy-rollback-restore-pulse 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

.pulsar-deploy-rollback #deploy-rollback-node-stable {
  animation: deploy-rollback-lock-stable 4000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes deploy-rollback-rewind {
  0%,
  28% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-4px);
  }
  65%,
  88% {
    transform: translateX(-40px);
  }
  96%,
  100% {
    transform: translateX(0);
  }
}

@keyframes deploy-rollback-fade-track {
  0%,
  28% {
    opacity: 0.8;
    stroke: currentColor;
  }
  35% {
    stroke: var(--pulsar-accent, currentColor);
    opacity: 1;
  }
  60%,
  88% {
    opacity: 0.15;
    stroke: currentColor;
  }
  96%,
  100% {
    opacity: 0.8;
    stroke: currentColor;
  }
}

@keyframes deploy-rollback-alert {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.6);
  }
  28%,
  42% {
    opacity: 1;
    transform: scale(1.3);
  }
  50%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes deploy-rollback-restore-pulse {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.5);
  }
  68% {
    opacity: 0.9;
  }
  82% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes deploy-rollback-lock-stable {
  0%,
  60% {
    opacity: 0.5;
  }
  68%,
  88% {
    opacity: 1;
    transform: scale(1.2);
  }
  96%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-deploy-rollback * {
    animation: none !important;
    transform: none;
  }
  .pulsar-deploy-rollback #deploy-rollback-cursor {
    transform: translateX(-40px);
  }
  .pulsar-deploy-rollback #deploy-rollback-node-stable {
    opacity: 1;
  }
}

From this family15 in Deploy

See the family