3D Neon Tunnel Animation

HTML

CSS

JS

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let w, h, cx, cy;
function resize(){
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  cx = w / 2;
  cy = h / 2;
}
window.addEventListener('resize', resize);
resize();
const particles = [];
const total = 900;
for(let i=0;i<total;i++){
  particles.push(resetParticle(true));
}
function resetParticle(initial=false){
  const angle = Math.random() * Math.PI * 2;
  const radius = Math.random() * 400 + 20;
  return {
    x: Math.cos(angle) * radius,
    y: Math.sin(angle) * radius,
    z: initial ? Math.random() * 2000 : 2000,
    size: Math.random() * 2 + 0.5,
    hue: Math.random() * 360
  };
}
let time = 0;
function animate(){
  time += 0.01;
  ctx.fillStyle = 'rgba(0,0,0,0.15)';
  ctx.fillRect(0,0,w,h);
  particles.forEach((p, i) => {
    p.z -= 15;
    if(p.z <= 1) Object.assign(p, resetParticle());
    const scale = 800 / p.z;
    const x = cx + p.x * scale + Math.sin(time + i) * 10;
    const y = cy + p.y * scale + Math.cos(time + i) * 10;
    const r = p.size * scale;
    const gradient = ctx.createRadialGradient(x,y,0,x,y,r*4);
    gradient.addColorStop(0, `hsla(${(p.hue + time*200)%360},100%,70%,1)`);
    gradient.addColorStop(1, 'transparent');
    ctx.beginPath();
    ctx.fillStyle = gradient;
    ctx.arc(x,y,r*4,0,Math.PI*2);
    ctx.fill();
  });
  for(let i=0;i<6;i++){
    const depth = (time * 400 + i * 250) % 2000;
    const scale = 800 / (2000 - depth + 1);
    const radius = 220 * scale;
    ctx.beginPath();
    ctx.lineWidth = 2 * scale;
    ctx.strokeStyle = `hsla(${(time*100 + i*60)%360},100%,60%,0.7)`;
    ctx.ellipse(cx, cy, radius * 1.2, radius, time + i, 0, Math.PI*2);
    ctx.stroke();
  }
  requestAnimationFrame(animate);
}
animate();

Ad #1

Ad #2