Tree

Press the tree · hold to keep shaking

The tree is a 123×90 grid of strings, one character per pixel, drawn as runs of <rect>s in an SVG. To shake it, each row shifts sideways by whole pixels, more near the top, so the canopy sways while the roots stay put.

Each leaf gets a random branch, fall time, sway and colors from Math.random(), passed into CSS custom properties. @keyframes handle the fall and the sway, and rotate() with steps(4) turns leaves in quarter turns so they stay on the pixel grid.

Pointer events start a shake on press, and a setInterval keeps it going while held.