← Back to gallery
SVG

Success Checkmark Path Draw

SVG success ring and tick draw with getTotalLength-measured dasharray, in sequential ring+tick and standalone tick-with-pop variants.

Duration
1s
Resolution
1440×900
Format
SVG
checkmarksuccesspath-drawstroke-dasharraygetTotalLength

Feedback / success / SVG path draw

Success checkmark path draw

Reimplements the runtime getTotalLength() measurement loop so the dash math for the ring and the tick stay synced even when the SVG geometry changes.

ring + tick sequential draw — ring 420ms · tick 280ms

Circle first, then tick — path-length measured at mount

Ring + tick sequential draw

Circle and tick live on the same SVG but run on separate dasharray timings. getTotalLength() reads each path at mount so the reveal stays sharp across viewports.

  • getTotalLength
  • stroke-dasharray
  • sequential

Dash draw + final scale pop — dense confirmation

Tick-only with scale pop

A naked tick path draws in quickly and closes with a subtle scale-pop from the path midpoint. Works as an inline confirmation next to buttons or input fields.

  • dash-draw
  • scale-pop
  • inline-confirmation

Checkmark inspector

Ring + tick sequential draw

Ring draw
420ms
Tick draw
280ms

Measuring path length beats hard-coding because runtime path edits (stroke-width, icon swap) keep the dash math correct. The ring seeds the animation; the tick rides the trailing handoff.

Live controls

css
.success-check__ring,
.success-check__tick {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

/* dash arrays come from getTotalLength() at mount */
.success-check__ring {
  stroke-dasharray: var(--ring-length);
  stroke-dashoffset: var(--ring-length);
  animation: drawRing 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.success-check__tick {
  stroke-dasharray: var(--tick-length);
  stroke-dashoffset: var(--tick-length);
  animation: drawTick 280ms cubic-bezier(0.22, 1, 0.36, 1) 340ms forwards;
}

@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes drawTick { to { stroke-dashoffset: 0; } }