🌳 Fractal Tree
Self-similarity in nature — every branch looks like a smaller version of the whole tree. Move your mouse to sway it!
Self-similarity in nature — every branch looks like a smaller version of the whole tree. Move your mouse to sway it!
This simulation draws a binary fractal tree by recursion: a trunk splits into a left and a right branch, each of which splits again, repeating until the chosen depth runs out or a branch becomes shorter than 1.5 pixels. Each child branch is rotated by its left or right angle relative to its parent and scaled by a fixed length ratio, so the whole figure is self-similar — every sub-branch is a miniature of the entire tree.
The sliders set recursion depth (3–14), the left and right branch angles (5–70°), the length ratio (0.40–0.85) and the trunk lean (-30 to 30°), while a colour-style menu maps branch depth to hue. The Wind button adds an animated sway, Random scrambles the parameters and Save exports a PNG. Such L-system-style branching models real growth in trees, river networks, blood vessels and lungs.
What is a fractal tree?
A fractal tree is a shape built by repeatedly splitting each branch into smaller branches at a fixed angle and length ratio. The result is self-similar: zoom into any branch and it resembles the whole tree. This page generates one on an HTML canvas using a recursive function.
How does the recursion actually work?
The drawBranch function draws one line, then calls itself twice — once turned left by the left angle and once turned right by the right angle. Each call shortens the branch by the ratio and lowers the depth counter by one. Recursion stops when depth reaches zero or the branch length falls below 1.5 pixels.
What do the depth and angle sliders do?
Depth (3–14) sets how many times branches split, so higher values give a fuller, more detailed tree. The left and right angles (5–70°) control how widely each fork spreads; setting them unequally produces a lopsided, more natural shape rather than a symmetric one.
The ratio (0.40–0.85) is the fraction by which each child branch is shortened relative to its parent. A low ratio makes branches shrink quickly into a compact tree, while a high ratio near 0.85 produces long, sprawling limbs that fill far more of the canvas.
Because it is self-similar across scales: the construction rule is identical at every level, so each branch is a scaled copy of its parent and ultimately of the whole tree. In the mathematical ideal of infinite depth it would have a fractional (non-integer) dimension; here depth is capped at 14 for a finite, drawable approximation.
Wind toggles a continuous animation that adds a small sinusoidal offset to each branch angle, with the sway growing toward the outer twigs so the canopy moves more than the trunk. It is a visual effect driven by a time counter, not a physical fluid simulation, but it mimics how a real tree bends in a breeze.
Moving the cursor horizontally across the canvas shifts the left and right branch angles in opposite directions around 25°, so the tree appears to lean and bend toward your pointer. Releasing this interaction lets you sweep through asymmetric shapes quickly without touching the angle sliders.
The colour menu offers Natural, Rainbow, Autumn, Neon and Snow, each mapping a branch's depth to a hue and adjusting the background gradient to match. When a branch reaches the final two levels, small translucent circles are drawn at its tip to suggest leaves or blossom, coloured to suit the chosen style.
It captures the key principle that biological branching is recursive and self-similar, which is why real trees, ferns, lungs and river deltas show fractal structure. However, it is an idealisation: real branch angles, lengths and thicknesses vary with light, gravity and genetics, whereas here every fork uses the same fixed rules.
Fractal and L-system branching is used to generate realistic plants and trees in games, films and architecture, and to model networks that must fill space efficiently — such as the bronchi in lungs, blood vessels, neurons, lightning paths and river systems. Studying these patterns helps biologists and engineers understand efficient distribution and growth.