Pulsar
Verified

Verified

CSS

A check gains a scalloped badge ring that draws around it and locks.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation, Compliance and audit
Industries
SaaS and software, Finance and fintech
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
Verified
CSS tier
Static vector
Verified, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-verified-title" class="pulsar pulsar-verdict-verified" data-pulsar="verdict-verified" role="img" viewBox="0 0 40 40"><title id="verdict-verified-title">Verified</title><path id="verdict-verified-badge" fill="none" stroke="currentColor" stroke-dasharray="6.4 2" 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-verified-check" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m12 20 6 6 10-12"></path></svg>

animation.css

/* Accent: the check, against the badge that certifies it. */
.pulsar-verdict-verified #verdict-verified-check {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-verdict-verified #verdict-verified-check {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: verdict-verified-check 4000ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes verdict-verified-check {
  0% {
    stroke-dashoffset: 26;
  }
  22%,
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 26;
  }
}

/*
  The scallop is the dash pattern on the ring: 6.4 on, 2 off, twelve times
  around a circumference of 101. Rotating the pattern round and settling it
  is the "lock" -- the ring arrives, then stops on the beat.
*/
.pulsar-verdict-verified #verdict-verified-badge {
  transform-box: view-box;
  transform-origin: 20px 20px;
  animation: verdict-verified-badge 4000ms infinite;
}

@keyframes verdict-verified-badge {
  0%,
  26% {
    transform: rotate(-120deg) scale(0.6);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  56% {
    transform: rotate(6deg) scale(1.04);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  68%,
  90% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(-120deg) scale(0.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-verified #verdict-verified-check {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pulsar-verdict-verified #verdict-verified-badge {
    animation: none;
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

From this family15 in Verdict

See the family