←back to thread

Show HN: Make SVGs interactive in React with 1 line

(svggles.vercel.app)
53 points shantingHou | 1 comments | 01 Apr 25 18:28 UTC | HN request time: 0s | source

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

Show context
recursive ◴[01 Apr 25 21:38 UTC] No.43551598[source]▶
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.

replies(2): >>43551699 #>>43551754 #
1. ◴[01 Apr 25 21:51 UTC] No.43551699[source]▶