<canvas id="canvas"></canvas>
<img src="https://assets.codepen.io/489403/blacklivesmatter.jpeg" />
body {
  margin: 0;
  background: #000000;
}

#canvas {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

img {
  display: none;
}
//sometimes needs a refresh...

const canvas = document.querySelector("canvas");
const img = document.querySelector("img");
const c = canvas.getContext("2d");

imgStroke = c.createPattern(img, "no-repeat");

imgStroke.set;

canvas.width = 512;
canvas.height = 513;

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomRgbValue() {
  const red = randomIntFromRange(41, 44);
  const green = randomIntFromRange(62, 128);
  const blue = randomIntFromRange(80, 185);

  return `rgba(${red},${green},${blue},1)`;
}

function Particle(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;
  this.radians = Math.random() * Math.PI * 2;
  this.velocity = 0.05;
  this.distanceFromCenter =
    //this for 2d randomIntFromRange(50, 220);
    // this makes 3D
    { x: randomIntFromRange(0, 200), y: randomIntFromRange(0, 200) };

  this.update = () => {
    //move points over time
    const lastPoint = { x: this.x, y: this.y };
    this.radians += this.velocity;
    this.x = x + Math.cos(this.radians) * this.distanceFromCenter.x;
    this.y = y + Math.sin(this.radians) * this.distanceFromCenter.y;
    this.draw(lastPoint);
  };

  this.draw = (lastPoint) => {
    c.beginPath();
    c.strokeStyle = imgStroke;
    c.lineWidth = this.radius;
    c.moveTo(lastPoint.x, lastPoint.y); //prev frame
    c.lineTo(this.x, this.y); // next frame
    c.stroke();
    // c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    // c.fillStyle = this.color;
    // c.fill();
    c.closePath();
  };
}

let particles;
function init() {
  particles = [];

  for (let i = 0; i < 400; i++) {
    const radius = Math.random * 2 + 1;
    const color = randomRgbValue();
    console.log(color);
    particles.push(
      new Particle(canvas.width / 2, canvas.height / 2, radius, color)
    );
  }
}

//animate loop
function animate() {
  requestAnimationFrame(animate);
  c.fillStyle = "rgba(0, 0, 0, 0.05)";
  //below clears screen ever rerender, try commenting when clearRect, fill rect gives tails
  //c.fillStyle = imgStroke;
  c.fillRect(0, 0, canvas.width, canvas.height);

  particles.forEach((particle) => {
    particle.update();
  });
}

init();
animate();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.