Estoy usando javascript para hacer una animación brillante con css.

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

cada punto

 .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(); } };

Ahora el problema es que cuando ejecuto el código, los destellos terminan formando un cuadrado fuera de la imagen, necesito una solución numérica de cómo hacer que los destellos terminen formando un círculo.