JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

CSS

*{
  padding: 0;
  margin: 0;
}

body{
  overflow: hidden;
}

JavaScript

function randomInt(min,max){
	return Math.floor(Math.random()*(max-min+1)+min);
}

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = window.innerWidth;
var height = window.innerHeight;

canvas.width = width;
canvas.height = height;

var t = 0;

function clearCanvas(){
	ctx.fillStyle = "#000";
	ctx.fillRect(0, 0, width, height);
}

clearCanvas();

function circle(x,y,radius){
	ctx.beginPath();
	ctx.arc(x,y,radius,0,2*Math.PI);
	ctx.closePath();
}

var part = new Particle(0, height/2);

var rotation = 0;

function loop(){
	part.move();
	part.draw();
	
	requestAnimationFrame(loop);
	t++;
}

function Particle(x,y){
	this.x = x;
	this.y = y;
	this.color = 'hsl('+t+',100%,50%)';
	this.radius = 1;

	this.move = function(){
		this.x+=1;
	};

	this.draw = function(){
		this.color = 'hsl('+t+',100%,50%)';
		ctx.fillStyle = this.color;
		circle(this.x, this.y, this.radius);
		ctx.fill();
	};
}

loop();

window.addEventListener('click', function(){
	//turn
});

window.addEventListener('resize', function(){
	width = window.innerWidth;
	height = window.innerHeight;

	canvas.width = width;
	canvas.height = height;

	clearCanvas();
});