This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
svg-scroll-draw
Scroll-driven SVG path animation. Zero deps. 3 KB.
GSAP DrawSVG costs $150/yr. Vivus has no scroll integration. Framer Motion doesn't do stroke-dashoffset at all. svg-scroll-draw does one thing perfectly: animates SVG paths as you scroll. Zero dependencies. ~3 KB gzipped. One line of code. Works natively with React, Vue, Svelte, Solid, Angular, Astro, and vanilla JS — no wrappers needed for each framework. Live playground included. Try it before you install it.
Hey Product Hunt! 👋
I built svg-scroll-draw because I kept reaching for GSAP just
to animate an SVG logo on scroll — 40 KB of library for what
should be 3 lines of code.
The problem: GSAP DrawSVG is paywalled. Vivus requires you to
wire up your own scroll logic. Framer Motion doesn't do
stroke-dashoffset at all.
So I built the missing piece — a library that does exactly one
thing: animates SVG paths as you scroll. Zero dependencies.
~3 KB gzipped. One line of code.
It works natively with React, Vue, Svelte, Solid, Angular,
Astro, and vanilla JS — no adapters, no boilerplate.
The best way to see it → try the live playground:
svg-scroll-draw.vercel.app/playground
Paste any SVG and watch it draw on scroll. No install needed.
Happy to answer any questions — and would genuinely love
feedback on what's missing or broken. 🙏
No comment highlights available yet. Please check back later!
About svg-scroll-draw on Product Hunt
“Scroll-driven SVG path animation. Zero deps. 3 KB.”
svg-scroll-draw was submitted on Product Hunt and earned 3 upvotes and 1 comments, placing #103 on the daily leaderboard. GSAP DrawSVG costs $150/yr. Vivus has no scroll integration. Framer Motion doesn't do stroke-dashoffset at all. svg-scroll-draw does one thing perfectly: animates SVG paths as you scroll. Zero dependencies. ~3 KB gzipped. One line of code. Works natively with React, Vue, Svelte, Solid, Angular, Astro, and vanilla JS — no wrappers needed for each framework. Live playground included. Try it before you install it.
svg-scroll-draw was featured in Open Source (68.5k followers), Developer Tools (514k followers), GitHub (41.3k followers) and Animation (2.4k followers) on Product Hunt. Together, these topics include over 108.4k products, making this a competitive space to launch in.
Who hunted svg-scroll-draw ?
svg-scroll-draw was hunted by Dhruvil Chauhan. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how svg-scroll-draw stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Dhruvil Chauhan