The latest articles on DEV Community by Shanting Hou (@shanting_hou_a0b33242a4b8). https://dev.to/shanting_hou_a0b33242a4b8 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3003565%2Fcac58a33-a8e9-42a2-8eee-4d331442d9a7.png https://dev.to/shanting_hou_a0b33242a4b8 en Shanting Hou Tue, 01 Apr 2025 19:16:26 +0000 https://dev.to/shanting_hou_a0b33242a4b8/svggles-make-interactive-svg-illustrations-in-react-with-1-line-2l9b https://dev.to/shanting_hou_a0b33242a4b8/svggles-make-interactive-svg-illustrations-in-react-with-1-line-2l9b <p>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.</p> <p>But when I switched gears to frontend development (especially in React), I realized something was missing...</p> <p>I wanted to bring that creative energy into my everyday UI work.</p> <p>That’s why I built <strong>svggles</strong> — 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.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbihktqhygeizxnbdr5yq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbihktqhygeizxnbdr5yq.png" alt="svggles logo" width="" height=""></a></p> <h2> <strong>What is svggles?</strong> </h2> <p>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</p> <p>It’s lightweight, customizable, and designed to work seamlessly with modern React apps.</p> <h2> <strong>How to install:</strong> </h2> <p>npm install interactive-illustrations</p> <h2> <strong>Playground &amp; Docs</strong> </h2> <p>🌐 <a href="https://svggles.vercel.app/" rel="noopener noreferrer">Website &amp; Examples</a><br> 📦 <a href="https://www.npmjs.com/package/interactive-illustrations" rel="noopener noreferrer">NPM package</a><br> 💻 <a href="https://github.com/shantinghou/interactive-illustrations" rel="noopener noreferrer">GitHub repo</a></p> <p>If you’ve ever wanted to build a UI that comes alive — try svggles. Let me know what you think, share what you build, and feel free to open a PR with your own ideas!</p> webdev react opensource design