floppy grid

by greg gorlen

HTML

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

CSS

body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  background: #444;
  overflow: hidden;
  display: flex;
}

#container {
  margin: auto;
  height: 90%;
  width: 90%;
  position: relative;
}

@keyframes animate {
  0% {
    transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(0deg) rotateZ(180deg);
  }
}

JavaScript

"use strict";

const container = document.getElementById("container");
const width = parseFloat(window.getComputedStyle(container).width);
const height = parseFloat(window.getComputedStyle(container).height);
const size = Math.max(width, height) / 10 | 0;

for (let i = 0; i < height - size; i += size) {
  for (let j = 0; j < width - size; j += size) {
    const elem = document.createElement("div");
    elem.style.position = "absolute";
    elem.style.top = i + "px";
    elem.style.left = j + "px";
    elem.style.background = "hsl(130, " + 
      (100 * ((i + j) / (width + height))) + "%, 50%)";
    elem.style.border = "1px solid #000";
    elem.style.width = size + "px";
    elem.style.height = size + "px";
    elem.style.animation = "animate 5s ease-in " + 
      (i + j) + "ms infinite";
    container.appendChild(elem);
  }
}