Show HN: Make SVGs interactive in React with 1 line
20 comments
·April 1, 2025paulirish
I love playful interaction too, but you can get all this for free: SVGs are natively interactive.
Here's your demo in 45 lines of SVG and CSS: https://codepen.io/paulirish/pen/gbOZXJp
tracker1
Depending on what you're doing, I find SVG manipulation in React to come out pretty well. I've used it for overlays on scanned documents and basic charts without much issue at all.
yomielu
Awesome work! Not sure if this is intentional but it looks like the (lack of) contrast on the text vs background color is making it hard to read anything on the landing page.
simlevesque
This example doesn't seem to work, I hover it and nothing happens, in incognito, chrome latest: https://svggles.vercel.app/?tab=Documentation%2FHover%2FAnim...
nartho
You need to hover the heart in the middle, not just the card.
null
khaki54
Did you consider using lottie and its interactivity? What were the tradeoffs?
hersko
Your landing page made my 9 year old laugh. Good work!
null
westurner
MDN docs > SVG and CSS: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/S...
ckemere
Doesn't seem to do anything in firefox either.
jazzcomputer
Try hovering over the symbols on the card - though I couldn't get the morph one to work on Firefox
abdulyki
Looks cool but isn't this just using gsap and having a wrapper around it?
1ilit
looks cool, you should probably gitignore some of the dirs there though
Hey HN
I built svggles (npm: interactive-illustrations), a React utility that makes it easy to add playful, interactive SVGs to your frontend.
It supports mouse-tracking, scroll, hover, and other common interactions, and it's designed to be lightweight and intuitive for React devs.
The inspiration came from my time playing with p5.js — I loved how expressive and fun it was to create interactive visuals. But I also wanted to bring that kind of creative freedom to everyday frontend work, in a way that fits naturally into the React ecosystem.
My goal is to help frontend developers make their UIs feel more alive — not just functional, but fun. I also know creativity thrives in community, so it's open source and I’d love to see contributions from artists, developers, or anyone interested in visual interaction.
Links: Website + Docs: svggles.vercel.app
GitHub: github.com/shantinghou/interactive-illustrations
NPM: interactive-illustrations
Let me know what you think — ideas, feedback, and contributions are all welcome