JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
<canvas id="stars"></canvas>

CSS

canvas {
    background: black;
}

JavaScript

var c = document.getElementById('stars'),
    ctx = c.getContext("2d"),
    t = 0; // time

c.width = 300;
c.height = 300;

var w = c.width,
    h = c.height,
    z = c.height; // angle of vision

(function animate() {
    
    t = t % w; // from 0 to w
    
    Math.seedrandom('bg');
    ctx.globalAlpha = 1;
    
    for (var i = 0; i <= 100; i++) {
    
        var x = Math.floor(Math.random() * w), // pos x
            y = Math.floor(Math.random() * h), // pos y
            r = (Math.random()*2 + 1), // radius
            a = Math.random()*0.5 + 0.5, // alpha
            
            // linear
            d = (r*a)*z,   // depth
            v = (2*Math.PI)/w,
            p = Math.floor( d * Math.cos( t * v ) );     // pixels per t

        x = x + p;       // movement
        x = x - w * Math.floor(x / w); // go around when x < 0

        (function draw(x,y) {
            var gradient = ctx.createRadialGradient(x, y, 0, x + r, y + r, r * 2);
            gradient.addColorStop(0, 'rgba(255, 255, 255, ' + a + ')');
            gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
            
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2*Math.PI);
            ctx.fillStyle = gradient;
            ctx.fill();

            return draw;
            
        })(x, y);

    }
    
    ctx.restore();
    t += 1;
    
    requestAnimationFrame(function() {
        ctx.clearRect(0, 0, c.width, c.height);
        animate();
    });
})();