simple-particle.js

const h = (t, o) => Object.assign(document.createElement(t), o);
const c = h('canvas', {width: 400, height: 300, style: 'background: black;'});
const ctx = c.getContext('2d');
document.body.appendChild(c);
const s = new Set();
requestAnimationFrame(function draw(time) {
  s.forEach(f => f(time));
  requestAnimationFrame(draw);
});
const w = ms => new Promise(res => setTimeout(res, ms));
class Dot {
  x = 0.5;
  y = 0.5;
  velX;
  velY;
  accX;
  accY;
  constructor(velX, velY, accX = 0, accY = 0) {
    this.velX = velX;
    this.velY = velY;
    this.accX = accX;
    this.accY = accY;
  }
  grow() {
    this.x += this.velX;
    this.y += this.velY;
    this.velX += this.accX;
    this.velY += this.accY;
  }
}

s.add(() => {
  ctx.clearRect(0, 0, c.width, c.height);
});
while (1) {
  if (s.size < 1000) {
    Array.from({length: 10}).forEach(() => {
      const vx = (Math.random() - 0.5) * 0.01;
      const vy = (Math.random() - 0.5) * 0.01;
      const dot = new Dot(vx, vy, vx * 0.1, vy * 0.1);
      const grow = () => {
        dot.grow();
        ctx.fillStyle = 'white';
        ctx.fillRect(c.width * dot.x, c.height * dot.y, 1, 1);
        if (Math.abs(dot.x) > 1 || Math.abs(dot.y) > 1 || dot.x < 0 || dot.y < 0) s.delete(grow);
      };
      s.add(grow);
    });
  }
  
  await w(5);
}