3dsvg

3dsvg

The easiest way to turn SVGs into interactive 3D.

Overview

This is a monorepo with two packages:

The web editor renders the engine's `` component directly — what you see in the editor is exactly what you get with the embed.

Quick Start

npm install
npm run build:engine
npm run dev:web

Open http://localhost:3000.

Embed

npm install 3dsvg

import { SVG3D } from "3dsvg";

See the full engine docs for all props.

Web Editor Features

• 4 input methods — Text (10 Google Fonts), Pixel Editor, SVG Code, File Upload
• 10 material presets — Default, Plastic, Metal, Glass, Rubber, Chrome, Gold, Clay, Emissive, Holographic
• 7 animations — Spin, Float, Pulse, Wobble, Swing, Spin+Float, or static
• Textures — 10 procedural presets or upload your own
• Configurable lighting — Key light position/intensity, ambient, shadows
• PNG export — Transparent or with background, up to 4K resolution
• Video export — 60fps capture with iOS-style trim UI, MP4 (via FFmpeg WASM) or WebM, quality control
• 3D model export — Download the scene as GLB (color + materials preserved), STL (3D printing), OBJ, or PLY
• Camera mode — iPhone-style shutter button, aspect ratio picker, viewfinder overlay
• Interactive canvas — Drag rotation with momentum, scroll zoom, cursor-follow orbit
• Responsive — Auto-zooms on narrow/portrait viewports to keep the 3D object visible
• Embed code export — Copy-ready `` JSX snippet with all props from the current editor state
• Drag & drop — Drop SVG files anywhere on the page to load them

Project Structure

…

Tech Stack

License

MIT — Renato Costa

Made in Blueberry