Undo
CSSA completed mark unwinds along its own path back to an unmarked state.
- Tier
- CSS
- Dependencies
- None
- Duration
- 4 s, loops
- Categories
- Icons and micro-interactions
- Use cases
- Errors and warnings, 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.
Code
animation.svg
<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-undo-title" class="pulsar pulsar-verdict-undo" data-pulsar="verdict-undo" role="img" viewBox="0 0 40 40"><title id="verdict-undo-title">Undo</title><path id="verdict-undo-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" opacity=".25"></path><path id="verdict-undo-ghost" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m11 20 6 6 12-13" opacity=".2"></path><path id="verdict-undo-mark" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m11 20 6 6 12-13"></path></svg>
animation.css
/* Accent: the mark itself, against the path it retreats along. */
.pulsar-verdict-undo #verdict-undo-mark {
stroke: var(--pulsar-accent, currentColor);
}
/*
It unwinds the way it was drawn, back to front, and then redraws. The
faint path underneath stays put throughout, so the empty stretch of the
cycle still shows where the mark was rather than going blank.
*/
.pulsar-verdict-undo #verdict-undo-mark {
stroke-dasharray: 26;
animation: verdict-undo-unwind 4000ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes verdict-undo-unwind {
0%,
14% {
stroke-dashoffset: 0;
}
52%,
66% {
stroke-dashoffset: 26;
}
92%,
100% {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-verdict-undo #verdict-undo-mark {
animation: none;
stroke-dashoffset: 0;
}
}