5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T622,

Logo Extrude 3D turns an SVG logo into a bevelled 3D object: upload an SVG file or paste its code, and its filled shapes, holes included, are extruded, centred and fitted to the frame.

Pick Chrome, Glass, Clay, Gold or Holographic, or your own colour, roughness and metalness; reflections are built in code, so no image files are downloaded.

It turns around Y or X or with a wobble, can be dragged with inertia or turned by page scroll, draws nothing while still or off screen, and shows a flat logo on the canvas and where WebGL is unavailable.

Depth and bevel scale with the logo, so they look the same at any SVG size.

Reads paths (arcs included), rects, circles, ellipses, polygons and polylines, with group transforms and both fill rules.

Under reduced motion, auto-rotate and scroll turning are off; dragging still works.

What you control

SVG file or SVG code; depth (1–80 %), bevel (0–8 %), bevel steps (1–10)

Material preset or Custom (colour, roughness, metalness); light (0–3)

Auto rotate with speed (0–180 °/s) and axis (Y, X, Wobble); drag; scroll turn with scroll angle (10–720 °)

Transparent or background colour, padding (0–200 px), scale (10–400 %), accessible label

Limits: only filled shapes are extruded (no strokes, text, gradients or images), shapes painted over others, such as white knock-outs, become solid, the whole logo uses one material, and an SVG file is only read when it is uploaded to Framer (other hosts are ignored; paste the SVG code instead).

5a:[["$","$L5d",null,{"post":{"id":"01a0e3f4-3894-7636-b016-e1db7ad8147e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qath1iMa4RaxyJ44N9DV","resolved":true,"title":"Logo Extrude 3D","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo Extrude 3D turns an SVG logo into a bevelled 3D object: upload an SVG file or paste its code, and its filled shapes, holes included, are extruded, centred and fitted to the frame."}]},{"type":"paragraph","content":[{"type":"text","text":"Pick Chrome, Glass, Clay, Gold or Holographic, or your own colour, roughness and metalness; reflections are built in code, so no image files are downloaded."}]},{"type":"paragraph","content":[{"type":"text","text":"It turns around Y or X or with a wobble, can be dragged with inertia or turned by page scroll, draws nothing while still or off screen, and shows a flat logo on the canvas and where WebGL is unavailable."}]},{"type":"paragraph","content":[{"type":"text","text":"Depth and bevel scale with the logo, so they look the same at any SVG size."}]},{"type":"paragraph","content":[{"type":"text","text":"Reads paths (arcs included), rects, circles, ellipses, polygons and polylines, with group transforms and both fill rules."}]},{"type":"paragraph","content":[{"type":"text","text":"Under reduced motion, auto-rotate and scroll turning are off; dragging still works."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"SVG file or SVG code; depth (1–80 %), bevel (0–8 %), bevel steps (1–10)"}]},{"type":"paragraph","content":[{"type":"text","text":"Material preset or Custom (colour, roughness, metalness); light (0–3)"}]},{"type":"paragraph","content":[{"type":"text","text":"Auto rotate with speed (0–180 °/s) and axis (Y, X, Wobble); drag; scroll turn with scroll angle (10–720 °)"}]},{"type":"paragraph","content":[{"type":"text","text":"Transparent or background colour, padding (0–200 px), scale (10–400 %), accessible label"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: only filled shapes are extruded (no strokes, text, gradients or images), shapes painted over others, such as white knock-outs, become solid, the whole logo uses one material, and an SVG file is only read when it is uploaded to Framer (other hosts are ignored; paste the SVG code instead)."}]}]},"introduction":"Your SVG logo, extruded in 3D","slug":"logo-extrude-3d","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b2-57e1-7331-8e62-c74574f3a14d.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T17:40:27.771Z","updatedAt":"2026-10-03T08:20:29.912Z","publishedAt":"2026-09-27T17:40:27.767Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/logo-extrude-3d","price":"12","paymentUrl":"https://payhip.com/b/80N6f","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"e8gAQMmJFs3VcKlHLgsw","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-09-27T17:40:28.436Z","updatedAt":"2026-09-27T17:40:28.436Z","reported":false}}],"$L5f"]

Suggested for you