<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { margin: 0px; }
svg { margin: 20px; height: 2000px; width: 4000px; }
.arrow {
  fill: none;
  stroke: black;
}
</style>
<body>

  <svg>
    <rect x="250" y="250" width="50" height="50" fill="#000000"/>
  </svg>

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="../swoopyarrows.js"></script>

  <script>

    var svg = d3.select("svg");

    // set up new arrow
    swoop = swoopyArrow()
      .from(d3.select("rect"))
      .degrees(90)
      .clockwise(false);

    // on mousemove, update to run from page element to cursor
    d3.select("html").on("mousemove", function(e) {
      swoop.to(d3.mouse(this)).degrees(swoop.degrees()-1);
      svg.call(swoop);
    });

  </script>

</body>
</html>

<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { margin: 0px; }
svg { margin: 20px; height: 2000px; width: 4000px; }
.arrow {
  fill: none;
  stroke: black;
}
</style>
<body>

  <svg>
    <rect x="250" y="250" width="50" height="50" fill="#000000"/>
  </svg>

  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="../swoopyarrows.js"></script>

  <script>

    var svg = d3.select("svg");

    // set up new arrow
    swoop = swoopyArrow()
      .from(d3.select("rect"))
      .degrees(90)
      .clockwise(false);

    // on mousemove, update to run from page element to cursor
    d3.select("html").on("mousemove", function(e) {
      swoop.to(d3.mouse(this));
      svg.call(swoop);
    });

  </script>

</body>
</html>

Revert "experimenting with "stretch" effect that doesn't really work"
Revert "experimenting with "stretch" effect that doesn't really work"

This reverts commit f8c7652b344423dda95e56aa9ce85743c8fe5a7c.
