canvas effect.js

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "fixed";
canvas.style.top = 0;
canvas.style.left = 0;
canvas.style.backgroundColor = "#000";

document.body.appendChild(canvas);

/* * */

let mouse = {
	x: 0,
	y: 0,
};

document.onmousemove = (e) => {
	mouse.x = e.clientX;
	mouse.y = e.clientY;
};

const colors = "3d59a1,005a9e".split`,`;
const randColor = () => `#${colors[Math.floor(Math.random() * colors.length)]}`;
const rand = (min, max) => Math.random() * (max - min) + min;

const anim = () => {
	const { x, y } = mouse;

	// Draw a circle
	ctx.beginPath();
	const size = rand(1, 2);
	const color = randColor();

	ctx.arc(x, y, size, 0, Math.PI * 2);
	ctx.fillStyle = color;
	ctx.fill();

	let ball = { x, y, size, color };

	const bounceAnim = () => {
		ball.x+=rand(-1, 1);
		ball.y+=rand(-1, 1);

		if (ball.x > canvas.width) {
			ball.x = 0;
		}

		if (ball.y > canvas.height) {
			ball.y = 0;
		}

		if (ball.x < 0) {
			ball.x = canvas.width;
		}

		if (ball.y < 0) {
			ball.y = canvas.height/2;
		}

		ctx.beginPath();
		ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
		ctx.fillStyle = ball.color;
		ctx.fill();

		requestAnimationFrame(bounceAnim);
	};

	requestAnimationFrame(bounceAnim);

	requestAnimationFrame(anim);
};

anim();