WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dizayn bir algoritma
575
Metehan
Open In Editor
Publish Your Code
Recommended
17 May 2025
MUSIC
15 October 2024
Anes Plans Card
22 October 2024
purpur flower
HTML
Copy
Yeşil Ağ Animasyonu
CSS
Copy
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background-color: #0a1a0a; /* Koyu yeşil tona çevrildi */ } #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; // Yeşil tonlar için renk ayarları const nodeColor = '#00ff4c'; // Daha parlak yeşil const lineColorBase = '0, 255, 76'; // RGB yeşil ton 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 = nodeColor; 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(${lineColorBase}, ${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; });