JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<svg width=1000 height=600>
<g id="container" clip-path="url(#cp1)">
  
</g>
<defs>
  <clipPath id="cp1"><path fill="black" d="M 0 0 L 500 100 L 1000 0 L 1000 600 L 0 600 Z"></path></clipPath>
</defs>
</svg>

JavaScript

var xmlns = "http://www.w3.org/2000/svg";

const container = document.getElementById('container');
let i = 0;
while(i++ < 1000){
	const box = document.createElementNS(xmlns, 'rect');
  box.setAttribute('width', 100);
  box.setAttribute('height', 50);
  box.setAttribute('x', parseInt(Math.random()*1000));
  box.setAttribute('y', parseInt(Math.random()*600));
  box.setAttribute('fill', 'lightgray');
  box.setAttribute('stroke', 'gray');
  container.appendChild(box);
}