CMYK zoom

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var width = 960,
      height = 500;

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

var defs = svg.append("defs");

var background = svg.append("g")
    .attr("class", "dots");

// r=0 is a Chrome bug
  var radius = d3.scaleSqrt()
    .range([1e-9, 9]);

var colors = [
    ["yellow", 0],
    ["magenta", -15],
    ["cyan", 15],
    ["black", 45]
  ];

var patterns = defs.selectAll("pattern")
    .data(colors)
    .enter()
    .append("pattern")
      .attr("id", function(d){
        return d[0];
      })
      .attr("patternUnits", "userSpaceOnUse")
      .attr("width", 18)
      .attr("height", 18)
        .append("circle")
          .attr("fill", function(d){
            return d[0];
          })
          .attr("cx", 9)
          .attr("cy", 9);

var dots = svg.append("g")
    .attr("class", "dots");

dots.append("rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "#fff");

dots.selectAll(".color")
    .data(colors)
    .enter()
    .append("rect")
      .attr("class", "color")
      .attr("width", width * 40)
      .attr("height", width * 40)
      .attr("x", width * -30 / 2)
      .attr("y", width * -30 / 2)
      .attr("fill", function(d){
        return "url(#" + d[0] + ")";
      })
      .style("mix-blend-mode", "multiply")
      .attr("transform", function(d){
        return d[1] ? "rotate(" + d[1] + " " + (width / 2) + " " + (height / 2) + ")" : null;
      });

zoom(0);

function zoom(p) {

var color = d3.interpolateRainbow(p % 1),
        cmyk = rgbToCmyk(d3.color(color));

patterns.transition()
      .duration(500)
      .attr("r", function(d){
        return radius(cmyk[d[0]]);
      })
      .on("end", function(){

dots.transition()
          .delay(500)
          .duration(4000)
          .attr("transform", "translate( " + (width / 2) + " " + (height / 2) + ") scale(0.05 0.05)")
          .transition()
            .delay(1000)
            .attr("transform", "translate(0 0) scale(1 1)")
            .on("end", function(){
              zoom(p + 0.15);
            });

});

}

function rgbToCmyk(rgb) {

var r = rgb.r / 255,
        g = rgb.g / 255,
        b = rgb.b / 255,
        k = 1 - Math.max(r, g, b);

return {
      cyan: (1 - r - k) / (1 - k),
      magenta: (1 - g - k) / (1 - k),
      yellow: (1 - b - k) / (1 - k),
      black: k
    };

}

</script>

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