Frank Stella - Gran Cairo in d3.js

<!Doctype HTML>

<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js"></script>

<style>

</style>

</head>

<body>

var width = 300;
var height = width;
var margin = {left: 20, right: 20, top: 20, bottom: 20};

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

var colorarray = ["#17223D", "#0E3964", "#001C08", "#FFE200", "#CB3C26", "#BB2123", "#CB3C26", "#FFE200", "#001C08", "#0E3964", "#17223D", "#0E3964", "#001C08", "#FFE200", "#CB3C26", "#BB2123"].reverse()
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("stroke-opacity", 0.7)
}

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js