JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

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

CSS

#canvas {
	display: block;
	height: 100vh;
	width: 100%;
  filter: blur(3px);
  background: transparent;
}

body{
  background: #00A1E0;
  margin: 0;
  padding: 0;
}

JavaScript

/**
* ------------------------------------
* Section for canvas setup
--------------------------------------
*/
let canvas = document.getElementById("canvas"),
	ctx = canvas.getContext("2d"),
	width = (canvas.width = window.innerWidth),
	height = (canvas.height = window.innerHeight);

// Readjust values on window resize
window.addEventListener("resize", () => {
	width = canvas.width = window.innerWidth;
	height = canvas.height = window.innerHeight;
	init();
});

/**
* ------------------------------------
* Section for vector class
--------------------------------------
*/
function Vector(x, y) {
	this.x = x || 0;
	this.y = y || 0;

	this.add = function(vector) {
		this.x += vector.x;
		this.y += vector.y;
		return this;
	};

	this.sub = function(vector) {
		this.x -= vector.x;
		this.y -= vector.y;
		return this;
	};

	this.set = function(vector) {
		this.x = vector.x;
		this.y = vector.y;
	};

	this.setMag = function(mag) {
		return this.norm().mult(mag);
	};

	this.mag = function() {
		return Math.sqrt(this.magSq());
	};

	this.magSq = function() {
		return this.x * this.x + this.y * this.y;
	};

	this.norm = function() {
		return this.mag() === 0 ? this : this.div(this.mag());
	};

	this.mult = function(value) {
		this.x *= value;
		this.y *= value;
		return this;
	};

	this.div = function(value) {
		this.x /= value;
		this.y /= value;
		return this;
	};

	this.fromAngle = function(angle) {
		return new Vector(Math.cos(angle), Math.sin(angle));
	};

	this.limit = function(max) {
		var mSq = this.magSq();
		if (mSq > max * max) {
			this.div(Math.sqrt(mSq)).mult(max);
		}
		return this;
	};

	this.copy = function() {
		return new Vector(this.x, this.y);
	};
}

/**
* ------------------------------------
* Section for Utility classes
--------------------------------------
*/
// Get a random number from a certain range
function random(min, max) {
	let rand = Math.random();

	if (typeof min === "undefined") {
		return rand;
	} else if (typeof max === "undefined")...