—— Pythagoras Fractal Tree ——

How It Works: See this Wikipedia page for more details on what a Pythagoras Tree is. A single square is drawn to begin with, and then a triangle is drawn on top of the square. Two additional squares are drawn with side lengths equal to the sides of the triangle, and then the process is repeated to create a fractal of cascading smaller and smaller squares.

Side Branch Angle and Top Branch Angle both control the shape of the triangles that are drawn on each square, which will greatly affect the overall shape of the tree.

Turning on Random Side Angle or Random Top Angle will make the angles of each triangle be randomized for each square, so that the entire tree will look widely different every generation.

NOTE: Manipulate Top Branch Angle with caution, as it greatly affects the shape of the tree. Likewise, keep in mind that turning on Random Top Angle will make the tree more unpredictable and chaotic in shape.

Tree Contrast affects how much brighter branches will be near the end of the tree, compared to the beginning of the tree.

If Invert Contrast is turned on, then further branches will be darker instead of brighter.

Left Branch Hue Offset and Right Branch Hue Offset both control how much the hue will change when a new square is drawn.

If Draw Triangles is turned on, then the triangles on each square will be visible, and the branches will connect more smoothly.

If Draw Wireframe is turned on, then a thin wire will be drawn connecting all of the branches of the tree.

Example Branch shows a live preview of what each branch split will look like based on the current settings.


Settings Presets:



Recursion Layers: 10


If you're seeing this text, your browser does not support the canvas element.

Initial Size: 120px

Side Branch Angle: 45°




Top Branch Angle: 90°




Tree Brightness: 120%

Tree Contrast: 50%







Initial Hue: 0°




Left Branch Hue Offset: 15°



Right Branch Hue Offset: 15°
Example Branch:









Wireframe Thickness: 10%



Wireframe Color: