मैट्रिक्स एनिमेटेड पृष्ठभूमि

2603 H4cK3dR4Du

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

28 November 2024

एनिमेटेड लिंक होवर

14 December 2025

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

10 January 2026

एनिमेटेड लॉगिन फॉर्म का HTML CSS कोड

HTML

CSS

JS

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;
});

अनुशंसित

एनिमेटेड लिंक होवर

सीएसएस एनिमेटेड लॉगिन फॉर्म डिजाइन

एनिमेटेड लॉगिन फॉर्म का HTML CSS कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS