Animated Success Checkmark — SVG Draw HTML CSS

The animated green checkmark that draws itself after a successful payment, signup, or save is a tiny moment of delight that makes a confirmation feel earned rather than abrupt. This snippet builds that effect with pure SVG and CSS — no library, no images — using the classic stroke-dash drawing technique, plus a soft pulse ring and staggered text reveal, wrapped in a confirmation card with a replay button.

How the draw-on effect works

The checkmark is a single SVG with two shapes: a <circle> and a <path> for the tick. Both are animated with the stroke-dasharray / stroke-dashoffset technique — the foundation of every "self-drawing" SVG. stroke-dasharray is set to the shape's total length (151 for the circle's circumference, ~40 for the tick path), which turns the stroke into a single dash exactly as long as the line. stroke-dashoffset starts equal to that length, pushing the entire dash out of view, and animates to zero — which slides the dash into place, making the line appear to draw itself from start to end. The circle draws first; the tick starts at a 0.5s delay so it lands *after* the circle completes, reading as "outline, then confirm."

Easing that feels physical

Both animations use cubic-bezier(.65,0,.45,1) — a smooth ease that accelerates into the draw and settles at the end, which feels more deliberate than a linear sweep. The tick uses stroke-linecap: round and stroke-linejoin: round so the drawn line has soft ends, matching the rounded aesthetic of modern confirmation UIs.

The pulse ring and text stagger

When the tick lands, a faint green ring scales up and fades out once (ascPulse), giving the checkmark a subtle "pop" of emphasis at exactly the moment of completion. The heading and description fade and rise in just after (ascText at 0.5s and 0.62s delays), so the eye follows the sequence: circle draws → tick draws → ring pulses → text appears. This choreography is what separates a polished confirmation from a static green icon.

Replaying a CSS animation cleanly

CSS animations only run once on load, so re-triggering them is the tricky part. The replay button clones the SVG and replaces the original — a fresh element restarts its animations from scratch — and re-triggers the pulse and text with the forced-reflow pattern (void element.offsetWidth between removing and re-adding the class), which flushes the style change so the browser treats the re-added animation as new. This is the standard, reliable way to restart a CSS animation on demand.

Why SVG stroke animation over a GIF or Lottie

A stroke-animated SVG is a few lines of markup, scales crisply to any size, inherits color from CSS, weighs nothing, and needs no runtime library — unlike a GIF (fixed resolution, large file, no transparency control) or a Lottie JSON (requires a player library). For a simple checkmark, the native technique is the right tool, and it's trivial to recolor (swap the green) or resize (the viewBox keeps it sharp) for any brand.