5e:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3q5d1avmchlp0.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/149w-u4or12up.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/17pioewhhzr_j.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/3fr1ev83fgwky.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js"],"PostDetailCard"] 5f:T9bd,

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

5b:[["$","$L5e",null,{"post":{"id":"019e3a13-a073-7f69-b951-0f7e903cd50a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"99280d50-d96a-4f30-9a6c-36cd84a4f304","name":"Utkarsh Arya","slug":"uxarya","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/99280d50-d96a-4f30-9a6c-36cd84a4f304/o5gd3xep","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4ciPlP6npfDVKOYZUgIG","resolved":true,"title":"SVG Isometric 3D","body":"$5f","bodyJson":null,"introduction":"Turn any SVG into an isometric 3D shape","slug":"svg-isometric-3d","author":{"framerUserId":"99280d50-d96a-4f30-9a6c-36cd84a4f304","name":"Utkarsh Arya","slug":"uxarya","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/99280d50-d96a-4f30-9a6c-36cd84a4f304/o5gd3xep","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/4ciPlP6npfDVKOYZUgIG/svg-isometric-3d-AJnIE2OON9BEiadAMbLtEafSHJqLLj","metadata":{"tint":{"h":84,"s":85,"l":35},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-27T07:26:13.316Z","updatedAt":"2026-05-18T07:53:40.172Z","publishedAt":"2026-05-18T07:53:45.331Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SVG-Isometric-3D-Jlconu.js@D8ZX2iQ4kSUvubCvQoFC","previewUrl":"https://spotless-operator-086579.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"D8ZX2iQ4kSUvubCvQoFC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-18T07:53:45.331Z","updatedAt":"2026-05-18T07:53:45.331Z","reported":false}}],"$L60"]

Suggested for you