WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Internet Animated Background
2423
H4cK3dR4Du
Open In Editor
Publish Your Code
Recommended
13 July 2024
Animated Download Button
28 November 2024
Animated Link Hover
8 February 2025
Animated Login Form HTML CSS
HTML
Copy
Internet Background
CSS
Copy
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background-color: #1a1a1a; } #network-canvas { position: fixed; top: 0; left: 0; }
JS
Copy
const canvas = document.getElementById('network-canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const nodes = []; const maxNodes = 100; const maxDistance = 100; class Node { constructor(x, y) { this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 2; this.vy = (Math.random() - 0.5) * 2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle = '#00ffcc'; ctx.fill(); } } for (let i = 0; i < maxNodes; i++) { nodes.push(new Node(Math.random() * canvas.width, Math.random() * canvas.height)); } function drawConnections() { for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const dx = nodes[i].x - nodes[j].x; const dy = nodes[i].y - nodes[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(nodes[i].x, nodes[i].y); ctx.lineTo(nodes[j].x, nodes[j].y); ctx.strokeStyle = `rgba(0, 255, 204, ${1 - distance / maxDistance})`; ctx.stroke(); } } } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (const node of nodes) { node.update(); node.draw(); } drawConnections(); requestAnimationFrame(animate); } animate(); window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });