console.log("Meine Seite läuft!"); const canvas = document.getElementById('bg'); const ctx = canvas.getContext('2d'); let W, H, particles = []; function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; } function createParticles() { particles = []; const count = Math.floor(W * H / 6500); for (let i = 0; i < count; i++) { particles.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*1.8+0.4, dx: (Math.random()-0.5)*0.3, dy: (Math.random()-0.5)*0.3, alpha: Math.random()*0.5+0.1 }); } } function drawBg() { const g = ctx.createRadialGradient(W*0.3, H*0.4, 0, W*0.3, H*0.4, W*0.85); g.addColorStop(0, '#0057c2'); g.addColorStop(0.5, '#001f44'); g.addColorStop(1, '#000d22'); ctx.fillStyle = g; ctx.fillRect(0,0,W,H); const g2 = ctx.createRadialGradient(W*0.82, H*0.72, 0, W*0.82, H*0.72, W*0.5); g2.addColorStop(0, 'rgba(0,55,150,0.45)'); g2.addColorStop(1, 'transparent'); ctx.fillStyle = g2; ctx.fillRect(0,0,W,H); } function animate() { ctx.clearRect(0,0,W,H); drawBg(); ctx.lineWidth = 1; for (let i = 0; i < particles.length; i++) { for (let j = i+1; j < particles.length; j++) { const dx = particles[i].x-particles[j].x, dy = particles[i].y-particles[j].y; const d = Math.sqrt(dx*dx+dy*dy); if (d < 120) { ctx.globalAlpha = (1-d/120)*0.12; ctx.strokeStyle='#fff'; ctx.beginPath(); ctx.moveTo(particles[i].x,particles[i].y); ctx.lineTo(particles[j].x,particles[j].y); ctx.stroke(); } } } ctx.globalAlpha = 1; particles.forEach(p => { p.x+=p.dx; p.y+=p.dy; if(p.x<0||p.x>W) p.dx*=-1; if(p.y<0||p.y>H) p.dy*=-1; ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fillStyle=`rgba(255,255,255,${p.alpha})`; ctx.fill(); }); requestAnimationFrame(animate); } window.addEventListener('resize', ()=>{ resize(); createParticles(); }); resize(); createParticles(); animate();