<svg id="svg" viewBox="0 0 25 25" width="1000" height="1000"></svg>

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="black" />`;
}

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