spirals! by trinary

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .spiral {
      fill: none;
      stroke: #ccc;
      stroke-width: 2px;
    }
  </style>
</head>

<body>
  <script>
    let scale = d3.scaleLinear().domain([0,400]).range([0,1]);
    let svg = d3.select("body")
      .append("svg")
      .attr("width", 960)
      .attr("height", 500);

    let center = svg.append("g")
      .attr("transform", "translate(540, 250)");

    let spiralify = function(elem, curve, color, i) {
      if (i >= Math.abs(360 / curve)) { return;}

      let current = elem.select("rect");
      let next = elem.append("g")
        .attr("transform", "rotate(" + curve + ")");
      next.append("rect")
        .classed("spiral", true)
        .attr("x", current.attr("x"))
        .attr("y", current.attr("y"))
        .attr("width", current.attr("width"))
        .attr("height", current.attr("height"))
        .style("stroke", color);
      spiralify(next, curve, color, i + 1);
    }

    let dragStart = function(d) {
      let container = center.append("g")
        .classed("container", true)

      let diagDistance = Math.sqrt(Math.pow(d3.event.x - 540, 2) + Math.pow(d3.event.y - 250, 2));
      let color = d3.interpolateCool(scale(diagDistance));

      let rect = container.append("rect")
        .classed("spiral", true)
        .classed("dragging", true)
        .attr("x", d3.event.x - 540)
        .attr("y", d3.event.y - 250)
        .attr("width", 0)
        .attr("height", 0)
        .style("stroke", color);
    };

    let dragMove = function(d) {
      let diagDistance = Math.sqrt(Math.pow(d3.event.x - 540, 2) + Math.pow(d3.event.y - 250, 2));
      let color = d3.interpolateCool(scale(diagDistance));

      let rect = center.select(".dragging");
      rect
        .attr("width", d3.event.x - d3.event.subject.x)
        .attr("height", d3.event.y - d3.event.subject.y)
        .style("stroke", color);
    };

    let dragEnd = function(d) { 
      let diagDistance = Math.sqrt(Math.pow(d3.event.x - 540, 2) + Math.pow(d3.event.y - 250, 2));
      let color = d3.interpolateCool(scale(diagDistance));

      let rect = center.select(".dragging");
      let container = d3.select(rect.node().parentNode);
      spiralify(container, Math.random() * -20, color, 0);
      center.selectAll(".dragging").classed("dragging", false);
    }

 		let drag = d3.drag()
    	.on("start", dragStart)
    	.on("drag", dragMove)
    	.on("end", dragEnd);

    svg.call(drag);

  </script>
</body>
spirals!

Click and drag!

index.html
