Liquid Light Flow

HTML

CSS

JS

const canvas = document.getElementById('liquid');
const ctx = canvas.getContext('2d');
let w, h, t = 0;
function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
function draw() {
  t += 0.01;
  ctx.clearRect(0, 0, w, h);
  for (let i = 0; i < 50; i++) {
    const x = (w / 2) + Math.sin(t + i / 2) * w / 3 * Math.sin(t / 2);
    const y = (h / 2) + Math.cos(t + i / 2) * h / 3 * Math.cos(t / 3);
    const r = 200 + Math.sin(i + t) * 50;
    const g = 50 + Math.cos(i + t * 1.5) * 150;
    const b = 255 - Math.sin(i - t) * 100;
    const size = 80 + Math.sin(t + i) * 30;
    const gradient = ctx.createRadialGradient(x, y, 0, x, y, size);
    gradient.addColorStop(0, `rgba(${r},${g},${b},0.6)`);
    gradient.addColorStop(1, `rgba(${r},${g},${b},0)`);
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fill();
  }
  requestAnimationFrame(draw);
}
draw();

Ad #1

Ad #2