Back to Dictionary
Status & Confirmation
●●○Customize

Checkmark Draw Animation

An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.

Live Demo

What It Is

An SVG checkmark that progressively draws itself from left to right inside a circle, confirming a successful action.

✓When to Use

  • Payment success screens
  • Form submission successes
  • Task completion

✕When NOT to Use

  • Routine toggles (too dramatic)
  • Indeterminate states

Configuration Tips

  • 01Use SVG dasharray and dashoffset manipulation to draw the path
  • 02Animate the circle scaling up, then draw the checkmark after a 100ms delay

You've Seen It In

Stripe CheckoutApple PayLottieAnimations

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Add a success checkmark that looks like it is being drawn with a pen.

Code Example (Tailwind CSS)

export function CheckmarkDrawAnimationDemo() {}

Related Effects

Toast Notification

A small, non-obtrusive popup that slides in (usually from the bottom or top right) to provide brief feedback about an operation, then disappears.

Like / Heart Animation

An expressive animation heavily scaling and expanding a heart or star icon, sometimes accompanied by mini confetti or a splash ring.