JSFiddle - React, Tailwind, and code Playground

by Lloyd Atkinson

HTML

<canvas id="canvas"></canvas>
what the hex

CSS

* {
  box-sizing:border-box;
}
html,body {
  padding:0;
  margin:0;
  height:100%;
  background: #000;
  color:#999;
}
#canvas {
  color: #f70; /* Change color and update, dots will change color */
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

JavaScript

// Configurable consts
const nPoints = 20			// Number of plotters
const hexE = 300 				// Edge Size (it will define hex size)
const lifeScale = 0.01; // Bigger number dots will disappear quickly
const speed = 2.5;				// speed/iteration of the plotter
const alpha = 0.991

// just consts (do not change these)
const hexH = Math.sqrt(3) * hexE // hexHeight
const hexD = 2 * hexE + hexE // hexDiagonal
const DEG2RAD = Math.PI/180


// Main canvas
var c = document.getElementById("canvas");
var rctx = c.getContext("2d")
// Define canvas width and height based on DOM size
var rect = c.getBoundingClientRect() 
var w = c.width = rect.width
var h = c.height = rect.height;

// Color from CSS
const color = window.getComputedStyle(c).getPropertyValue("color");

// Points generator will generate points within canvas
var fH = Math.floor(w/hexH);
var fW = Math.floor(h/hexD);
function createPoint() {
  let x = (Math.random() * fH).toFixed(0) * hexH
  let y = (Math.random() * fW).toFixed(0) * hexD
	return {r: 0, dir:90, life: 1, y:y, x:x}
}

// DATA
var points = []
// Initial points
for (let i=0;i<nPoints;i++) {
	points.push(createPoint());
}

// Buffers to create the fade effect
var b1 = document.createElement("canvas");
b1.width = w; b1.height = h;
var b2 = document.createElement("canvas");
b2.width = w; b2.height = h;
var cs = [ b1.getContext("2d"), b2.getContext("2d")]


var ctx = cs[0] 	// Current context
var ci = 0 				// current contextIndex
var fcount = 0

function draw() {
	fcount++
	resizeDetect()
  
	var prevCtx = ctx 					// current ctx
  ci = (ci + 1) % cs.length 	// next ctx index
	ctx = cs[ci]; 							
  
	ctx.clearRect(0, 0, w, h)
  ctx.globalAlpha=1
  ctx.filter="hue-rotate(3deg) grayscale(1%)" +
  	 ((fcount%120==0)?" opacity(0.98)":"") +
     ((fcount%8==0)?" blur(1px)":"") 
  ctx.drawImage(prevCtx.canvas, 0, 0) // draw Prev points with less alpha (fade effect)
  ctx.filter=""
  const toRemove = [] // Points to remove
  
  // iterate points, it will update(move)...