Logo Extrude 3D — 3D SVG logo component for Framer

Turn your SVG logo into a bevelled 3D object in chrome, glass, clay, gold or holographic finishes.

What it is

A hero-section component that extrudes the filled shapes of your SVG logo into a bevelled 3D object rendered with three.js, lit by a studio environment generated in code.

What you get

- One Framer code component (Logo Extrude 3D), delivered as a Component URL.

- SVG file upload or pasted SVG code, depth, bevel and bevel steps.

- Five material presets plus Custom, light, auto-rotate, drag and scroll turn, background, padding and scale.

- Free updates.

How it behaves

- Your logo, in 3D. Filled shapes and holes are extruded, bevelled, centred and fitted to the frame.

- Studio finishes. Chrome, Glass, Clay, Gold, Holographic or your own colour, roughness and metalness.

- Moves when you want. Slow turn on Y, X or wobble, drag with inertia, or turn with page scroll.

- Light on the page. Nothing is drawn while the logo is still or off screen; reduced motion turns auto-rotation and scroll turning off.

- Safe fallbacks. The Framer canvas and browsers without WebGL show a flat version of your logo.

Requirements

Any Framer project. Uses three.js, which Framer loads for the component; no plugins. Your logo as SVG with filled shapes.

Live preview: https://thistle-timing-694660.framer.app/logo-extrude-3d