Morph Line
No library Advanced
A short horizontal line morphs into a check mark using SVG path d attribute animation — extending first, then bending into the check V-shape. Unchecking reverses the morph back to a line.
A short horizontal line morphs into a check mark using SVG path d attribute animation — extending first, then bending into the check V-shape. Unchecking reverses the morph back to a line.
Goal: Create a "Morph Line" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent, white/25% border, showing a short horizontal line (SVG path "M3 6.5 L10 6.5"). On state: dark teal background (#134e4a), teal border (#2dd4bf). When checked, the horizontal line extends to full width then morphs/bends into the check mark shape via CSS @keyframes animating the SVG path d attribute. Unchecking reverses: check bends back to a line, then line shrinks.
Technique: @keyframes with d property on SVG path for path morphing. Requires both start and end paths to have the same number of points.
Accessibility: Hidden native <input type="checkbox">. Animations removed 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.