Rotating tiles

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta http-equiv='X-UA-Compatible' content='ie=edge'>
  <style type='text/css'>
    svg {
      width: 500px;
      height: 500px;
    }
  </style>
  <title></title>
</head>

<body>
  <svg></svg>
</body>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://d3js.org/d3-timer.v1.min.js'></script>
<script>
  var svg = d3.select('svg')
  var d = 50
  var interpolateEven = d3.interpolateRgb("#f7fcb9", "#006837");
  var interpolateOdd = d3.interpolateRgb("#006837", "#f7fcb9");

for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 5; j++) {
      var rects = svg.append('rect')
        .attr('x', (i % 2 == 0 ? j * 2 * d : j * 2 * d + d))
        .attr('y', i * d)
        .attr('width', d)
        .attr('height', d)  
        .attr('class', (i % 2 == 0 ? 'even' : 'odd'))               
    }
  }
  
  var i = 0
  var t = d3.interval(function(elapsed) {
    var row
    d3.selectAll('rect')
      .attr('transform', function() {
        var x = parseInt(this.attributes.x.value) + d/2
        var y = parseInt(this.attributes.y.value) + d/2
        return 'rotate(' + i + ', ' + x + ', ' + y + ')'
      })
      .style("fill", function() {
        var clas = this.attributes.class.value
        return (clas === 'even' ? interpolateEven(i%360/360) : interpolateOdd(i%360/360))
      });
    i = i + 1;
  }, 50);
  </script>
</html>

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

https://d3js.org/d3-timer.v1.min.js