Image Trace

The one job in this set where SVG beats the DOM: a stroke that draws itself along its own length has no sensible DOM equivalent. Every contour carries pathLength="1", which normalises the dash maths so a 15-unit ring and a 157-unit ring lay down at the same rate instead of the small ones snapping shut. The rings are warped by a field sampled at each point's own position, so neighbours bulge together and the set reads as contours of one surface rather than scribble. Accent lives on the ring the pen is currently on and nowhere else.

Files

src/components/ui/image/image-trace.tsxsrc/app/globals.css → trace-path

Depends on

motion

Tags

loading · progress · generation · ai · svg · contour · plotter · stroke · line art · placeholder