10 Canvas Snippets: Fractals, Physics, and Procedural Art From Scratch
10 free canvas snippets - fractal trees, Verlet rope physics, N-body gravity, Perlin noise terrain, and more - built with hand-rolled math.
10 Canvas Snippets: Fractals, Physics, and Procedural Art From Scratch
Every effect in this batch is drawn by hand-rolled math against the Canvas 2D API — no WebGL, no physics engine, no noise library. A fractal tree is one recursive function calling itself twice. A rope is Verlet integration with an iterative constraint solver. A lightning bolt is the same midpoint-displacement algorithm used to generate fractal coastlines, aimed at a click point instead of a landscape. None of it is faked with a canned particle sprite or a CSS animation standing in for the real computation — the algorithm is genuinely running, which is exactly what makes each one worth reading the source of, not just dropping in. Below are ten free, self-contained snippets spanning recursive drawing, from-scratch Perlin noise, N-body gravity, and a few honest tricks — a CSS blur doing the work a shader normally would, a nearest-neighbor upscale turning a blur into a crisp pixelated look instead. Every one is a live, interactive preview you can try right here in the article, and each exp…
