[HN Gopher] Show HN: Make SVGs interactive in React with 1 line
___________________________________________________________________
Show HN: Make SVGs interactive in React with 1 line
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
Author : shantingHou
Score : 26 points
Date : 2025-04-01 18:28 UTC (4 hours ago)
(HTM) web link (svggles.vercel.app)
(TXT) w3m dump (svggles.vercel.app)
| simlevesque wrote:
| 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 wrote:
| You need to hover the heart in the middle, not just the card.
| ckemere wrote:
| Doesn't seem to do anything in firefox either.
| jazzcomputer wrote:
| Try hovering over the symbols on the card - though I couldn't
| get the morph one to work on Firefox
| hersko wrote:
| Your landing page made my 9 year old laugh. Good work!
| westurner wrote:
| Src: https://github.com/shantinghou/interactive-illustrations
| westurner wrote:
| MDN docs > SVG and CSS: https://developer.mozilla.org/en-
| US/docs/Web/SVG/Tutorials/S...
| yomielu wrote:
| 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.
| recursive wrote:
| 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.
| cAtte_ wrote:
| yeah, not sure why anyone would copy-paste SVG as JSX when SVGR
| exists: https://react-svgr.com/
| 1ilit wrote:
| looks cool, you should probably gitignore some of the dirs there
| though
| ge96 wrote:
| Reminds me when I was new to dev, I committed and pushed
| node_modules up ahh good times
| 1ilit wrote:
| been there, done that
| khaki54 wrote:
| Did you consider using lottie and its interactivity? What were
| the tradeoffs?
| abdulyki wrote:
| Looks cool but isn't this just using gsap and having a wrapper
| around it?
___________________________________________________________________
(page generated 2025-04-01 23:00 UTC)