This demo renders three-dimensional L-systems using Three.js. You can change the L-system’s axiom and production rules  using the drop-down menu. These production rules govern the growth of the L-system according to the alphabet listed below.

f : create branch
l : create leaf
[ and ] : start/end of a local area/branch
+ and - : rotate the branch right/left in x-axis
^ and v : rotate the branch up/down in y-axis
<> : twist the branch left/right in z-axis

You can also change the L-system’s constants (iterations, angle, branch parameters) or choose from an example using the drop-down menu.

Once you’re finished making changes you can render the L-system using the “Press to render” button in the drop-down menu.