3dsvg

3dsvg

The easiest way to turn SVGs into interactive React 3D components.

Install

npm install 3dsvg

Peer dependencies: react, react-dom, three, @react-three/fiber, @react-three/drei

Quick Start

import { SVG3D } from "3dsvg";

// 3D text
<SVG3D text="Hello" animate="spin" />

// SVG from your public folder
<SVG3D svg="/logo.svg" material="gold" animate="float" />

// Inline SVG markup
<SVG3D svg='<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5z"/></svg>' />

// Remote URL
<SVG3D svg="https://cdn.example.com/icon.svg" material="metal" />

Next.js — wrap with next/dynamic for SSR safety:

const SVG3D = dynamic(
  () => import("3dsvg").then((m) => ({ default: m.SVG3D })),
  { ssr: false }
);

Demo & Editor

Design 3D objects visually and export embed code at 3dsvg.design.

Props

Content

Provide either text or svg. If both are given, svg takes priority.

Prop	Type	Default	Description
text	string	—	Text to render in 3D
font	string	"DM Sans"	Google Font name (see available fonts)
svg	string	—	SVG markup or URL (/logo.svg, https://..., ./path.svg)

Shape

Prop	Type	Default	Description
depth	number	1	Extrusion depth (0.5 = flat, 10 = very deep)
smoothness	number	0.2	Curve and bevel quality, 0–1
color	string	"#ffffff"	Base color (hex)

Material

Prop	Type	Default	Description
material	MaterialPreset	"default"	Material preset (see below)
metalness	number	—	Override preset metalness (0–1)
roughness	number	—	Override preset roughness (0–1)
opacity	number	—	Override preset opacity (0–1)
wireframe	boolean	false	Wireframe rendering mode

Material presets:

Preset	Metalness	Roughness	Notes
default	0.15	0.35	Balanced starting point
plastic	0.0	0.3	Smooth, non-reflective
metal	0.9	0.2	Brushed metal
glass	0.1	0.05	Transparent with refraction
rubber	0.0	0.9	Matte, soft
chrome	1.0	0.05	Mirror-like reflections
gold	1.0	0.25	Gold tint applied automatically
clay	0.0	1.0	Fully matte
emissive	0.0	0.5	Self-illuminated glow
holographic	0.8	0.1	Transparent with clearcoat

Texture

Prop	Type	Default	Description
texture	string	—	Image URL to map onto the 3D surface
textureRepeat	number	1	How many times the texture tiles
textureRotation	number	0	Texture rotation in radians
textureOffset	[number, number]	[0, 0]	UV offset [x, y]

When a texture is set, the base color is overridden to white so the texture renders at full fidelity.

Lighting

Prop	Type	Default	Description
lightPosition	[number, number, number]	[5, 8, 5]	Key light position [x, y, z]
lightIntensity	number	1.2	Key light brightness
ambientIntensity	number	0.3	Ambient fill light
shadow	boolean	true	Show contact shadows

Camera

Prop	Type	Default	Description
rotationX	number	0	Initial X rotation (radians)
rotationY	number	0	Initial Y rotation (radians)
zoom	number	8	Camera distance
fov	number	50	Field of view (degrees)

The camera automatically adjusts on narrow/portrait viewports — it zooms out proportionally so the 3D object always fits within the visible area.

Interaction

Prop	Type	Default	Description
interactive	boolean	true	Master toggle — false disables drag, zoom, and orbit
cursorOrbit	boolean	true	Object subtly follows the cursor
orbitStrength	number	0.15	How strongly the object follows the cursor (radians)
draggable	boolean	true	Allow drag to rotate
scrollZoom	boolean	false	Allow scroll to zoom (off by default so embeds don't hijack page scroll)
resetOnIdle	boolean	false	Return to default position after inactivity
resetDelay	number	2	Seconds before reset triggers

Animation

Prop	Type	Default	Description
animate	AnimationType	"none"	Loop animation type (see below)
animateSpeed	number	1	Speed multiplier
animateReverse	boolean	false	Reverse direction

Animation types: none · spin · float · pulse · wobble · spinFloat · swing

Intro

Prop	Type	Default	Description
intro	string	"zoom"	Intro animation: zoom · fade · none
introDuration	number	2.5	Duration in seconds
introFrom	object	{ zoom: 18, opacity: 0 }	Starting state
introTo	object	{ zoom: 8, opacity: 1 }	Ending state

Layout

Prop	Type	Default	Description
width	string | number	"100%"	Container width
height	string | number	"100%"	Container height
background	string	"transparent"	Canvas background color
className	string	—	CSS class on the wrapper div

Events

Prop	Type	Description
onReady	() => void	Fires when WebGL context is ready and first frame is rendered
onAnimationComplete	() => void	Fires when the intro animation finishes
onLoadingChange	(loading: boolean, progress: number) => void	Fires during geometry processing with loading state and progress (0-100). Use this to show custom loading UI.

Geometry processing is asynchronous — complex SVGs are processed in batches to keep the browser responsive. The onLoadingChange callback lets you track progress and show a loading indicator:

<SVG3D
  svgString={complexSvg}
  onLoadingChange={(loading, progress) => {
    if (loading) console.log(`Processing: ${progress}%`);
    else console.log("Done");
  }}
/>

Available Fonts

DM Sans · Bebas Neue · Playfair Display · Righteous · Black Ops One · Permanent Marker · Rubik Mono One · Pacifico · Oswald · Archivo Black

License

MIT — Renato Costa

Made in Blueberry 🫐