Fibonacci Spiral (for d3.unconf badge)

Built with blockbuilder.org for d3.unconf badge.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var width = window.innerWidth || 960,
    		height = window.innerHeight || 500,
        transitionMs = 3100,
        cx = width * 0.726,
        cy = height * 0.405,
        dAttr = "m" + cx + "," + cy,
				dAttrSquare = dAttr,
        iterations = 13,
        scale = width * 0.01815,
        svg = d3.select("body").append("svg")
      		.attr("width", width)
      		.attr("height", height);
    
    // generated with https://tristen.ca/hcl-picker/#/hlc/6/1/15534C/E2E062
    var palette = "#375D65,#396F6F,#408175,#4E9377,#64A476,#80B473,#A2C36F,#C7D06D,#F0DB70,white,white".split(",").reverse();

// calculate fib sequence and update path attr, build background <rect> 
    // from an old old blog post: https://www.bytemuse.com/post/fibonacci-spiral/
    var x = 0, y = 1, z = 1,
        radius, dx, dy, temp;
    for(var iter = 2; iter < iterations; iter++) {
    	radius = x * scale;
  		dx = iter % 4 < 2 ? radius : -radius;
  		dy = (iter + 1) % 4 < 2 ? radius : -radius;
  		dAttr += "a"+radius+","+radius+" 0 0 0 " + dx + "," + dy;
      x = y;
      y = z;
      z = x + y;
      
      dAttrSquare += " l"+dx+","+dy;
      
      svg.append('rect')
      	.attr('x', dx < 0 ? (cx + dx) : cx)
				.attr('y', dy < 0 ? (cy + dy) : cy)
      	.attr('width', Math.abs(dx))
      	.attr('height', Math.abs(dy))
      	.style('stroke', '#ccc')
      	.style('stroke-width', '4px')
        .style('fill', palette[(iter-2) % palette.length])
      	.style('opacity', 0.5)
        .transition()
      		.delay((iter - 2) * (transitionMs / 14))
      		.duration(300)
      		.ease('cubic-in')
      		.style('opacity', 1);

cx += dx;
      cy += dy;
    }
    
    var pathSquare = svg.append('path')
      .attr('d', dAttrSquare)
    	.style('fill', 'none')
    	.style('stroke', 'white')
    	.style('stroke-width', '3.5px')
    	.style('stroke-dasharray', '12 12');
    var path = svg.append('path')
      .attr('d', dAttr)
    	.style('fill', 'none')
    	.style('stroke', 'white')
    	.style('stroke-width', '4.5px');

var length = path.node().getTotalLength();
    path.attr('stroke-dasharray', length + ' ' + length)
    	.attr('stroke-dashoffset', length)
    	.transition()
      	.duration(transitionMs)
      	.ease('cubic-in')
      	.attr('stroke-dashoffset', 0);
  </script>
</body>

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