Show HN: Make SVGs interactive in React with 1 line

4/2/2025 at 12:44:04 AM

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

by paulirish

4/3/2025 at 9:41:26 PM

From what I read of the docs, it's a pretty lightweight "library" that's actually mainly just a collection of css classes you can attach to an svg

by culi

4/1/2025 at 9:31:30 PM

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.

by yomielu

4/1/2025 at 9:22:06 PM

MDN docs > SVG and CSS: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/S...

by westurner

4/1/2025 at 8:02:35 PM

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...

by simlevesque

4/1/2025 at 8:54:52 PM

You need to hover the heart in the middle, not just the card.

by nartho

4/1/2025 at 9:21:58 PM

Src: https://github.com/shantinghou/interactive-illustrations

by westurner

4/2/2025 at 7:51:34 PM

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.

by tracker1

4/3/2025 at 9:42:38 PM

I've used it for very complex visualizations and, as long as things are properly memoized, it has also turned out very well.

SVG a11y standards are pretty undeveloped however which is disappointing

by culi

4/1/2025 at 10:29:35 PM

Did you consider using lottie and its interactivity? What were the tradeoffs?

by khaki54

4/1/2025 at 8:36:58 PM

Your landing page made my 9 year old laugh. Good work!

by hersko

4/1/2025 at 10:34:13 PM

Looks cool but isn't this just using gsap and having a wrapper around it?

by abdulyki

4/1/2025 at 8:22:21 PM

Doesn't seem to do anything in firefox either.

by ckemere

4/1/2025 at 9:55:04 PM

Try hovering over the symbols on the card - though I couldn't get the morph one to work on Firefox

by jazzcomputer

4/1/2025 at 9:46:41 PM

looks cool, you should probably gitignore some of the dirs there though

by 1ilit

4/1/2025 at 9:53:15 PM

Reminds me when I was new to dev, I committed and pushed node_modules up ahh good times

by ge96

4/1/2025 at 9:55:14 PM

been there, done that

by 1ilit

4/1/2025 at 9:38:48 PM

It seems unusual to make the package name so different from the project name.

Also, the instructions for converting svg to react component work sometimes. It won't work if your svg has any style attributes for example. React also warns on some valid svg attributes, such as this one.

    <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" />

I've spent at least a day cleaning up after devs who just dropped inline SVG content into react components without checking whether it works. If you actually had a reliable way of embedding SVG in JSX in such a way that it worked with react, I might have use for it on occasion.

The given code example is missing a right angle brace on the `<svg` line.

by recursive

4/1/2025 at 9:57:06 PM

yeah, not sure why anyone would copy-paste SVG as JSX when SVGR exists: https://react-svgr.com/

by cAtte_