JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<button onclick="changeColor()">change color</button>
<svg width=600 height=400>
  
  <defs>
    <linearGradient id="red">
      <stop stop-color="red"/>
    </linearGradient>
  </defs>
  
</svg>

CSS

svg {
  background-color: rgb(200,200,200)
}

JavaScript

const svg = document.getElementsByTagName('svg')[0];
const resultDiv = document.getElementById('result');

for (let i = 0; i < 2000; i++){
	const point = document.createElementNS('http://www.w3.org/2000/svg','path');
  const x = Math.round(Math.random()*600);
  const y = Math.round(Math.random()*400);
  point.setAttribute('d', `M ${x} ${y} h 10 v 10 h -10 v -10 Z`);
  point.setAttribute('fill', 'url(#red)');
  svg.appendChild(point);
}

function changeColor(event){
	document.getElementsByTagName('svg')[0].childNodes[1].childNodes[1].childNodes[1].setAttribute('stop-color', 'blue')
}