<canvas id="canvas"></canvas>
const numPoints = 9
const colors = ["", "red", "orange", "yellow", "green", "blue", "purple", "indigo", "magenta"]
const canvas = document.querySelector('#canvas')
const ctx = canvas.getContext('2d')

canvas.width = window.innerWidth
canvas.height = window.innerHeight
ctx.fillStyle = 'rgba(25, 25, 25, .05)'

let points = []

for(let i = 0; i < numPoints; i++){
  let point = {x: canvas.width/numPoints*i, 
             y: canvas.height/2}
  points.push(point)
}


function render(time){
  ctx.globalCompositeOperation = 'dodge'
  points.forEach( (point, i, arr) =>{ 
    ctx.beginPath()
    point.x += (Math.random()-.5)*5
    point.y += (Math.random() -.5)*25
    ctx.rect( point.x, point.y, 1, 1.0)
    ctx.fill()
    if(i === 4){
      for(let i = 0; i < arr.length; i ++){
        ctx.strokeStyle = `rgba(${time/(i*25)%255}, ${time/(i*10)%50}, ${time%127}, .05)`
        ctx.beginPath()
        ctx.moveTo(point.x, point.y);
        ctx.lineTo(arr[i].x, arr[i].y);
        ctx.stroke();
      }
      
    }
  })
  window.requestAnimationFrame(render);
}

render()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.