Pulsar
Confirm

Confirm

CSS

A first tick lands, pauses, and a second confirms it, the pair settling together.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation, Workflow and approvals
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
Confirm
CSS tier
Static vector
Confirm, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-confirm-title" class="pulsar pulsar-verdict-confirm" data-pulsar="verdict-confirm" role="img" viewBox="0 0 40 40"><title id="verdict-confirm-title">Confirm</title><path id="verdict-confirm-first" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 20 5 5 9-11"></path><path id="verdict-confirm-second" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m19 20 5 5 9-11"></path></svg>

animation.css

/* Accent: the second tick, the one that does the confirming. */
.pulsar-verdict-confirm #verdict-confirm-second {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-verdict-confirm #verdict-confirm-first,
.pulsar-verdict-confirm #verdict-confirm-second {
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  animation-duration: 4000ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-iteration-count: infinite;
}

/* First lands, pauses a full beat, then the second answers it. */
.pulsar-verdict-confirm #verdict-confirm-first {
  animation-name: verdict-confirm-first;
}

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

@keyframes verdict-confirm-first {
  0% {
    stroke-dashoffset: 23;
  }
  26%,
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 23;
  }
}

@keyframes verdict-confirm-second {
  0%,
  44% {
    stroke-dashoffset: 23;
  }
  70%,
  90% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 23;
  }
}

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

From this family15 in Verdict

See the family