JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<script>
    function draw(){  
        var ctx = document.getElementById('canvas').getContext('2d'); ctx.translate(75,75);  
  
  for (var i=1;i<6;i++){ // Loop through rings (from inside to out)  
    ctx.save();  
    ctx.fillStyle = 'rgb('+(51*i)+' , '+(255-51*i)+',255)';  
  
    for (var j=0;j<i*6;j++){ // draw individual dots
      ctx.beginPath();    
      ctx.rotate(Math.PI*2/(i*6));  
      ctx.arc(0,i*12.5,5,0,Math.PI*2,true);  
      ctx.fill();  
    }  
  
    ctx.restore();  
  }  
}  
</script>
<body onload="draw();">  
<canvas id="canvas" width="150" height="150"></canvas>