JSFiddle - React, Tailwind, and code Playground

by ksumarine

HTML

<svg width="100%" height="100%"></svg>

CSS

body {
  width: 100%;
  height: 100%;
}
svg {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

JavaScript

const svg = document.querySelector('svg');

for (let i = 0; i < 100; i++) {
  let circ = document.createElementNS(
    'http://www.w3.org/2000/svg',
    'rect'
  );
  circ.setAttributeNS(null, 'width', `10`);
  circ.setAttributeNS(null, 'height', `10`);
    circ.setAttributeNS(null, 'x', 20 * i);
      circ.setAttributeNS(null, 'y', 25 * i);
  circ.setAttributeNS(null, 'fill', '#333333');

  svg.appendChild(circ);
}