Pulsar
Decline

Decline

CSS

Two strokes cross into a ring, the second arriving a beat after the first.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Notifications
Industries
SaaS and software, Cross-industry
Style
Bold line · regular stroke
Set
verdict
Tags
loopminimalui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Decline
CSS tier
Static vector
Decline, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-decline-title" class="pulsar pulsar-verdict-decline" data-pulsar="verdict-decline" role="img" viewBox="0 0 40 40"><title id="verdict-decline-title">Decline</title><path id="verdict-decline-ring" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 4a16 16 0 1 1 0 32 16 16 0 1 1 0-32"></path><path id="verdict-decline-first" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="m13 13 14 14"></path><path id="verdict-decline-second" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M27 13 13 27"></path></svg>

animation.css

/* Accent: the two strokes that make the refusal, against the ring holding them. */
.pulsar-verdict-decline #verdict-decline-first,
.pulsar-verdict-decline #verdict-decline-second {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-verdict-decline #verdict-decline-ring {
  stroke-dasharray: 101;
  stroke-dashoffset: 101;
  animation: verdict-decline-ring 4000ms linear infinite;
}

/*
  The first pass put both strokes inside a single beat, so the sampled
  frames jumped from an empty ring to a finished mark and the arrival
  nobody saw was the whole concept. Each stroke now owns a quarter of the
  cycle, which puts one mid-draw at 50% and the other mid-draw at 75%.
*/
.pulsar-verdict-decline #verdict-decline-first,
.pulsar-verdict-decline #verdict-decline-second {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation-duration: 4000ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite;
}

.pulsar-verdict-decline #verdict-decline-first {
  animation-name: verdict-decline-first;
}

.pulsar-verdict-decline #verdict-decline-second {
  animation-name: verdict-decline-second;
}

@keyframes verdict-decline-ring {
  0% {
    stroke-dashoffset: 101;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  28%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 101;
  }
}

@keyframes verdict-decline-first {
  0%,
  30% {
    stroke-dashoffset: 20;
  }
  56%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 20;
  }
}

@keyframes verdict-decline-second {
  0%,
  56% {
    stroke-dashoffset: 20;
  }
  82%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 20;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-decline #verdict-decline-ring,
  .pulsar-verdict-decline #verdict-decline-first,
  .pulsar-verdict-decline #verdict-decline-second {
    animation: none;
    stroke-dashoffset: 0;
  }
}

From this family15 in Verdict

See the family