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;
let N = 400; 
while(N--) {
  let lng = Math.random() * 2 * Math.PI;
  let lat = -Math.PI / 2 + Math.random() * Math.PI;
  const x = R * Math.cos(lng) * Math.sin(lat);
  const y = R * Math.sin(lng);
  svg.appendChild(makeLine(x, y));
}

function makeLine(x, y) {
  const line = document.createElementNS(svgNS, 'line');
  line.setAttributeNS(null, 'x1', x);
  line.setAttributeNS(null, 'y1', y);
  line.setAttributeNS(null, 'x2', 0);
  line.setAttributeNS(null, 'y2', 0);
  line.setAttributeNS(null, 'stroke', '#CCCCCC');
  line.setAttributeNS(null, 'stroke-opacity', 
    Math.pow(1 - Math.sqrt(x*x + y*y) / R, 0.5)
  );
	return line;
}

function makeRect(x, y) {
  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');
	return rect;
}