JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas height="600" width="600"></canvas>

CSS

body 
		{
			background-color: #000000;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

var canvas = document.createElement("canvas"),
	context = canvas.getContext("2d");

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

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

document.body.appendChild(canvas);

var particle;
var particlePrev;
var particleList = [];

for(var i = 0; i < 100; ++i)
{
	particle = new ParticleObject(i, width * .5, height * .5);
	particle.draw();
	particleList.push(particle);
}


setInterval(intervalHandler, 1000 / 30);

function intervalHandler()
{
//	context.fillStyle = "#ffffff";

//	context.beginPath();
//	context.fillRect(width * .5, height * .5, 1, 1);
//	context.closePath();
//	context.fill();

//*
	context.clearRect(0, 0, width, height);

/*/
	context.globalCompositeOperation = "source-atop";

	context.fillStyle = "rgba(0, 0, 0, 0.3)";  
	context.fillRect(0, 0, width, height);  
	context.fill();	
//*/

//	context.globalCompositeOperation = "lighter";

	for(var i = 0; i < particleList.length; ++i)
	{
		particle = particleList[i];
		particle.draw();
		particle.connect();
	}
}

function ParticleObject(pIndex, pX, pY)
{
	this.index = pIndex + Math.random();
	this.ticker = (Math.PI / 2);
	this.x = pX;
	this.y = pY;
	this.size = 1;
	this.color = "#ffffff";
	this.arcX = randomRange(-1, 1);
	this.arcY = randomRange(-1, 1);
	this.distance = 0;
	this.numConnections = 0;
	this.connectedDots = [];
	
	this.range = 6;
	this.speed = .002;
	
	this.draw = function()
	{	
		context.moveTo(this.x, this.y);
		//context.fillStyle = this.radgrad;
		context.fillStyle = this.color;
		
		/*
		context.beginPath();
		context.arc(this.x, this.y, this.size, 0, Math.PI * 2, true);
		context.closePath();
		context.fill();
		*/
		
		this.ticker += this.speed;
		this.ticker = this.ticker == 1 ? 0 : this.ticker;

		this.x += Math.sin(Math.cos(this.index * .1) + (this.ticker * this.index * .5)) * this.range;
		this.y += Math.cos(Math.cos(this.index * .4) + (this.ticker * this.index * .62)) * this.range;

//		this.radgrad =...