Starting…

Raking Light

Flat SVG goes in. Paint order becomes height, and WebGPU bevels it, works out ambient occlusion, and lights it with soft shadows. Drag the stage to move a light.

Source Card

Paste SVG markup

Each overlapping shape sits one step higher than the one under it, so the drawing's own stacking becomes the terrain. Photos use brightness instead.

Lighting setup

Lights

Orbit the key light

Relief

Deboss (press shapes into the surface)

Surface

Room

Wall behind the piece

No wall: keep only the shadows (transparent PNG and embed) Compare with the original (drag the divider)

Use it

Embed it live on any page as a <raking-light> element with these settings. In the embed the key light can

The element shows the plain SVG where WebGPU is missing, and holds the light still for people who ask for reduced motion.