The preview, every setting and the PNG export are free, with no account. Only exporting the code requires a subscription.

Do I need to install Three.js myself?

No. The library is included in the downloaded file: no external dependency.

Does it work on WordPress or Webflow?

Yes. Upload the JavaScript file to your media, then paste the block into an HTML module, fixing the path.

Can I change the colours afterwards?

Yes. The settings are written in plain sight at the end of the delivered code.

How much does the effect weigh on my page?

About 690 KB, roughly 160 KB actually transferred if the server compresses. The file is cached: downloaded once.

← All generators

SVG to 3D

Drop an SVG, a logo or an image: the shape gains volume, spins, and you tune it live. The preview and the image are free; the code comes with a subscription.

Three steps

Drop your drawing. An SVG file goes straight in. A PNG or JPEG logo is traced on the way: its outlines become shapes, which can then be given volume.
Tune it. Thickness, edge softening and rounding, one of eleven materials, colour, shadow, motion. Everything updates on screen while you move the sliders.
Take it away. The PNG image is free, no account needed. The code comes with a subscription.

Putting the object on your site

Two ways, depending on what you downloaded.

The block to paste

This is the usual case, to place the object in a page that already exists — a home page, for instance. The Copy the block button puts the code in your clipboard and downloads the effect-labs-3d.js file at the same time. Paste the block wherever you want in your page, drop the file in the same folder, reload.

The standalone page

A single file that works on its own, handy to see the result straight away or to show it to someone. To embed it untouched, call it in a frame:

<iframe src="effect-labs-3d.html" style="width:100%;height:380px;border:0"
        title="3D object" loading="lazy"></iframe>

The upside of a frame: the object is fully isolated from your page's CSS and JavaScript, so nothing can clash. The downside: you set its height by hand.

Why not a single copy-paste?

Because 3D relies on Three.js, which weighs around 600 KB. You do not put 600 KB in a clipboard. And I refuse both usual shortcuts: loading the library from a CDN would make you depend on a third party, serving it from my server would make you depend on mine. A file sitting in your own folder depends on no one.

How it is built

Nothing is hidden: the path is plain Three.js, and you can walk it yourself. The tool only saves you the back and forth.

// 1. read the SVG and pull closed shapes out of it
const paths = new THREE.SVGLoader().parse(svgText).paths;
const shapes = THREE.SVGLoader.createShapes(paths[0]);   // holes included

// 2. give it thickness
const geo = new THREE.ExtrudeGeometry(shapes, {
  depth: 20, bevelEnabled: true, bevelThickness: 2,
  bevelSize: 1.8, bevelSegments: 8   // under 4: a flat chamfer, not a round edge
});

// 3. material and light
const mesh = new THREE.Mesh(geo, new THREE.MeshPhysicalMaterial({
  color: 0x7c5cff, metalness: 1, roughness: 0.34, envMap: env
}));

Two traps cost me time — you may as well skip them:

Line drawings produce nothing. A path with fill:none and a stroke has no surface to extrude: the screen stays empty, without a single error message. Yet most icons are built that way. Strokes must be handled separately, by following them with a tube.
Shapes coming out of a trace overlap exactly. Their faces coincide and the render breaks into stripes — what is called z-fighting. A tiny offset in depth pulls them apart.

What works, what does not

A flat-colour logo: perfect. That is what the tool is made for.
A line icon: yes. The stroke becomes a tube with volume.
A photograph: no, and that is not a limit anyone will lift. A photo has no shape to extrude; tracing it yields a mush of outlines.
PNG rather than JPEG. Both go through, but JPEG compression leaves halos around outlines, which the tracer follows faithfully. A PNG with a transparent background gives the cleanest result.

Frequently asked questions

Is the tool free?: The preview, every setting and the PNG export are free, with no account. Only exporting the code requires a subscription.
Do I need to install Three.js myself?: No. The library is included in the file you download. There is nothing to install and no external dependency.
Does it work on WordPress or Webflow?: Yes. Upload the JavaScript file to your media or assets, then paste the block into an HTML module, fixing the path to the file.
Can I change the colours afterwards?: Yes. The settings are written in plain sight at the end of the delivered code: change the value, reload.
How much does the effect weigh on my page?: About 690 KB, 600 of which are Three.js — roughly 160 KB actually transferred if your server compresses, as most do. The file is cached by the browser: it is downloaded once.

See also: SVG effects and 3D effects in the catalogue.