Vecto3d

Turn SVGs into 3D objects, directly in your browser.

Open Vecto3d · GitHub

Vecto3d is a free, open-source tool for giving flat SVG artwork depth, material, lighting, and motion. There is nothing to install and no account is required. Uploaded files stay in your browser.

Features

• Upload, drag and drop, or paste an SVG.
• Start quickly with built-in example artwork.
• Adjust depth, bevel thickness, bevel size, and smoothness in real time.
• Choose a material preset or tune roughness, metalness, clearcoat, and color.
• Preview the model in multiple lighting environments and adjust their intensity.
• Set a custom preview background and add a bloom effect.
• Rotate the model directly in the viewport, reset changes, or enter fullscreen.
• Export a still image, an animation, or a production-ready 3D file.
• Use the same compact controls on desktop and mobile.

Workflow

1. Add an SVG. Drop, paste, or select a file on the landing page. You can also choose one of the included examples.
2. Shape it. Adjust the model depth and bevel until the geometry feels right.
3. Finish it. Choose a material, color, environment, background, and optional bloom.
4. Export it. Save the result in the format that fits your workflow.

Editor controls

Export formats

MP4 and GIF recording use the live WebGL preview. Turn on auto-rotate in the export panel, then choose the speed and duration before recording.

Local development

Vecto3d uses Bun as its package manager.

git clone https://github.com/lakshaybhushan/vecto3d.git
cd vecto3d
bun install
bun run dev

Open http://localhost:3000.

Run the checks before opening a pull request:

bun run lint
NODE_ENV=production bun run build

Tech stack

• Next.js and React
• Three.js and React Three Fiber
• TypeScript
• Tailwind CSS
• shadcn/ui and Radix UI
• Zustand for editor state
• Framer Motion for interface motion
• Cuelume for synthesized interaction sounds
• react-colorful for the color picker

Project structure

vecto3d/
├── app/
│   ├── page.tsx                 # Landing and SVG input flow
│   └── edit/page.tsx            # 3D editor
├── components/
│   ├── edit/                    # Editor controls and export panel
│   ├── previews/                # Three.js model and preset previews
│   └── ui/                      # Shared interface primitives
├── hooks/                       # Browser and device hooks
├── lib/
│   ├── exporters.ts             # PNG and 3D export helpers
│   ├── video-recorder.ts        # MP4 and GIF recording
│   ├── store.ts                 # Editor state
│   └── svg-sanitizer.ts         # SVG validation and sanitization
├── public/                      # Logos, workers, and texture assets
└── styles/                      # Global styles

Privacy and browser support

SVG processing and editing happen locally in the browser. The current file is kept in session storage so it can move from the landing page into the editor without being uploaded.

Chrome and Firefox are recommended. Safari can have WebGL rendering and performance issues, so the editor shows a warning before continuing.

Contributing

Issues and pull requests are welcome. Read CONTRIBUTING.md before getting started.

Vecto3d is available under the MIT License.

Author

Made by @blakssh.