Make Your Own Fractal Tree!

Using the parameters below you can grow your own trees using fractals (well, approximately a fractal). The tree is generated by starting with a trunk of a certain length and then adding two branches that split off at a specified angle and length that is a ratio of the trunk. We continue adding these split branches for every branch that is drawn, up to a certain depth. If you were to repeat this process, as the limit approached inifity, you would have a set of numbers that were of a fractional dimension and had a self-repeating structure. Namely, a fractal set.

Below, I provide access to some parameters so that you can draw one of your own trees by: (1) controlling the number of layers you compute, (2) changing the length ratio of the branches to their parent branch, and (3) shifting the angles where the branches emerge. You can also set the width and length of the trunk, which will change the look of your whole tree (making it thicker and taller). You also have a color choice. The branches get filled in on a color spectrum where the starting color is your trunk's hue and the ending color is your leave's hue. Lastly, I made some little flower buds that you can add. The code is all done in JavaScript's D3 library, and can be found on my GitHub.

Suggesions on Parameters

I advise keeping tree depth under 20. The computations grow O(2^n) so your browser can crash if you push it. By about 15 you'll notice a serious slowdown. The length ratios are really nice in the .6-.8 range, and quickly become impossible to render for values greater than 1 (if you do want to go big, I'd take my code and re-render it with a bigger canvas). Width of trunk looks pretty natural between 10-20 (pixels) and the height 100-300. The colors need to be specified in hex (e.g., "#FF0000" = red). If you need help finding colors you can try this or this. I recently also added the ability to add some randomness into your branch angles (+/- 10 degrees).

Start off by hitting submit to see the basic tree then start playing around and see what you find. You may need to scroll down to see the tree because I had to use a pretty large canvas to support the range of tree sizes. While the suggestions above are starters, you'll find some beautiful behavior in other ranges. Have fun!


Tree Depth:

Line Ratio 1:

Line Ratio 2:

Angle 1:

Angle 2:

Width of Trunk:

Length of Trunk:

Trunk Color

Leaf Color

Add random flowers?
yes no
Add randomness to angles?
yes no