mosaico by aaizemberg

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>mosaico - estrella de 8 puntas</title>

  <style>
    svg rect {
      stroke: none;
      fill: white;
    }
    
    svg rect:hover {
      stroke: white;
      fill: steelblue;
    }
  </style>  
  
  <script src="https://d3js.org/d3.v5.min.js"></script>

</head>
<body>
  
<script>
var s = 60, n = 10, w = n*s*1.4, h = n*s*1.4;
var svg = d3.select("body").append("svg").attr("width",w).attr("height",h).style("background","teal");

function prototile(svg, x, y, s) {

  svg.append("rect")
    .attr("transform","translate(" + (s/2+((s*1.5)*x)) + " " + (s/2+((s*1.5)*y)) + ")" )
    .attr("width", s)
    .attr("height", s);

  svg.append("rect")
    .attr("transform","translate(" + (s + (s*1.5)*x) + " "+(s/4+(s*1.5) *y)+") rotate(45)" )
    .attr("width", s)
    .attr("height", s);

}

for (y = 0; y < n-1; y++) {
  for (x = 0; x < n-1; x++) {
    prototile(svg, x, y, s);
  }
}
</script>
  
</body>
</html>