cube tiling

by greg gorlen

HTML

<div class="box-container"></div>

CSS

body {
  overflow: hidden;
  background: #000;
  height: 100vh;
}

.box-container {
  position: relative;
}

.box {
  position: absolute;
}

.box-side { 
  outline: 10px solid transparent;
  position: absolute;
  width: 100%;
  height: 100%;
}

.box-side-1 {
  background-color: rgb(40, 70, 60);
  transform: translate(35%, 60%) rotateX(25deg) rotateY(135deg);
}

.box-side-2 {
  background-color: rgb(170, 120, 80);
  transform: rotateX(65deg) rotateZ(45deg);
}

.box-side-3 {
  background-color: rgb(90, 90, 90);
  transform: translate(-35%, 60%) rotateX(25deg) rotateY(45deg);
}

JavaScript

"use strict";

const boxContainer = document.getElementsByClassName("box-container")[0];

for (let i = -1; i * 67 <= window.innerHeight + 150; i++) {
  const offset = i & 1 ? 38 : 0;
  
  for (let j = -1; j * 78 <= window.innerWidth + 150; j++) {
    const box = document.createElement("div");
    box.id = "box-" + (j + 1);
    box.className = "box";
    box.style.width = "56px";
    box.style.height = "56px";
    box.style.left = j * 78 + offset + "px";
    box.style.top = i * 67 + "px";
    
    for (let k = 1; k <= 3; k++) {
      let boxSide = document.createElement("div");
      boxSide.className = "box-side box-side-" + k;
      
      if (k === 1) {
        boxSide.style.background = "hsl(0, " + (i * 2) + "%, 31%)";
      }
      else if (k === 2) {
        boxSide.style.background = "hsl(40, " + (i * 1.5) + "%, 40%)";
      }
      else {
        boxSide.style.background = "hsl(10, " + (30 - i * 1.5) + "%, 40%)";
      }
      
      box.appendChild(boxSide);
    }
    
    boxContainer.appendChild(box);
  }
}