fibonacci coloring

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    var radius = 5,
        off = 100+radius,
    		svg = d3.select("body").append("svg")
    						.append('g').attr('transform', 'translate('+off+','+off+')'),
        lineG = svg.append('g'),
        circ1 = svg.append("circle")
    						.attr({
                  cx: 0, cy: 0, r: radius
                })
    						.style('fill', 'steelblue');

function fibTween(a,b,i) {
      setTimeout(function () {
        var c = a+b,
          Lab = { l: c%100, a: a%200, b: b%200 };
        Lab.a -= 100;
        Lab.b -= 100;
        var next = (c%200) - 100;

svg.append('line')
          .attr({x1: Lab.a, x2: Lab.b, y1: Lab.b, y2: next})
          .attr('stroke', d3.lab(Lab.l, Lab.a, Lab.b))
          .attr('stroke-width', 1);

circ1.transition().duration(1667)
         		.attr('cx', Lab.a).attr('cy', Lab.b)
            .style('fill',d3.lab(Lab.l, Lab.a, Lab.b))
         		.each('end', function() {
              console.log('hi');
           		
            });
         		
        if(i == 78) fibTween(1,1,0); // Number overflow
        else fibTween(b, c, i++);
      }, 1000);
    }
		fibTween(1,1,0);
    
    
//     svg.append("rect")
//       .attr({x: 100, y: 10, width: 700, height: 480})
//       .style({ fill: "#a72d1a"})
//       .transition().duration(3000).ease("bounce")
//       .style({ fill: "#5db9e3"})

console.log("you are now rocking with d3", d3);
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js