L-System Animation

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/danbgray/723bbd3a37053ba2bfaf96fd2fdfee00/raw/b8021f882b56d83e857ab56b228903e79e46f428/lsystem.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
<script>
  /* The Seed / for Pascal's Tree */
  v = ["0","1"];
  w = "0";
  P = {"1":"11","0":"1[0]0"};
  levels = 6;

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)

interval = 1000/30;
  angle = Math.PI/4;
  angle2 = Math.PI/-4;
  L=4
  
  position = [422,380];
  w = G(v,w,P,levels); 
  path = drawToPath(position, w, L, -Math.PI/2, angle,angle2);
  tree = svg.append("svg:path")
     .attr("d",path)
     .style("stroke-width","1")
     .style("stroke","black")
     .style("fill","none");
  
  var animate = function() {
    path = drawToPath(position, w, L, -Math.PI/2, angle,angle2);
    tree.attr("d", path);
    console.log(path);
    angle+=Math.PI/291;
    angle2-=Math.PI/224;
  }
  
  setInterval(animate,interval);
  
  svg.append("text")
    .text(w)
    .attr("y", 0)
    .attr("x", 0)
    .style("font-size", 8)
    .style("font-family", "monospace");

</script>
</body>

Updated missing url https://cdn.rawgit.com/danbgray/723bbd3a37053ba2bfaf96fd2fdfee00/raw/b8021f882b56d83e857ab56b228903e79e46f428/lsystem.js to https://cdn.jsdelivr.net/gh/danbgray/723bbd3a37053ba2bfaf96fd2fdfee00/raw/b8021f882b56d83e857ab56b228903e79e46f428/lsystem.js

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

https://cdn.rawgit.com/danbgray/723bbd3a37053ba2bfaf96fd2fdfee00/raw/b8021f882b56d83e857ab56b228903e79e46f428/lsystem.js