Draw Check
No library Beginner
A checkbox where the SVG checkmark stroke draws itself on via stroke-dashoffset when checked, combined with a brief scale pop on the box. The path writes itself left-to-right rather than snapping in.
A checkbox where the SVG checkmark stroke draws itself on via stroke-dashoffset when checked, combined with a brief scale pop on the box. The path writes itself left-to-right rather than snapping in.
Goal: Create a "Draw Check" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: indigo (#6366f1) fill and border. The box pops with a brief scale overshoot (scale to 1.08, spring back) when checked. Inside, an SVG checkmark path that draws itself using stroke-dashoffset — on check it animates from dashoffset 1 to 0 over 350ms with an ease-out curve (the stroke appears to write itself left-to-right), and reverses on uncheck over 200ms ease-in. Uses pathLength="1" to normalize the dasharray.
Technique: React useState tracks checked state. SVG path uses pathLength="1", strokeDasharray="1", and transitions strokeDashoffset between 1 (hidden) and 0 (fully drawn). The box scale pops via cubic-bezier(0.34, 1.56, 0.64, 1). No library dependencies.
Accessibility: Hidden native <input type="checkbox">. role="checkbox" and aria-checked on the visible element. stroke-dashoffset transition skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.