Tree Fractal with SVG

A tree fractal using SVG circles. The mouse position determines the number of iterations (left-right) and the branch angle (up-down). 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.

You can buy prints of this graphic (with 786,411 circles!).

See also the broken version.

Built with blockbuilder.org

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>fractal</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style> body: { margin: 0px }</style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>
      
      var svg = d3.select("svg"),
          width = svg.attr("width"),
          height = svg.attr("height"),
          elementCount = svg.append("text")
            .attr("x", width / 2)
            .attr("y", height - 20)
            .attr("text-anchor", "middle")
            .attr("fill", "gray"),
          format = d3.format(","),
          nMax = 120,
          mouseX = 800,
          mouseY = 200,
          scaleFactor = 0.96;
      
      function redraw (){
        var scale = 14,
            angle = -mouseY / height * Math.PI / 8,
            n = Math.floor(nMax * mouseX / width),
            up = Math.PI; 
        render(fractal(width/2, height - 136, up, scale, angle, 0, n, false));
      }
      
      function fractal(x, y, direction, scale, angle, i, n, flip){
        
        var circle = [{
          x: x,
          y: y,
          radius: scale / 2
        }];
        
        if(i < n){
          if(i % 11 === 0){
            return circle
              .concat(fractal(x, y, direction, scale, angle, i+1, n, flip))
              .concat(fractal(x, y, direction, scale, angle, i+1, n, !flip));
          } else {
            return circle.concat(
              fractal(
                x + Math.sin(direction) * scale,
                y + Math.cos(direction) * scale,
                direction + angle * (flip ? 1 : -1),
                scale * scaleFactor,
                angle,
                i+1,
                n,
                flip
              )
            );
          }
        }
        return circle;
      }
      
      function render(data){
        var circles = svg.selectAll("circle").data(data);
        circles
          .enter()
            .append("circle")
          .merge(circles)
            .attr("cx", function (d){ return d.x; })
            .attr("cy", function (d){ return d.y; })
            .attr("r", function (d){ return d.radius; });
        circles.exit()
            .remove();
        
        elementCount.text(format(data.length) + " SVG Circle elements");
      }
      
      redraw();
      document.addEventListener("mousemove",function(e){
        mouseX = e.x;
        mouseY = e.y;
        redraw();
      });
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js