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();
});
});