Breathing square

The breathing square optical illusion. All 5 squares are the same size, however the background square appears to grow and shrink as it rotates even though its size never changes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Growing up Square</title>
  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    ul{
      list-style-type: none;
      text-decoration: underline;
      color: #34AEFF;
    }
    
  </style>

</head>
<body>
  <ul>
    <li id="colorBut">toggle color</li>
    <li id="opacityBut">toggle opacity</li>
  </ul>
</body>

back = svg.append("g").attr("id","back").append("rect")
        .attr("x",center-foreSqSize/2)
        .attr("y",center-foreSqSize/2)
        .attr("width",foreSqSize)
        .attr("height",foreSqSize)
        .style("fill","#e80d4b");
  
  fore = svg.append("g").attr("id","fore")
      .selectAll("rect")
        .data([[foreSqSize,foreSqSize],[foreSqSize,2*foreSqSize+gutter],[2*foreSqSize+gutter,foreSqSize],[2*foreSqSize+gutter,2*foreSqSize+gutter]]);
  
  fore.enter().append("rect")
        .attr("x",function(d){return d[0];})
        .attr("y",function(d){return d[1];})
        .attr("width",foreSqSize)
        .attr("height",foreSqSize)
        .style("fill","#34AEFF");
  
  d3.select("#colorBut").style("cursor","pointer").on("click",function(d) {
    if (fore.style("fill") == "rgb(255, 255, 255)") {
      fore.style("fill", "#34AEFF");
      back.style("fill", "#e80d4b")
          .style("stroke", "none");
    }
    else {
      fore.style("fill","rgb(255, 255, 255)");
      back.style("fill","rgb(255, 255, 255)")
          .style("stroke","#e80d4b");
    }
  })
  
  d3.select("#opacityBut").style("cursor","pointer").on("click",function(d) {
    if (fore.style("opacity") == 1) {
      fore.transition().duration(1000).style("opacity", 0.7);
    }
    else {
      fore.transition().duration(1000).style("opacity", 1);
    }
  })

d3.timer(step);

function step() {
    var angle = (Date.now() - start) * speed % 360;
    back.attr("transform", "rotate("+angle+","+center+","+center+")")

};

</script>
</html>

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

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