Rollback

<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>

.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;
  }
}