A classifier that trains itself in pure CSS

Place red and blue points. The page doesn't ship any weights: it ships the training rule, and the browser's style engine runs all 24 epochs every time a point changes, using only @property, calc(), clamp() and :has(). 0 bytes of JavaScript.

Click to place a point of the brush colour, click it again to remove it.Tap to place a point of the brush colour, tap again to remove it. Try a circle, or four corners.

Place a few red and blue points.

Wrong points, epoch by epochpick one

0epoch24

Weights at that epoch

1
x
y
x²
y²
xy

How the CSS trains

Every point gets six features: 1, x, y, x², y² and xy. The squared terms let the boundary curve into a circle, and xy lets it split four corners. The weights start at 0, and each epoch every point checks its score:

score = w·(45, 9x, 9y, x²−33, y²−33, xy) update = colour if colour × score ≤ 3000 // wrong, or too close to the line w = w + Σ update × features / 15 // every point at once, all integers

Each line is a calc() over registered <integer> properties, written out 24 times: 5,186 properties that the browser recomputes on every click. The "≤" is a clamp(0, …, 1) step. The background is the model after the epoch you pick, scored again cell by cell. This is a perceptron, the 1958 ancestor of today's networks: one layer, trained the same way, with a margin.