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:Taa1,

SVG → Interactive 3D in Framer

SVG to 3D converts flat SVG graphics into fully interactive 3D objects inside Framer. Simply upload an SVG and the component automatically generates extruded 3D geometry rendered with Three.js.

Customise depth, materials, lighting, and interaction to create dynamic visuals for landing pages, hero sections, product highlights, and interactive UI elements.

No Three.js setup required.

Key Features

SVG to 3D Extrusion

Convert any SVG path into 3D geometry with adjustable depth and bevel settings.

Material Styles

Choose from multiple material looks:

Basic
Metallic
Clay
Acrylic

Create anything from polished metal objects to soft sculptural shapes.

Interactive Controls

Add interaction to your 3D objects:

Drag – rotate the object freely
Cursor – object reacts to mouse movement
None – static display

Lighting Environment

Built-in lighting system with adjustable:

Light colour
Intensity
Environment rotation

Create dramatic highlights or soft studio lighting.

Camera Controls

Adjust the viewing angle and zoom to frame the object exactly how you want.

Performance Optimised

The component automatically pauses rendering when off-screen to reduce GPU usage and keep pages fast.

Property Controls

SVG

Upload any SVG graphic to convert it into 3D geometry.

Object

Extrude depth
Bevel size and softness
Spread (scale)

Materials

Basic
Metallic
Clay
Acrylic

Interaction

None
Drag
Cursor follow

Environment

Lighting color
Lighting intensity
Environment rotation

Camera

Rotation (X, Y, Z)
Zoom

Perfect For

Landing page hero graphics
Interactive brand visuals
3D icons and logos
Creative portfolio websites

Requirements

SVG files with vector paths
Works directly inside Framer with no external setup

5b:[["$","$L5e",null,{"post":{"id":"019d24d3-9096-7e36-b2a2-9216c8efbdfe","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":"ec2vlwv4YaOlytArAk1z","resolved":true,"title":"SVG to 3D","body":"$5f","bodyJson":null,"introduction":"Convert SVGs into interactive 3D objects","slug":"svg-to-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/ec2vlwv4YaOlytArAk1z/svg-to-3d-XiGp6lZNbPgHa3rlecmt1lnlynEVDM","metadata":{"tint":{"h":40,"s":47,"l":30},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-09T12:01:53.579Z","updatedAt":"2026-05-20T10:07:55.373Z","publishedAt":"2026-03-25T11:48:58.134Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://chatty-staple-007224.framer.app/","price":"5","paymentUrl":"https://uxarya.lemonsqueezy.com/checkout/buy/aeb0e851-125a-40d7-b995-d73fe5367305","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"w5js6IqP2kDBuwrUgmWI","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-25T11:48:58.134Z","updatedAt":"2026-03-25T11:48:58.134Z","reported":false}}],"$L60"]

Suggested for you