JSFiddle - React, Tailwind, and code Playground

HTML

<div class="start"></div>

CSS

body{
    background-color:#000;
}

.star{
    position: absolute;
    background-color:#fff;
    min-width:5px;
    min-height:5px;
}

JavaScript

function starDust(wdt, hgt, tSt, tAp){
   var timer = tAp * 100;
   var defInt = tSt,      
        starInt = setInterval(function(){
            var posX = Math.floor((Math.random() * wdt) + 20),
                posY = Math.floor((Math.random() * hgt) + 20),
                size = Math.floor((Math.random() * 5) + 20);
        
            $('body').append('<div class="star"></div>');
                        $('.star:last').css({'width':size,'height':size,'left':posX,'top':posY}).fadeIn(6000).delay(1000).fadeOut(600).delay(100);
      
     var totalStars = $('.star').length;
      
     if(totalStars == defInt){
     clearInterval(starInt);
     }
     
 }, timer);
    
}

$(function(){
  
    // Function arguments: starDust(max X position in px, max Y position in px, total number of stars, time in seconds between stars show);
    starDust(1000,800,2000,3);
    
});