SOURCE

function draw(){
    const ctx = document.getElementById('canvas').getContext('2d')
    ctx.translate(100,100)
    for(let i=0;i<10;i++){
       ctx.save()
       ctx.fillStyle = `rgba(${25*i}, ${255-25*i}, 255, 1)`
       for(let j=0;j<i*6;j++){
           ctx.rotate(Math.PI*2/(i*6))
           ctx.beginPath()
           ctx.arc(0, 10*i,3,0, Math.PI*2)
           ctx.fill()
       }

       ctx.restore()
    }
}

draw()

<canvas id="canvas" width="500" height="500"></canvas>