mouseover-moire

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

line{
  stroke: black;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500;

var basesvg = d3.select('svg')

var g1 = basesvg.append("g")
var g2 = basesvg.append('g')

basesvg.append('rect')
    .attr({width: width, height: height})
    .style('fill-opacity', 0)
    .on('mousemove', function(){
      var pos = d3.mouse(this)
      moire(pos[1])
      g2.attr('transform', 
        'rotate(' 
        + -Math.atan((pos[0] - width/2)/(pos[1] - height/2))*180/Math.PI 
        + ' ' + width/2 
        + ' ' + height/2 + ')')
    })

function moire(numPoints){
  var x = d3.scale.linear()
      .domain([0, numPoints])
      .range([-width, width*2])

g1.html('').call(addLines)
  g2.html('').call(addLines)

function addLines(selection){
    selection.selectAll('pat-line')
        .data(d3.range(numPoints)).enter()
      .append('line')
        .attr('x1', x)
        .attr('x2', x)
        .attr({y1: -width, y2: width*2})

selection.selectAll('pat-line')
        .data(d3.range(numPoints*2)).enter()
      .append('line')
        .attr('y1', x)
        .attr('y2', x)
        .attr({x1: -width, x2: width*2})
  }
}
moire(40)

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

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