Café wall illusion

<!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; font-family:Verdana, Geneva, sans-serif;}
    button {
    	position: absolute;
      padding: 12px;
      top: 0;
      left: 0;
    }
    
    
    svg line.grid {
      stroke: black;
      stroke-width: 1px;
    }
    svg * {
      transition: all 600ms ease-in-out;
    }
    svg[reveal] line.grid {
      stroke: red;
    }
    svg[reveal] g.tile-group {
      opacity: 0.22
    }
  </style>
</head>

<body>
  <button>Are these lines crooked?</button>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960,
        height = 500,
        svg = d3.select("body").append("svg")
      		.attr("width", width)
      		.attr("height", height),
        tileWidth = width / 12,
        tileHeight = height / 12,
        yTicks = d3.range(-0.5, height-1, tileHeight),
        tileOffsets = d3.range(0,12).map(function(d) {
          return Math.sin(Math.PI * (d / 4)) * tileWidth;
        });
    
    svg.selectAll('.grid').data(yTicks).enter()
      .append('line').attr('class', 'grid')
        .attr('x1', 0).attr('x2', width)
        .attr('y1', function(d) { return d; })
        .attr('y2', function(d) { return d; });
    svg.selectAll('.tile-group').data(yTicks).enter()
       .append('g')
       .attr('class', 'tile-group')
       .attr('transform', function(d, ndx) {
         return 'translate('+(tileOffsets[ndx] - 10)+','+d+')' });

svg.selectAll('.tile-group').selectAll('rect')
      .data(function(d) { return d3.range(-1,7); })
    	.enter().append('rect')
        .attr('x', function(d) { return d * tileWidth * 2; })
        .attr('width', tileWidth)
        .attr('height', tileHeight);
    
    d3.select('button').on('click', function() {
			svg.attr('reveal', svg.attr('reveal') === '' ? null : '');
    });

</script>
</body>

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