pixelize

by phloe

HTML

<h1 id="header">Pixel world</h1>

CSS

h1 {
  float: left;
  position: relative;
  overflow: hidden;
  font-size: 5rem;
}

.pixels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.pixels::before {
  content: "";
  display: block;
  clear: both;
}

.pixels::after {
  content: "";
  display: block;
  clear: both;
}

.pixel {
  float: left;
  width: 8px;
  aspect-ratio: 1/1;
  backdrop-filter: blur(8px) contrast(200);
}

JavaScript

const pixels = document.createElement("div");
pixels.classList.add("pixels");
for (let i = 0; i < 1000; i++) {
	const pixel = document.createElement("div");
	pixel.classList.add("pixel");
  pixels.appendChild(pixel);
}
header.appendChild(pixels);