Laser Draw
No library Advanced
The check mark draws itself with a neon-orange glowing laser effect using stroke-dashoffset animation and a pulsing drop-shadow filter. Visually distinct from draw-check — hot, fiery, continuous glow.
The check mark draws itself with a neon-orange glowing laser effect using stroke-dashoffset animation and a pulsing drop-shadow filter. Visually distinct from draw-check — hot, fiery, continuous glow.
Goal: Create a "Laser Draw" checkbox animation.
Visual behavior: A 28×28px square checkbox (7px border-radius). Off state: transparent, white/25% border. On state: faint orange-tinted background (rgba(249,115,22,0.08)), orange (#f97316) border. The check mark draws itself using SVG stroke-dashoffset animation (pathLength="1", strokeDasharray="1", dashoffset 1→0 over 420ms). While drawn, the check glows with animated drop-shadow filters (pulsing glow via @keyframes). Orange/ember color palette — completely different feel from the clean white draw-check variant.
Technique: CSS transition on strokeDashoffset. A keyframe animation pulses the drop-shadow filter continuously once drawn.
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.