canvas fully covers

This tailwind example is contributed by ABDESLAMI ACHRAF, on 07-Dec-2024. 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 ABDESLAMI ACHRAF

Tailwind v3.4 5.1k 21

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

Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Rathanak Phan

1 year ago

2.3k
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Abdul Baset Bappy

1 year ago

2k
Infographic Component
Design a modern infographic component with Tailwind CSS. This component helps you display data in a clean, responsive, and visually appealing way. With utility classes, gradients, and smooth transitions, you can quickly build infographics that look professional and work perfectly on all devices.

CodewithFaraz

1 year ago

1.4k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
profile2

pablitodgb

1 year ago

1.4k
Sidebar with only icons

Rajesh Maheshwari

1 year ago

2.8k
Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
CYBERNARA
Cybernara is a futuristic design style that blends cyberpunk elements with traditional Japanese aesthetics, creating a unique digital experience. Let me break down the key aspects of this approach

Anonymous

1 year ago

1.5k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
footer

Raul antonio de la cruz hernandez

10 months ago

811
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

448