canvas fully covers

This tailwind example is contributed by Balogun David Olajuwon , on 09-May-2025. Component is made with Tailwind v3.4. 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 Balogun David Olajuwon

Tailwind v3.4 1.2k 5

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>