I'm using javascript to make an sparkle like animation with css.

<div class="r1">       
    <img src="star.png">     
</div>

Each Dot

.dotter{
  width: 4px;
  height: 4px;
  background: blue;
  border-radius: 50px;
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(0,0);
}

Javascript

const block = document.querySelector('.r1');
const css = document.createElement('style');

function creator(){
  var newKey = new String;
  for(i=0;i<=100;i++){
    var dot = document.createElement('div');
    dot.classList.add('dotter');
    dot.style.animation = `fadeOut${i} 1s linear infinite`;
    var keyframes = `@keyframes fadeOut${i} {from {transform: translate(0,0) scale(1);opacity: 1;}to {transform: translate(${newRandom()[0]}%,${newRandom()[1]}%) scale(0.1);opacity: 0;}}`;
    block.appendChild(dot);
    newKey += keyframes;
  }
  css.innerText = newKey;
  document.getElementsByTagName('body')[0].appendChild(css);
};

creator();

function newRandom(){
  const n1p1 = Math.random()*900;
  const n1p2 = Math.random()*(-900);
  
  const n2p1 = Math.random()*(-900);
  const n2p2 = Math.random()*900;

  const n1 = Math.random() < 0.5 ? n1p1 : n1p2;
  const n2 = Math.random() < 0.5 ? n2p1 : n2p2;
  
  const m1 = Math.abs(n1);
  const m2 = Math.abs(n2);

  if( m1>=850 || m2>850 ){
    if((m1 + m2) >= 900){
      return [n2,n1];
    }else{
      return newRandom();
    }
  }else{
    return newRandom();
  }
};

Now the problem is when I run the code, the sparkles end-up forming a square outside the image, I need a numeric solution for how to make the sparkles end-up shaping a circle.