Home
ABDESLAMI ACHRAF
canvas fully covers

canvas fully covers

This tailwind example is contributed by ABDESLAMI ACHRAF, on 07-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Author box, User information,Admin Dashboard, User dashboard,about me

Footer Header Avatar Profile Team Select Dashboard About us

Author ABDESLAMI ACHRAF

1.5k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cosmos Node Network</title>

</head>
<style>
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  background: radial-gradient(circle, #1b2735, #090a0f);
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Ensure  the width */
  height: 100%; /* Ensure canvas fully covers the height */
}

</style>
<body>
  
  <canvas id="cosmosCanvas"></canvas>
  <script >
  
const canvas = document.getElementById('cosmosCanvas');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

resizeCanvas();
window.addEventListener('resize', resizeCanvas);

const particles = [];
const numParticles = 100;

class Particle {
  constructor(x, y, radius, speed) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.speed = speed;
    this.angle = Math.random() * Math.PI * 2;
  }

update() {
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed;

// Bounce off edges
    if (this.x < 0 || this.x > canvas.width) this.angle = Math.PI - this.angle;
    if (this.y < 0 || this.y > canvas.height) this.angle = -this.angle;
  }

draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    ctx.fill();
  }
}

// Initialize particles
for (let i = 0; i < numParticles; i++) {
  particles.push(
    new Particle(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      Math.random() * 4 + 1,
      Math.random() * 0.5 + 0.2
    )
  );
}

// Connect particles
function connectParticles() {
  for (let a = 0; a < particles.length; a++) {
    for (let b = a + 1; b < particles.length; b++) {
      const dist = Math.hypot(
        particles[a].x - particles[b].x,
        particles[a].y - particles[b].y
      );

if (dist < 120) {
        ctx.strokeStyle = `rgba(255, 255, 255, ${1 - dist / 120})`;
        ctx.lineWidth = 0.7;
        ctx.beginPath();
        ctx.moveTo(particles[a].x, particles[a].y);
        ctx.lineTo(particles[b].x, particles[b].y);
        ctx.stroke();
      }
    }
  }
}

// Animation Loop
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(particle => {
    particle.update();
    particle.draw();
  });
  connectParticles();
  requestAnimationFrame(animate);
}

// Start Animation
animate();

</script>
</body>
</html>

Related Examples