·

body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: Arial, sans-serif; background-color: #1a1a1a; } #canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .logo { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } document.addEventListener(‘DOMContentLoaded’, function() { const canvas = document.getElementById(‘canvas’); const ctx = canvas.getContext(‘2d’); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); const particles = []; const particleCount = 50; class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 3 + 1; this.speedX = Math.random() * 0.5 – 0.25; this.speedY = Math.random() * 0.5 – 0.25; } update() { this.x += this.speedX; this.y += this.speedY; if (this.x canvas.width) this.speedX *= -1; if (this.y canvas.height) this.speedY *= -1; } draw() { ctx.fillStyle = ‘rgba(224, 224, 224, 0.5)’; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); } } function init() { particles.length = 0; for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); for (let j = i; j < particles.length; j++) { const dx = particles[i].x – particles[j].x; const dy = particles[i].y – particles[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance { resizeCanvas(); init(); }); });