JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <canvas id="canvasbanner" width="400px" height="400px"></canvas>
</body>

CSS

body{
    background-color: #000033
}

#canvasbanner{
	top: 0px;
	right: 0px;
	float: right;
	z-index: 10px;
}

JavaScript

function MovingArc(cx, cy, radius, size, angle){
	this.centerX = cx;
	this.centerY = cy;
	this.radius = radius; //thickness
	this.size = size; //width
	this.angle = angle;
	
	this.startAngle = 0;
	this.endAngle = 0;
	
	this.checkClockwise = function(){
		var num = Math.round(Math.random());
		return (num == 1);
	}
	
	this.clockwise = this.checkClockwise();
	this.update = function(){
		if(this.clockwise) this.angle += 2;
		else this.angle -= 2;
		
		this.startAngle = this.angle - (this.size/2);
		this.endAngle = this.angle + (this.size/2);
	}
}

var myArc;

function init() {
	myArc = new MovingArc(50,50, 50,50, 60);
	
	update();
    setInterval(update, 1000 / 60);
}

function drawCanvas(){
	var ctx = $('#canvasbanner')[0].getContext("2d"); //get context of canvas
	ctx.clearRect(0,0,400,400);
	
	ctx.strokeStyle = "#ffffff";;
	ctx.arc(myArc.centerX,myArc.centerY,myArc.radius,myArc.startAngle,myArc.endAngle,false);
	ctx.stroke();
}

function update(){
	myArc.update();
	drawCanvas();
}

$(document).ready(function() {
	console.log("doc ready");
	init();
});