Ripple Fill
No library Intermediate
A circular teal fill expands from the center outward via clip-path circle animation, like a water-drop ripple filling the box. The check mark fades in after the fill completes.
A circular teal fill expands from the center outward via clip-path circle animation, like a water-drop ripple filling the box. The check mark fades in after the fill completes.
Goal: Create a "Ripple Fill" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent fill, white/25% border. On state: teal (#0d9488) border and fill. When checked, a circular fill expands from the center via clip-path: circle(0% at 50% 50%) → circle(75% at 50% 50%) over 360ms. The check mark fades and scales in after the fill completes (~200ms delay). Unchecking reverses: check fades, then circle collapses back to 0%.
Technique: Single clip-path transition on a fill layer div. Check SVG sits above with opacity/scale transition delayed after fill. Distinct from liquid (rises from bottom) and pulse-ring (radiates outward without filling).
Accessibility: Hidden native <input type="checkbox">. Transitions 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.