fractal

100%

✓ Published0🌍 Public

Last edited Oct 9, 2016

Created on Sep 17, 2016

A procedural tree fractal animates in real time as the mouse position dictates both branch angle and recursion depth. The visualization displays up to thousands of overlapping, randomly colored circles, with an on-screen counter revealing the exact number of SVG elements being rendered. Built with D3 v4, the `fractal()` function recursively computes circle positions while the `mousemove` event triggers a full redraw. This interactive example visually demonstrates how SVG rendering performance degrades as element counts increase, making the lag tangible to the user.

AI-generated description

A tree fractal using SVG circles. The mouse position determines the branch angle and number of iterations. The number of SVG elements is shown on the bottom. Using this, you can get a feel for how much animation lag is introduced when the number of SVG elements gets high. You can feel the performance limits of SVG.

Built with blockbuilder.org

Forked from a previous version that uses Canvas - Tree Fractal with Circles.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/0c8f9b30b7109dd577c6c4bd01f86979'>Tree Fractal with SVG</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/36163af1a01d41d0cd18bf6397bae774'>Tree Fractal with SVG</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/15fae5b64ea058fdbb8da3e481495eb4'>Tree Fractal with COLORS!</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fractal

This interactive SVG visualization generates a branching tree fractal composed of circles. Mouse position controls the number of recursive iterations (left-right) and the branch angle (up-down). The code builds a fractal structure recursively, then renders it by updating SVG `<circle>` elements using D3 v4’s selectors and data-merging API. A text element displays the live count of circle elements, illustrating how animation lag increases with element count. The example highlights the performance limits of SVG rendering at scale.

CCurran Kelleher

94% match

Loading thumbnail…

fractal

This example shows an interactive tree fractal that branches recursively into hundreds of thousands of circles, with the mouse position controlling the number of branches and their angle. The visualization responds to mouse movement by recalculating the fractal structure and re-rendering the SVG circles. The code uses D3 v4’s `selectAll` and `data` binding with an enter/merge pattern, but omits the `exit()` call, leaving obsolete circles in the DOM. Rendering relies on SVG `circle` elements positioned via `cx`, `cy`, and `r` attributes.

CCurran Kelleher

92% match

Loading thumbnail…

fractal

This interactive fractal experiment uses recursive circle drawing on an HTML5 Canvas to generate branching, tree-like structures. The visualization responds to mouse movement, with cursor position controlling the fractal’s scale, branch angle, and recursion depth. The code defines a `drawGeometry` function that recursively draws circles, translating and rotating the canvas context at each step, while a `flip` parameter alternates branch direction. Rendering is handled directly through the Canvas 2D API, with event listeners triggering redraws on mouse move. No external libraries are used, relying solely on native browser canvas methods like `ctx.arc`, `ctx.translate`, and `ctx.rotate`.

CCurran Kelleher

82% match

Loading thumbnail…

fractal tree d3

This example shows a procedurally generated fractal tree built from branching line segments, rendered as an animated SVG with a color gradient from black to purple based on depth. The code uses a recursive `branch()` function with randomness in angle and length to create organic variation, then draws each branch as a `<line>` element via D3’s data join. Hovering highlights parent branches in green, and the tree regenerates on click. It uses D3 v3 (via an external script) and D3 v7 (from `index.js`) for selection, transitions, and color scaling.

NNeeraj Kumar

82% 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

80% 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

78% match

Loading thumbnail…

Tree Fractal

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.

CCurran Kelleher

77% 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

76% match