Yvaral I by pstuffa

index.html

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

<style>
      body {
        background: #2f3337 !important;
    }
    
</style>
<body align="center">

    <script>

    var width = window.innerHeight*.98,
        height = window.innerHeight*.98,
        margin = {top: 0, bottom: 0, right: 0, left: 0}

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var n = 6,
        quadrants = 4,
        rowHeight = height/2/n,
        cellWidth = width/2/n;

    // Lay out quandrants
    var quadrants = svg.selectAll(".quadrant")
          .data(d3.range(quadrants).map(Object))
        .enter().append("g")
          .attr("class", "quadrant")
          .attr("transform", function(d, i) { 
            if(i == 0) {
              return "translate(0,0)"
            } else if(i == 1) {
              return "translate(" + width/2 + ",0)"
            } else if(i == 2) {
              return "translate(0," + height/2 + ")"
            } else {
              return "translate(" + width/2 + "," + height/2 + ")"
            }
          })

    // within each quadrant, there is a 6 by 6

    var rows = quadrants.selectAll(".quadrant-row")
        .data(d3.range(n).map(Object))
      .enter().append("g")
        .attr("class", "quadrant-row")
        .attr("transform", function(d, i) { return "translate(0," + rowHeight*i + ")" })

    var cells = rows.selectAll(".cell")
        .data(d3.range(n).map(Object))
      .enter().append("g")
        .attr("class", "cell")
        .attr("transform", function(d, i) { return "translate(" + cellWidth*i + ",0)" })

    // Making first triangle
    cells.append("path")
        .attr("d", "M0,0 L " + cellWidth + ",0L" + cellWidth + "," + rowHeight + "Z") 
        .style("fill", "darkgray")


    // Making first triangle
    cells.append("path")
        .attr("d", "M0,0 L0," + rowHeight + "L" + cellWidth + "," + rowHeight + "Z") 
        .style("fill", "lightgray")

    // Make 2nd triangle 


    // create clip paths for each 
    cells.append("clipPath")
      .attr("id","rect-clip")
      .append("rect")
      .attr("width", cellWidth/2)
      .attr("height", rowHeight/2)

    cells.append("rect")
        .attr("clip-path","url(#rect-clip)")
        .attr("width", cellWidth-2)
        .attr("height", rowHeight-2)
        .style("fill", "#002EA7") // Klein blue 






    </script>
</body>