JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

canvas {
    width:400px;
    height:400px;
    position:absolute;
    left:calc(50% - 200px);
    top:calc(50% - 200px);
    border:solid 1px #ccc;
}

JavaScript

var cvs, ctx, w, h, x, y, loop, mouse, pool;
    
	cvs = document.querySelector('canvas');
	ctx = cvs.getContext('2d');
    w = cvs.width = 400;
    h = cvs.height = 400;
    x = w / 2;
    y = h / 2;
    mouse = {x: x, y: y};
    pool = [];
    rnd = (min, max) => Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min) + 1)) + Math.ceil(min);
    
for(var i = 0; i < 10; i++) {
	pool[i] = {
    	x: rnd(5, w - 5),
        y: rnd(5, h - 5),
        r: rnd(10, 20)
    };
}

var draw_bg = function() {
	ctx.fillStyle = '#f3f5f6';
    ctx.fillRect(0, 0, w, h);
};

var draw_circle = function(_x, _y, _r, _c) {
	ctx.beginPath();
    ctx.arc(_x, _y, _r, 0, Math.PI * 2);
    ctx.strokeStyle = _c;
    ctx.stroke();
};

(loop = function() {
	draw_bg();
    
    for(var i = 0; i < pool.length; i++) {
    	if(pool[i].x < 0) { pool[i].x = w; }
        if(pool[i].x > w) { pool[i].x = 0; }
        if(pool[i].y < 0) { pool[i].y = h; }
        if(pool[i].y > h) { pool[i].y = 0; }

    	draw_circle(pool[i].x, pool[i].y, pool[i].r, '#5dd5dd');
    }
    
    window.requestAnimationFrame(loop);
})();

cvs.onmousemove = function(e) {
	mouse.x = e.offsetX;
    mouse.y = e.offsetY;
};