circular truchet tiles

by greg gorlen

HTML

<div id="container"></div>

CSS

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

#container {
  display: table;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

.truchet {
  display: table-cell;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.truchet div {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #000;
}

.truchet .truchet-1-a {
  top: 50%;
  right: 50%;
}

.truchet .truchet-1-b {
  bottom: 49%;
  left: 49%;
}

.truchet .truchet-2-a {
  bottom: 49%;
  right: 50%;
}

.truchet .truchet-2-b {
  top: 50%;
  left: 49%;
}

JavaScript

// Todo: fix gaps that arise when adjusting size/line width

"use strict";

const container = document.getElementById("container");
const width = container.style.width = parseFloat(window.getComputedStyle(document.body).width);
const height = container.style.height = parseFloat(window.getComputedStyle(document.body).width);
const size = 60;

for (let i = 0; i < height; i += size) {
  const row = document.createElement("tr");
  
  for (let j = 0; j < width; j += size) {
    const parent = document.createElement("div");
    const firstChild = document.createElement("div");
    parent.className = "truchet";
    parent.style.width = parent.style.height = size + "px";
    firstChild.className = "truchet-" + ((Math.random() * 2 | 0) + 1) + "-a";
    const secondChild = document.createElement("div");
    secondChild.className = firstChild.className.slice(0, firstChild.className.length - 1) + "b";
    parent.append(firstChild);
    parent.append(secondChild);
    row.append(parent);
  }
  
  container.append(row)
}