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++;
}

var angle = 0;
var firstAngle = 90;
var turning = false;

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 * Math.cos(Math.PI/180 * angle);
		this.y += 1 * Math.sin(Math.PI/180 * angle);

		if(turning){
			if(angle<firstAngle){
				 angle++;
			}else{
				firstAngle+=90;
				turning = false;
			}
		}
	};

	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('mousedown', function(){
	turning = true;
});

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

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

	clearCanvas();
});