<div class="wrapper">
  <canvas id="canvas"></canvas>
</div>

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #2e294e,
    #541388,
    #d90368,
    #ffd400,
    #f1e9da
  );
}

.wrapper {
  width: 100%;
  height: 100%;
}

const canvas = document.getElementById("canvas");
const outputContainer = document.getElementsByClassName("wrapper")[0];
const ctx = canvas.getContext("2d");
const ratio = window.devicePixelRatio || 1;
let width = outputContainer.offsetWidth;
let height = outputContainer.offsetHeight;
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
ctx.scale(ratio, ratio);

let size = 4;
let i = 9;
draw();

function draw() {
  // ctx.fillStyle = "#FFFFFF";

  // ctx.fillRect(0, 0, width, height);

  for (let x = 0; x < width / size; x++) {
    for (let y = 0; y < height / size; y++) {
      if ((x ^ (y * 2)) % i) {
        ctx.fillStyle = "#111111";
        ctx.fillRect(x * size, y * size, size, size);
      }
    }
  }

  // setTimeout(() => {
  //   i++;
  //   requestAnimationFrame(draw);
  // }, 200);
}