squares

I wanted to make a looping animation after checking out the sweet work of Florian de Looij (@FloriandeLooij).

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

rect {
  stroke: black;
  stroke-width: 2px;
}

</style>

<body>
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
    
var width = 960,
    height = 500,
    size = 30;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g0_loc = g1_loc = [width/2, height/2],
    g2_loc = [-2*size, -2*size],
    g3_loc = [-size, -size];

var g0 = svg.append("g")
    .attr("transform", "translate(" + g0_loc[0] + "," + g0_loc[1] + ")");

var rect0 = g0.append("rect")
    .attr("width", 8*size)
    .attr("height", 8*size)
    .attr("fill", "none")
    .attr("transform", "translate(" + (-4*size) + "," + (-4*size) + ")");

var g1 = svg.append("g")
            .attr("transform", "translate(" + g1_loc[0] + "," + g1_loc[1] + ")");

var rect1 = g1.append("rect")
    .attr("width", 4*size)
    .attr("height", 4*size)
    .attr("fill", "none")
    .attr("transform", "translate(" + (-4*size) + "," + (-4*size) + ")");

var g2 = g1.append("g")
    .attr("transform", "translate(" + g2_loc[0] + "," + g2_loc[1] + ")");

var rect2 = g2.append("rect")
    .attr("width", 2*size)
    .attr("height", 2*size)
    .attr("fill", "none")
    .attr("transform", "translate(" + (-2*size) + "," + (-2*size) + ")");

var g3 = g2.append("g")
    .attr("transform", "translate(" +g3_loc[0] + "," + g3_loc[1] + ")");

var rect3 = g3.append("rect")
    .attr("width", 1*size)
    .attr("height", 1*size)
    .attr("fill", "#000")
    .attr("transform", "translate(" + (-size) + "," + (-size) + ")");

var anim_length = 750;

start();

function start() {
  g0.call(spin, 4*anim_length, 0, g1_loc, 3, -1, "quad");
  g1.call(spin, 4*anim_length, 0, g1_loc, 3, 1);
  g2.call(spin, 2*anim_length, 0, g2_loc, 3, -1);
  g3.call(spin, anim_length, 0, g3_loc, 3, 1);
}

function spin(d, duration, delay, loc, clock, dir, type) {
  clock = (clock + 1) % 4;
  d.transition("spin")
    .duration(duration)
    .attr("transform", "translate(" + loc[0] + "," + loc[1] + ")" + "rotate(" + clock * dir* 90 +")")
    .ease(type || "cubic")
  .transition()
    .duration(delay)
    .each("end", function() {d.call(spin, duration, delay, loc, clock, dir, type); });
}

</script>

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