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 🫐