I’ve always loved how p5.js made it super easy to create fun, playful interactions in code. You can make something come alive with just a few lines — cursor-following eyes, floating shapes, reactive visuals. It felt like sketching with code. But when I switched gears to frontend development (especially in React), I realized something was missing... I wanted to bring that creative energy into my everyday UI work. That’s why I built svggles — a small React utility that makes it easy to add interactive SVG illustrations to your projects. Think of it as a fun toolkit for adding “just a little magic” to your frontend. What is svggles? svggles (published as interactive-illustrations) is a React package that lets you create SVG-based components that respond to Mouse movement, Scroll, Hover, and custom animations or transformations It’s lightweight, customizable, and designed to work seamlessly with modern React apps. How to install: npm install interactive-illustrations Playground & Docs

Apr 1, 2025 - 20:37
 0

I’ve always loved how p5.js made it super easy to create fun, playful interactions in code. You can make something come alive with just a few lines — cursor-following eyes, floating shapes, reactive visuals. It felt like sketching with code.

But when I switched gears to frontend development (especially in React), I realized something was missing...

I wanted to bring that creative energy into my everyday UI work.

That’s why I built svggles — a small React utility that makes it easy to add interactive SVG illustrations to your projects. Think of it as a fun toolkit for adding “just a little magic” to your frontend.

svggles logo

What is svggles?

svggles (published as interactive-illustrations) is a React package that lets you create SVG-based components that respond to Mouse movement, Scroll, Hover, and custom animations or transformations

It’s lightweight, customizable, and designed to work seamlessly with modern React apps.

How to install:

npm install interactive-illustrations

Playground & Docs