WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
एनिमेटेड डॉट्स पृष्ठभूमि
2196
Vijay
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
1 August 2024
एनिमेटेड सोशल मीडिया बटन
7 March 2025
एनिमेटेड लॉगिन फॉर्म
5 July 2025
एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Dots Background</title> </head> <body> <canvas id="canvas"></canvas> </body> </html>
CSS
Copy
body { margin: 0; overflow: hidden; background: #000; } canvas { display: block; }
JS
Copy
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let particlesArray = []; class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 5 + 1; this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; } update() { this.x += this.speedX; this.y += this.speedY; if (this.size > 0.2) this.size -= 0.1; } draw() { ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } function init() { for (let i = 0; i < 100; i++) { particlesArray.push(new Particle()); } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); particlesArray[i].draw(); if (particlesArray[i].size <= 0.2) { particlesArray.splice(i, 1); i--; particlesArray.push(new Particle()); } } requestAnimationFrame(animate); } init(); animate(); window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; init(); });
