A generative network in pure CSS

Every cell of the map is a point in a 2D latent space. A 2→32→64→256 decoder (18,848 integer weights) draws the digit that lives there, using only @property, calc() and :has(). 0 bytes of JavaScript.

Move over the map, click to pin.Tap anywhere on the map.Colour: digit found there
x y

Nothing here is stored as an image. Each of the 16×16 pixels is recomputed from the two coordinates every time you move, so the map also shows digits between digits: walk from a 7 to a 9 and watch it bend.

Inside the decoder

Every cell below is a CSS custom property, recomputed by the browser each time the position changes.

Position2 numbers
Hidden layer 132 ReLU units
Hidden layer 264 ReLU units
Pixels16×16 hard sigmoid