Sculptures: 3D icons from flat SVG

Each service on this site has an object: a few flat shapes, stacked in CSS 3D until they read as solid. No WebGL, no images — just SVG layers, custom properties and a little JavaScript for the pointer.

Why SVG and CSS

Why not WebGL or rendered images? Each object is a few shapes in a PHP array, so it weighs next to nothing, stays sharp at any size and is edited like any other markup — no 3D tool, no export step. There’s no canvas or GPU context per icon, so eight of them can share a page and a menu. They take the site’s colours and respect its preferences — reduced motion, forced colours — and one attribute hides them from screen readers.

The trade-off is honesty about what they are: stacked layers read as solid from the angles used here, not from every angle, and the lighting is a convincing trick rather than physics.

Three ideas doing the work

1. Stack a flat SVG shape up to fourteen times, each copy pushed back in depth: from the side, the stack reads as a solid.
2. Shade each layer by its depth (--t, back to front), so the sides darken away from you. The front layer gets the face and a sheen.
3. Move pieces on their wrappers, fade them on their layers: opacity on any ancestor flattens the 3D into a picture.

The full set

Eight objects, one per page. Each entrance tells its service’s process: a wireframe becomes an interface, an unreadable page comes into focus and gets its tick, two links arrive already joined. “Replay” runs it again.

Try every prop

The playground has every object and every prop — turntable, shadow, entrance, drift, light — switched live, beside the call that reproduces each setup. Open the playground.