unconf

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <style>
    body { 
      text-align: center; 
      padding-top: 16em; 
    }
    svg {
      /*border: 1px black solid;*/
    }
  </style>
</head>

<body>
<div id="grancairo"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 1050;
    var height = 1050;
    var margin = {left: 0, right: 0, top: 0, bottom: 0};

var svg = d3.select("#grancairo")
      .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom);

var colors = ["rgb(129,168,141)", "rgb(211,221,220)", "rgb(230,160,196)", "rgb(198,205,247)", "rgb(216,164,153)", "rgb(114,148,212)", "rgb(244,181,189)", "rgb(156,150,74)", "rgb(205,192,140)", "rgb(137,157,164)", "rgb(201,51,18)", "rgb(250,239,209)", "rgb(220,134,59)", "rgb(154,136,34)", "rgb(245,205,180)", "rgb(248,175,168)", "rgb(116,160,137)", "rgb(234,190,148)", "rgb(59,154,178)", "rgb(120,183,197)"];

var colorarray = colors.slice(0, 10);

var squareunit = width / (colorarray.length*2-1);

for (var colorsquare = colorarray.length - 1; colorsquare >= 0; colorsquare--) {
      svg.append("rect")
         .attr("x", 0)
         .attr("y", 0)
         .attr("width", squareunit * (1 + 2*colorsquare))
         .attr("height", squareunit * (1 + 2*colorsquare))
         .attr("transform", function() {
            var padding = Math.abs(colorarray.length - colorsquare - 1) * squareunit;
            return "translate(" + (padding + margin.left) + "," + (padding + margin.top) + ")";
          })
         .attr("fill", colorarray[colorsquare])
         .attr("stroke", "#d3d3d3")
         .attr("class", 'colorsquare')
         .attr("stroke-opacity", 0.7)
    };

var counter = 0;
    d3.interval(function() {
      d3.selectAll(".colorsquare")
        .attr("fill", o => _.sample(colors));
    }, 500);

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js