JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="bg">
        <!-- animation stuff. -->
    </canvas>

JavaScript

// runtime
$(document).ready(function(){
	document.getElementById('bg').height = $(document).height();
	document.getElementById('bg').width = $(document).width();

	// ranomize the spot.


	for(var i = 0; i < 12; i++){
		yCord = Math.floor($(document).height() / 12) * i;
		xCord = ( i % 2 == 0 ? Math.floor($(document).width() / 3) : Math.floor($(document).width() * 2 / 3) ) ;



		animation = new animatedLine(xCord, yCord, "#0F5791");
		animation.init();
	}

});

function animatedLine(startx, starty, colorStr){
	// these should be passed into the object.
	this.curpointX = startx,
	this.curpointY = starty,
	this.NORTH = 1,
	this.NORTHEAST = 2;
	this.EAST = 3;
	this.SOUTHEAST = 4;
	this.SOUTH = 5;
	this.SOUTHWEST = 6; 
	this.WEST = 7;
	this.NORTHWEST = 8;
	this.colorHex = colorStr;

	var self = this;
	// Lets get rid of one of these position variables.
	this.startpointx = this.curpointX;
	this.startpointy = this.curpointY;
	this.curposx = this.curpointX;
	this.curposy = this.curpointY;
	this.endpointx = this.curpointX;
	this.endpointy = this.curpointY;
	this.myinterval = {};

	this.init = function() {
	   	this.myinterval = setInterval( function() { self.animate(self.endpointx,self.endpointy);}, 10);
	}

	this.animate = function(endpointx, endpointy) {
		this.startpointy = this.curposy;
		this.startpointx = this.curposx;
		if (this.curposx == endpointx && this.curposy == endpointy){
			this.drawLine();
			return false;
		}
		else if(endpointx != this.curposx && endpointy != this.curposy){
			// this will screw up if we have half pixel somewhere. ( will always be diagnol)
			this.curposy += (endpointy > this.curposy ? 1 : -1);			
			this.curposx += (endpointx > this.curposx ? 1 : -1);
		}
		else if(endpointx != this.curposx){
			this.curposx += (endpointx > this.curposx ? 1 : -1);
		}
		else if(endpointy != this.curposy){
			this.curposy += (endpointy > this.curposy ? 1 : -1);
		}
		else{
			console.log("We have a problem");
		}
	    this.drawShape(this.curposx,...