Neon Draw
Trace any SVG shape with a glowing stroke, like a neon sign warming up.
Usage
import { NeonDraw } from '@vinyl-ui/effects';
<NeonDraw viewBox="0 0 100 100" className="size-32 text-magenta" label="Logo" onEnd={next}>
<path d="M20 8 H80 Q92 8 92 20 V80 Q92 92 80 92 H20 Q8 92 8 80 V20 Q8 8 20 8 Z" />
<path d="M28 26 L48 70 L68 26" />
</NeonDraw>The stroke uses currentColor, so colour it with text-*. Or put the utility on your own SVG:
<g class="animate-draw [--draw-duration:2s]">…</g>.
Props
Prop
Type
How it works
A dash pattern of --draw-length (default 1000 units) is slid from fully offset to 0 on a group
wrapping the shapes, and stroke-dasharray / stroke-dashoffset inherit to every path. Keep each
path shorter than 1000 viewBox units (any shape in a 0 0 100 100 box is), or raise --draw-length.