SVG Isometric 3D
Upload any SVG and transform it into a layered isometric 3D object — rendered in real time inside Framer using Three.js. The signature hatch lines on the extruded sides give every shape a distinctive stacked, architectural quality that works equally well for icons, illustrations, and logos.
Features
SVG Upload — Accepts any .svg file directly from the property panel
Adjustable Depth — Control how thick the extrusion is, scaled proportionally to your SVG
Top & Side Colors — Set separate colors for the face and extruded sides
Edge Strokes — Visible edge lines give the shape a clean technical look
Hatch Pattern — The signature side texture, with configurable spacing, thickness, and color
Zoom Control — Zoom in or out to frame your shape within the component
Isometric Camera — Fixed orthographic camera for a consistent isometric view
Multi-path SVGs — Every path in your SVG is extruded individually
Responsive — Automatically adapts to the component frame size
Canvas Rendering
The 3D output does not render on the Framer canvas. This is intentional — the canvas runs every component on the page simultaneously, and initializing a WebGL context for each instance would significantly degrade editor performance. Instead, the canvas shows a lightweight color preview using your chosen Top and Side colors, so your palette is always visible while you design. Hit Preview to see the full 3D render.
How to Use
Drop the component onto your canvas
Upload your .svg file using the SVG property
Adjust Depth % to control the extrusion thickness
Set Top Color, Side Color, and Edge Color to match your design
Toggle Hatch on and adjust spacing, thickness, and color for the layered side effect
Use Zoom to fit the shape within the frame
Hit Preview to see the live 3D render
Tips
Works best with simple, flat SVGs with clearly defined paths
For a monochromatic look, set the top and side color to the same hue and let the hatch create the depth
SVGs without strokes or gradients produce the cleanest extrusions
Utkarsh Arya
