Skip to main content
SimilarExport ZIP
100%

Tree Fractal

✓ Published12🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jun 24, 2019
Forked from Moon Calendar 2024

An interactive tree fractal drawn on a Canvas element responds to mouse movement, which controls branch length ratio and angle difference. The rendering uses raw Canvas API calls like `beginPath`, `lineTo`, and `stroke` to recursively draw branching lines to a depth of 11. High-resolution displays are supported via `window.devicePixelRatio` scaling. The example is based on HTML5 Examples and adapts its rendering for high pixel density screens.

AI-generated description

Interactive tree fractal with Canvas.

Move the mouse to change the branching!

Draws from HTML5 Examples.

Extended to use high resolution Canvas for high pixel density displays.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tree Fractal Example

An interactive tree fractal rendered on a Canvas element responds to mouse movement by altering branch length ratio and angle difference. The code uses the Canvas 2D API with `beginPath`, `lineTo`, and `stroke` to draw recursive branches up to a depth of 11. It accommodates high pixel density displays via `window.devicePixelRatio` and `c.scale`. Mouse position maps directly to the branching parameters, updating the tree in real time.

MMilan Košir
95% match
Loading thumbnail…

Fork of Tree Fractal

An interactive tree fractal rendered on Canvas, where the branching pattern changes in response to mouse movement. The visualization draws a recursive, branching structure from a central trunk, with horizontal mouse position controlling branch length ratio and vertical position controlling the angle between branches. It uses the Canvas 2D API with recursive `drawTree` calls, and accommodates high pixel density displays by scaling the canvas using `devicePixelRatio` and CSS dimensions. The code adapts an example from HTML5Examples.

KKirsten Lund
91% match
Loading thumbnail…

Fork of Tree Fractal

This interactive tree fractal responds to mouse movement. The branching angle and branch length ratio change based on the cursor's horizontal and vertical position, dynamically altering the tree's shape in real time. The visualization uses the Canvas API with `drawTree` recursion, `beginPath`, `moveTo`, `lineTo`, and `stroke` to render branches, incorporating high-resolution display scaling via `window.devicePixelRatio`. The code originates from HTML5 Examples and is adapted for high pixel density screens.

Ppkdvalis
90% match
Loading thumbnail…

Fork of Tree Fractal

An interactive tree fractal drawn on a Canvas element responds to mouse movement. The branching depth and angle of successive branches are controlled by the cursor's horizontal and vertical position, altering the fractal's shape in real time. The code uses the Canvas 2D API with `beginPath`, `lineTo`, and `stroke` to render each line, and accounts for high-resolution displays by scaling the drawing context with `devicePixelRatio`. It recursively draws branching lines from a central trunk.

SSuchayan
90% match
Loading thumbnail…

Fractal-Tree-Page

This interactive visualization displays a fractal tree that responds to mouse movement. The branching pattern changes dynamically as the user moves the cursor across the canvas. The code uses the Canvas API with high-resolution display support via `window.devicePixelRatio` and scaling. It draws recursive branches using trigonometric functions, with mouse position controlling the branch length ratio and angle difference. The tree is rendered in real-time using the `drawTree` recursive function and `stroke()` commands on the 2D context.

Sscoinhawk
89% match
Loading thumbnail…

Tree Fractal

This interactive visualization renders a branching tree fractal on an HTML5 Canvas. Mouse movement dynamically changes the branch length ratio and angle difference, altering the tree's shape in real time. The code uses the Canvas API’s `getContext('2d')`, `moveTo`, `lineTo`, and `stroke` methods to draw recursive branches. The tree structure emerges from a recursive `drawTree` function that splits into left and right branches until reaching a depth of zero, with each branch’s length and angle determined by cursor position.

Yyakupermurat
89% match
Loading thumbnail…

fractal tree

An interactive fractal tree responds to mouse movement, with branching angle and length ratio changing based on cursor position. The visualization renders a recursive binary tree structure using the Canvas 2D API, drawing line segments for 13 levels of branching. It accommodates high pixel density displays by scaling the canvas using the device pixel ratio. Mouse events trigger redraws that update branch thickness and divergence angles, creating a dynamic, explorable organic form without any external data source.

NNeeraj Kumar
89% match
Loading thumbnail…

Fork of Tree Fractal

An interactive tree fractal renders recursive branching strokes on an HTML Canvas. Mouse position controls branch length ratio and angle difference, redrawing the tree in real time as the pointer moves. The code scales the canvas by `window.devicePixelRatio` for high pixel density displays, using the Canvas 2D API’s `beginPath`, `lineTo`, and `stroke` to draw each segment. The fork extends an HTML5 Examples project, with a blue stroke color and fixed branching depth of eleven.

IIvan Ivanov
88% match