Neural networks, explained by building one

Neural Playground is a free, hands-on introduction to how neural networks actually work. You invent a small alphabet of characters that have never existed, draw them by hand, and train a neural network to read your handwriting — entirely in your browser, with every number visible at every step.

It is built for people who have never trained a model before. There is no calculus, nothing is hidden behind a library, and every term is demonstrated before it is named.

The problem it starts from

Five people write the letter a. How would a computer know they are the same letter? Storing one picture and comparing fails, because no two are alike. Writing rules fails too, because you can recognise an a instantly and cannot say how — and you cannot write down a rule you cannot explain. A neural network takes the opposite approach: it is never told what the letter looks like, only shown examples, and it works out its own numbers by being wrong over and over.

What you build, stage by stage

1. The problem — why handwriting cannot be recognised with rules.
2. Your alphabet — invent characters and draw a dataset of your own.
3. Into numbers — a grid laid over each drawing turns it into 256 numbers, with runnable Python.
4. The network — every character gets a scorecard: one number per square saying how much ink there counts for or against it.
5. How wrong is it? — softmax turns scores into percentages, and cross-entropy loss turns a mistake into one number.
6. Learning — gradient descent, stated without calculus: where there was ink, push the right character's scorecard up and the wrong ones' down, in proportion to how badly you missed.
7. The whole loop — the six stations of training as a single circuit you can step around.
8. Read my writing — draw something it has never seen and watch it read your handwriting.
9. Break it — starve it, lie to it, and reach in and move a weight by hand, to see how it fails.
10. More layers — a real two-layer network, and backpropagation shown as blame travelling backwards.

What it teaches

Weights and parameters, how images become numbers, the forward pass, softmax, cross-entropy loss, gradient descent, the learning rate, overfitting and held-out data, ReLU, hidden layers, and backpropagation. Each stage includes an editable Python notebook running real NumPy in the browser, so you can change the code and run it against your own drawings. The equivalent PyTorch is shown alongside, so that nn.Linear, nn.Parameter, loss.backward() and optimizer.step() each map onto something you have already watched happen.

Honest about its limits

The network is a single linear layer, chosen so that its weights stay viewable as pictures. That means it does not, by itself, demonstrate backpropagation — so a later stage builds a genuine two-layer network instead of pretending. Where an experiment fails to break the network, the site says so and explains why rather than faking the result.

It is free, open source under the MIT licence, and the source is at github.com/anirudh-valyx/neural-playground. Nothing you draw leaves your browser.

Enable JavaScript to use the interactive version, which is the point of it.