atarehDesign Systems · APR 11, 2026
How to turn any SVG into a 3D hero with one React component
3dsvg is a React component that extrudes flat SVGs into interactive 3D objects with floating animations and cursor tracking. Here's how to use it.
What is 3dsvg
3dsvg is a React component that takes a flat SVG and turns it into an interactive 3D object. It handles the Three.js setup, extrusion, lighting, and animation for you. You give it an SVG string and some props, and it gives you a 3D model that floats, spins, and responds to your cursor.
No Three.js knowledge required. No canvas setup. Just npm install and drop it into your React app.
How to use it
Go to the website
Head to 3dsvg.design. The editor loads immediately — no account, no signup.
Upload your logo and adjust
Drop your SVG file into the editor. Use the right panel to tweak color, depth, smoothness, zoom, animation, and lighting until it looks right. You can also set a texture and toggle cursor orbit. When you're happy with the result, click the code button to copy the React component.
Add it to your React project
Install the dependency and drop the component into your code:
npm install 3dsvgHere's the McDonald's golden arches I made with it:
The golden arches SVG — 3dsvg turns this flat path into an interactive 3D object
import { SVG3D } from "3dsvg";
const mySvg = `<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="238.5" width="272.7"
viewBox="0 0 272.70001 238.5">
<path fill="#fc0" d="m195.8 17.933c23.3 0 42.2 98.3 42.2
219.7h34c0-130.7-34.3-236.5-76.3-236.5-24 0-45.2
31.7-59.2 81.5-14-49.8-35.2-81.5-59-81.5-42 0-76.2
105.7-76.2 236.4h34c0-121.4 18.7-219.6 42-219.6s42.2
90.8 42.2 202.8h33.8c0-112 19-202.8 42.3-202.8"/>
</svg>`;
<SVG3D
svg={mySvg}
smoothness={0.6}
color="#eab308"
animate="float"
cursorOrbit
/>That gives you a gold 3D model that floats up and down and rotates when you move your cursor over it. Five props, zero config.
Props that matter
| Prop | What it does |
|---|---|
svg | Your SVG markup as a string |
color | Hex color for the 3D material |
smoothness | How rounded the edges are (0 to 1) |
depth | How thick the extrusion is |
animate | "float" for a gentle bob animation |
cursorOrbit | Model follows your mouse cursor |
zoom | Camera zoom level (default ~8) |
texture | Image URL or base64 for surface texture |
orbitStrength | How much the model rotates on hover (0 to 1) |
The result
I dropped this into a McDonald's landing page built with Vite + React. The 3D golden arches sit at the top of the hero section, floating and responding to cursor movement. Below it: headline, CTAs, and a menu grid.
The full page took about 10 minutes to build. The 3D logo is the centerpiece — it turns a flat landing page into something that feels physical and interactive. No Three.js boilerplate, no WebGL debugging.
Here's the full component for reference:
import { SVG3D } from "3dsvg";
const mySvg = `<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="238.5" width="272.7"
viewBox="0 0 272.70001 238.5">
<path fill="#fc0" d="m195.8 17.933c23.3 0 42.2 98.3 42.2
219.7h34c0-130.7-34.3-236.5-76.3-236.5-24 0-45.2
31.7-59.2 81.5-14-49.8-35.2-81.5-59-81.5-42 0-76.2
105.7-76.2 236.4h34c0-121.4 18.7-219.6 42-219.6s42.2
90.8 42.2 202.8h33.8c0-112 19-202.8 42.3-202.8"/>
</svg>`;
function App() {
return (
<div>
<SVG3D
svg={mySvg}
smoothness={0.6}
color="#eab308"
animate="float"
cursorOrbit
/>
<h1>Golden taste, everywhere you go.</h1>
</div>
);
}Next steps
- Try it with your own logo SVG
- Use the visual editor to tune depth, smoothness, and color before coding
- Add a
textureprop with a base64 image for metallic or rough surfaces - Combine with scroll animations for a hero section that reacts as users scroll down
Written by
@atareh
AI architect & creator. Writing, designing, and producing in AI and tech. Previously head of product at a healthtech SaaS; background in molecular science. Founded gogray.today in 2017.
Related
Keep reading.
Made by @atareh · x / twitter · instagram