Synapse
Draw two blobs of dots, press play, and watch a real neural network learn to tell them apart in real time. The backpropagation is written from scratch in plain JavaScript — no TensorFlow, no libraries, nothing uploaded.
🧠 Real backprop, 100% on your deviceInside the network
Every tile is one neuron's learned response across the plane. Edges are weights — blue pulls the answer toward B, orange toward A, thickness is strength.
What you are looking at
The coloured background is the network's opinion about every single point on the plane: blue where it predicts class B, orange where it predicts class A, and dark where it is unsure. The dots are your data. When you press Train, the network nudges its weights a few thousand times a second, and you watch the boundary bend itself around your points until it separates them. Hollow dots are a held-out test set the network never trains on, so you can catch it cheating.
How it actually learns
This is a genuine multilayer perceptron. Each layer multiplies its inputs by a matrix of weights, adds a bias, and squashes the result through a non-linearity like tanh or ReLU. The final neuron passes through a sigmoid to give a probability. To learn, it measures how wrong that probability is with cross-entropy loss, then runs backpropagation — the chain rule, applied layer by layer from the output backwards — to work out how every weight should change. An optimiser (Adam or momentum SGD) takes the step. All of it is a few hundred lines of hand-written JavaScript; there is no machine-learning library on this page.
How this runs in your browser
Nothing here is precomputed and nothing is uploaded. The matrices, the forward pass, the gradients, and the weight updates all live in your tab. The decision boundary is re-evaluated over a grid every frame by running the real network forward at each cell, and the neuron tiles are the same forward pass read one neuron at a time. Because it is so small, it trains fast enough to animate — the two-spiral dataset, famously hard for a shallow net, will crack if you give it a couple of hidden layers and a minute.
Things to try
Start on Spiral with two hidden layers and just watch. Then delete a layer and see it fail — a single layer cannot bend the boundary enough. Switch the activation to ReLU and notice the boundary becomes made of straight creases instead of smooth curves. Crank the neurons up and the noise up with zero regularisation, and watch the test-loss line peel away from the training line: that gap is overfitting. Add L2 regularisation and it closes. Finally, hit Clear and draw your own shape with the mouse, then teach the net to recognise it.
Is this a real neural network?
Yes. The forward pass, cross-entropy loss, and backpropagation are all implemented from scratch in plain JavaScript on this page, with no ML library. The boundary you see is the network's live output.
Does my data leave my device?
No. The points, the weights, and the training all run locally in your browser. Nothing is uploaded.
Why won't a single layer learn the spiral?
One hidden layer can only combine straight cuts. The spiral needs the network to build curved features out of simpler ones, which takes at least two layers. Add a layer and it works.
What is the test loss for?
Half your points are held out as a test set. If training loss keeps dropping while test loss climbs, the network is memorising rather than generalising. That is overfitting, and regularisation fixes it.
Can I export what I trained?
Yes. Export model downloads the trained weights as JSON plus a tiny self-contained predict() function you can drop into any project, no dependencies.
I build things like this every day.
Senior full-stack engineer, available for senior or contract work, fully remote. See the rest of the lab or get in touch.