Floating Energy Orbs

HTML

CSS

JS

const canvas = document.getElementById("energy");
const ctx = canvas.getContext("2d");
let w, h, orbs = [];
function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize);
resize();
class Orb {
  constructor() {
    this.reset();
  }
  reset() {
    this.x = Math.random() * w;
    this.y = Math.random() * h;
    this.r = 20 + Math.random() * 40;
    this.a = Math.random() * 360;
    this.speed = 0.5 + Math.random() * 1;
    this.hue = Math.random() * 360;
  }
  update() {
    this.a += this.speed;
    this.x += Math.sin(this.a * Math.PI / 180) * 0.8;
    this.y += Math.cos(this.a * Math.PI / 180) * 0.8;
    if (this.x < 0 || this.x > w || this.y < 0 || this.y > h) this.reset();
  }
  draw() {
    const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
    gradient.addColorStop(0, `hsla(${this.hue}, 100%, 70%, 0.8)`);
    gradient.addColorStop(1, "transparent");
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
    ctx.fill();
  }
}
for (let i = 0; i < 25; i++) orbs.push(new Orb());
function animate() {
  ctx.clearRect(0, 0, w, h);
  for (let orb of orbs) {
    orb.update();
    orb.draw();
  }
  requestAnimationFrame(animate);
}
animate();

Ad #1

Ad #2