Click the pane to shatter it where you hit. Radial and ring cracks split it into convex shards, bonds between neighbouring shards decide what stays in the frame, and loose pieces fall in fake 3D.
Cracks fan out from the impact, and each wedge between two of them gets its own uneven rings, dense near the centre and sparse further out. Every cell of that pattern is convex, so each shard is the glass clipped to a cell with Sutherland–Hodgman, and every shard stays convex. That is what lets you shatter a shard again with the same code.
Neighbouring shards are bonded along their shared edges, with strength proportional to the edge length, and edge shards are bonded to the frame. The impact breaks bonds with a chance that falls off with distance. A breadth-first search from the frame finds every shard still connected; the rest fall, and weakly held shards creak loose after a moment. A shard held along a single line bends there like a damped spring: Smash pushes the glass back, bent shards stay hanging tilted, and one bent too far with enough force snaps off, sometimes tearing away the shard it hung from. Turn on Show bonds to watch it.
A falling shard becomes a flat rigid body with a 3D position, velocity and rotation matrix. Each corner is projected with a single perspective divide, p' = c + (p − c)·f / (f + z), so shards foreshorten as they tumble. A shard glints when it faces the light, bounces on the floor plane, shatters again if it lands hard, and settles flat.
I first built procedural glass shattering in Luau for Roblox, fracturing a pane with concentric rings and radial cracks and rebuilding every shard as its own EditableMesh. This web version keeps the fracture idea and adds the bond network and falling shards, drawn with nothing but white lines on a 2D canvas: settled glass is cached in an off-screen layer, so each frame only redraws the shards in the air, and the page stops drawing entirely once everything is still.