SVG Isometric 3D

Free Utilities Component by Utkarsh Arya

Show Preview
SVG Isometric 3D

About SVG Isometric 3D

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

  1. Drop the component onto your canvas

  2. Upload your .svg file using the SVG property

  3. Adjust Depth % to control the extrusion thickness

  4. Set Top Color, Side Color, and Edge Color to match your design

  5. Toggle Hatch on and adjust spacing, thickness, and color for the layered side effect

  6. Use Zoom to fit the shape within the frame

  7. 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