JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<svg id="svgCircle" viewBox="-150 -150 300 300" width="300" height="300">
</svg>

CSS

*{
	margin: 0;
	padding: 0;
}
body{
	background: #353b4b;
}

JavaScript

/**
 * для вопроса https://toster.ru/q/568474
 * Как найти координаты точек круга?
 */
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.getElementById("svgCircle");
const R = 100;
const step = Math.PI / 40;
for (let lng = 0; lng < 2 * Math.PI; lng += step) {
  for (let lat = -Math.PI / 2; lat < Math.PI / 2; lat += step) {
    const x = R * Math.cos(lng) * Math.sin(lat);
    const y = R * Math.sin(lng);
    const rect = document.createElementNS(svgNS, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'height', '2');
    rect.setAttributeNS(null, 'width', '2');
    rect.setAttributeNS(null, 'fill', '#CCCCCC');
    svg.appendChild(rect);
  }
}