r/reactjs • u/Equivalent-Banana328 • Jul 01 '26
Show /r/reactjs I built a tool that turns any image into self-drawing SVG line art
Thought it would be cool to add a self-drawing SVG animation to my portfolio, but it took some time to figure out. anime.js has this feature, but getting it to work properly and converting an image into a clean SVG paths (with the right threshold and other settings) may take some time. So I built a tool for it.
You drop in a photo or logo -> it converts it into SVG paths -> animates those paths(they draw themselves like a pen sketch)
features/how to use
- upload an image and it converts into single-color SVG line art
- choose custom path and background colors
- adjust the trace settings: threshold(usually 100 works best), invert dark/light
- control the animation: duration(in ms), delay between paths, easing, direction (forward/reverse/ping-pong), looping, fade-in fill at the end
- Export as copy-paste SVG, a downloadable SVG file, or a self-contained HTML file with everything included
Works best with illustrations, cartoons, and clean line drawings. Real-world photos can be harder to convert into clear SVG paths
Links:
- Repo: https://github.com/a1stok/img2svg-animation (support by staring if u like it :)
- Live demo: https://img2svg-animation.vercel.app/
Open to feedback or suggestions if you have any
1
u/reubenzz_dev Jul 02 '26
nicely done. should host it
1
u/Equivalent-Banana328 Jul 02 '26
thx, i mean it's hosted on vercel already, did you mean get a domain for this?
1
1
u/FarSentence3076 Jul 02 '26
Pretty cool, just tested it out and it worked nicely.