Broken Screen Simulator

Cracked glass drawn with the geometry real fractures follow, plus bleeding LCD and dead pixel modes. Tap to add impacts. Escape exits immediately.

How to use it

1. Pick a damage type. Shattered glass is the full pattern; single impact is one clean strike.
2. Choose a background, or load your own photo.
3. Tap or click the preview anywhere to add another impact.
4. Press Start. Press Escape whenever you want out.

Glass breaks in two directions at once

This is the fact that separates a convincing cracked screen from a drawing of one, and almost every version online gets it half right.

Glass fractures radially from the impact point — lines running outward like spokes. It also fractures concentrically — rings joining those spokes at intervals. Draw only the radials and you get a starburst, which reads as a cartoon explosion. Draw only the rings and you get a spider web, which reads as a Halloween decoration. Real tempered glass has both, and the interaction between them is what the eye recognises.

Two more details matter as much:

The rings are not circles. Each vertex sits off the ideal radius by up to a quarter, because a fracture follows the weakest path through the material rather than a compass arc. A perfect circle is never what glass does.

The radials are not evenly spaced. Twelve spokes at thirty degrees each is the immediate sign of a generated pattern. Each spoke here takes a jittered angle, its own length, and a slight wander along its path, so no two reach the same distance and the gaps between them are all different.

Cracks taper, and they lift

A fracture is widest at the impact and thins toward its end. Uniform-width white lines are the usual shortcut, and they look like a drawing no matter how good the geometry underneath them is.

Every crack here is stroked twice: a dark under-stroke offset by a pixel, then a brighter line on top. That is what gives the crack depth and makes it visible on a white background, where a plain white line would simply vanish. The impact point itself gets a radial gradient standing in for pulverised glass, brightest at the centre.

On the shatter setting, the triangles between adjacent radials are also filled with a very slight white — alternating strength, so some shards catch the light and others do not. That is what makes the glass look lifted rather than painted on.

The other three damage types

Single impact is the same geometry with fewer spokes, one ring, and a longer reach. It is what a small stone does to a windscreen, and it is more believable than full shatter for a phone that has been dropped once.

Bleeding LCD is a different failure entirely. Liquid crystal escaping from a broken cell spreads as an irregular dark blot with iridescent edges, and it runs downward under gravity. There is no cracked glass at all in this mode — just the blot, the vertical bleed streaks, and full-height driver-line failures that flicker, which is why this is the one style that animates.

Dead pixels is the subtlest and the most technically accurate. Panel defects appear mostly as isolated single subpixels, occasionally in small clusters, in whatever colour is stuck. There is also one partial column failure, because that is the defect people actually photograph and post.

Your photo stays on your device

If you load a picture as the background, it is read into an object URL and drawn onto the canvas locally. Nothing is uploaded, the URL is released once the image has loaded, and the file never leaves the browser. It is fitted to cover the screen so it fills without distorting.

What it does not do

It cannot damage your screen, cannot write to your device, cannot block your keyboard, and cannot prevent the tab being closed. On iPhone there is no Fullscreen API, so the fallback is a fixed full-viewport overlay with the address bar visible, and the hint text says so.

Damage type reference