<svg id="svg" viewBox="0 0 25 25" width="1000" height="1000"></svg>
function sample(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

const colors = ['#000', '#333', '#666', '#999', '#aaf'];

function circle(x, y) {
  let pathString = `M ${x} ${y} `;
  pathString += `l 1 0 a 1 1 0 0 1 -1 1 Z`;
  const dx = x + 0.5;
  const dy = y + 0.5;
  const rotate = 90 * Math.floor(Math.random() * 4);
  const transform = `translate(${dx} ${dy}) rotate(${rotate}) translate(${-dx} ${-dy})`;
  return `<path d="${pathString}" transform="${transform}" stroke="transparent" fill="${sample(colors)}" />`;
}

for (let x = 0; x < 25; x++) {
  for (let y = 0; y < 25; y++) {
    document.getElementById('svg').innerHTML += circle(x, y);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.