An SVG rectangle border traces around the selected option using stroke-dashoffset animation, drawing a neon green circuit-board outline from the top-left corner around the full perimeter. The glow persists after tracing.
Goal: Create a "Neon Trace" radio group animation.
Visual behavior: A radio group with 3 options (220×48px each, border-radius 7px). When an option is selected, an SVG rectangle border traces its outline using stroke-dashoffset animation (from full perimeter to 0 over 700ms). The stroke is neon green (#00ff88) with a drop-shadow filter for the glow effect. After the trace completes, a faint static green border remains. Unselected options have a subtle dim border. The radio dot on the left glows green when selected.
Technique: React useState tracks selected value and a traceKey counter. traceKey increments on each selection to force React to unmount and remount the SVG trace element, restarting the CSS animation. Two SVG layers: one animated trace (with strokeDashoffset keyframe), one persistent faint glow border. Inline styles drive all state. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. SVG animation skipped under prefers-reduced-motion via CSS media query targeting .neon-trace-path.
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.