JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="Wrap">

</div>

CSS

#Wrap {
  background: #AFA;
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid #000;
}

.Dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 25px;
  background: green;
}

TypeScript

class SkillCircle {
   maxDots: number = 300;
   radius: number = 100;
   x, y: number = 0;

   private draw() {
     let $div = $('<div/>')
     $div.css({
       top: this.radius + this.y,
       left: this.radius + this.x
     }).addClass('Dot');
     $div.appendTo($('#Wrap'))
   }

   spawn() {
     for (let i = 0; i < this.maxDots; i++) {
     
       this.x = Math.random() * 2 * this.radius - this.radius;
       let yLimit = Math.sqrt(this.radius * this.radius - this.x * this.x);
       this.y = Math.random() * 2 * yLimit - yLimit;

       this.draw()
     }
   }
 }

 let sc = new SkillCircle();

 sc.spawn();