Fan Flower Power

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #222;
  margin: auto;
  width: 960px;
}

</style>
<canvas width="960" height="960"></canvas>
<script src="//d3js.org/d3.v4.0.0-alpha.21.min.js"></script>
<script>

var canvas = d3.select("canvas"),
    width = +canvas.attr("width"),
    height = +canvas.attr("height"),
    ctx = canvas.node().getContext("2d");

var point = [width / 2, height / 2];
var lastMouse = [width / 2, height / 2]

var space = 20;
var dx, dy, dist;
var color;
var colorX = d3.scaleLinear().domain([0, width]).range([0, 360]);
var colorY = d3.scaleLinear().domain([0, height]).range([0, 1]);
var rot = d3.scaleLinear().domain([Math.PI, -Math.PI]).range([0, 360]);
var thickness = d3.scaleLinear(19).domain([0, Math.sqrt(width*width + height*height)]).range([20, 2]);

var satScales = [
  d3.scaleLinear().domain([0, Math.max(width / 2, height / 2)]).range([1.0, 2.0]),
  d3.scaleLinear().domain([0, Math.max(width / 2, height / 2)]).range([50, 0]),
];

var last = [0.5, 0.9];
var methods = [d3.cubehelix, d3.hsl];

var i = 1;
var rotated = 0;

function draw() {
  ctx.clearRect(0, 0, width, height);
  for (var x = 0; x < width; x += space) {
    for (var y = 0; y < height; y += space) {
      dx = x - point[0];
      dy = y - point[1];

theta = Math.atan2(dy, dx);
      dist = Math.sqrt(dx*dx + dy*dy);

ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + Math.cos(theta)*20, y + Math.sin(theta) * 20);
      ctx.strokeStyle = methods[i](rot(rotated + theta), satScales[i](dist), last[i]).toString();
      ctx.lineWidth = thickness(dist);
      ctx.stroke();
    }
  }
}

draw();

function update() {
  rotated -= 0.02;
  draw();
  requestAnimationFrame(update);
};

requestAnimationFrame(update);

canvas.on("mousemove", function() {
  point = d3.mouse(canvas.node());
  var movedX = point[0] - lastMouse[0];
  var movedY = point[1] - lastMouse[1];
  var moved = Math.sqrt(movedX*movedX + movedY*movedY);
  rotated += moved / 100;
  lastMouse = point;
});

canvas.on("mousedown", function() {
  i = (i + 1) % 2;
  console.log(i);
});

</script>

https://d3js.org/d3.v4.0.0-alpha.21.min.js