JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

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

CSS

html, body {
  margin: 0;
  padding: 0;
  line-height: 0;
}

JavaScript

c.width = window.innerWidth;
c.height = window.innerHeight;

var nodes = Array(200).fill(0).map(x=>[Math.random()*c.width, Math.random()*c.height,0,0]);
var ctx = c.getContext("2d");

var edges = Array(200).fill(0).map(x=>[
	Math.floor(Math.random()*nodes.length),
  Math.floor(Math.random()*nodes.length)
]);


function draw() {
	mutate();
  ctx.save();
  ctx.fillStyle="rgba(255,255,255,.1)";
  //ctx.clearRect(0,0,c.width,c.height);
  ctx.fillRect(0,0,c.width,c.height);
  ctx.restore();
	for (let node of nodes) {
  	ctx.fillRect(node[0], node[1], 2, 2);
  }
  ctx.beginPath();
  for (let edge of edges) {
  	ctx.moveTo(nodes[edge[0]][0], nodes[edge[0]][1]);
    ctx.lineTo(nodes[edge[1]][0], nodes[edge[1]][1]);
  }
  ctx.stroke();
  window.requestAnimationFrame(draw);
}

function mutate() {
	nodes = nodes.map(n=>[
  	n[0]+n[2],
    n[1]+n[3],
    Math.max(-1,Math.min(1,n[2]+(Math.random()-.5)/10)),
    Math.max(-1,Math.min(1,n[3]+(Math.random()-.5)/10))
  ]);
  nodes = nodes.map(n=>[
  	Math.max(0,Math.min(c.width,n[0])),
    Math.max(0,Math.min(c.height,n[1])),
    n[0]>c.width||n[0]<0?n[2]*-1:n[2],
    n[1]>c.height||n[1]<0?n[3]*-1:n[3]
  ]);
}
draw();