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).
Product upvotes vs the next 3
Waiting for data. Loading
Product comments vs the next 3
Waiting for data. Loading
Product upvote speed vs the next 3
Waiting for data. Loading
Product upvotes and comments
Waiting for data. Loading
Product vs the next 3
Loading
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. 🙏
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.
On the analytics side, svg-scroll-draw competes within Open Source, Developer Tools, GitHub and Animation — topics that collectively have 626.2k followers on Product Hunt. The dashboard above tracks how svg-scroll-draw performed against the three products that launched closest to it on the same day.
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.
For a complete overview of svg-scroll-draw including community comment highlights and product details, visit the product overview.
Dhruvil Chauhan