Pulsar
Partial

Partial

CSS

A check draws only partway and holds, the unfinished stroke left visible.

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-partial-title" class="pulsar pulsar-verdict-partial" data-pulsar="verdict-partial" role="img" viewBox="0 0 40 40"><title id="verdict-partial-title">Partial</title><path id="verdict-partial-ghost" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m12 20 6 6 10-12" opacity=".2"></path><path id="verdict-partial-mark" 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 stroke that was actually made, against the full path it stops short of. */
.pulsar-verdict-partial #verdict-partial-mark {
  stroke: var(--pulsar-accent, currentColor);
}

/*
  The first pass completed the check by 100%, which contradicted the one
  thing the concept asks for. The offset now stops at 10 of 26 -- just past
  the elbow, partway up the long stroke -- and holds there from 32% to 88%,
  so three of the five sampled frames show the mark unfinished and so does
  the resting state. The faint full path behind it is what makes the gap
  legible as unfinished rather than as a short tick.
*/
.pulsar-verdict-partial #verdict-partial-mark {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: verdict-partial-hold 4000ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes verdict-partial-hold {
  0% {
    stroke-dashoffset: 26;
  }
  32%,
  88% {
    stroke-dashoffset: 10;
  }
  100% {
    stroke-dashoffset: 26;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-partial #verdict-partial-mark {
    animation: none;
    stroke-dashoffset: 10;
  }
}

From this family15 in Verdict

See the family