Interactive Neural Network Constellation: Dynamic Canvas Web Design

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Neural Network Constellation</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #030305;
            overflow: hidden;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

#networkCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

.ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 50px;
        }

.header h1 {
            font-size: 3.5rem;
            text-transform: uppercase;
            letter-spacing: 6px;
            background: linear-gradient(45deg, #00ffcc, #8a2be2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 12px;
            font-weight: 900;
        }

.header p {
            color: #666;
            font-size: 1.1rem;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

.stats {
            display: flex;
            gap: 25px;
        }

.stat-box {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            padding: 25px 40px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

.stat-label {
            color: #777;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
        }

.stat-value {
            color: #ffffff;
            font-size: 1.8rem;
            font-weight: bold;
            letter-spacing: 1px;
        }

.pulse {
            color: #00ffcc;
            display: flex;
            align-items: center;
            gap: 12px;
        }

.pulse::before {
            content: '';
            width: 12px;
            height: 12px;
            background: #00ffcc;
            border-radius: 50%;
            box-shadow: 0 0 15px #00ffcc;
            animation: blink 2s infinite ease-in-out;
        }

@keyframes blink {
            0%, 100% { opacity: 0.2; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.3); }
        }
    </style>
</head>
<body>
    <canvas id="networkCanvas"></canvas>
    <div class="ui-layer">
        <div class="header">
            <h1>Synapse</h1>
            <p>Interactive Topographic Interface</p>
        </div>
        <div class="stats">
            <div class="stat-box">
                <span class="stat-label">Active Nodes</span>
                <span class="stat-value" id="node-count">0</span>
            </div>
            <div class="stat-box">
                <span class="stat-label">System Status</span>
                <span class="stat-value pulse">Optimal</span>
            </div>
        </div>
    </div>

let particlesArray = [];
        let mouse = { x: null, y: null, radius: 180 };

window.addEventListener('mousemove', (e) => {
            mouse.x = e.x;
            mouse.y = e.y;
        });

window.addEventListener('mouseout', () => {
            mouse.x = null;
            mouse.y = null;
        });

window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

class Particle {
            constructor(x, y, directionX, directionY, size, color) {
                this.x = x;
                this.y = y;
                this.directionX = directionX;
                this.directionY = directionY;
                this.size = size;
                this.color = color;
            }

draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
            }

update() {
                if (this.x > canvas.width || this.x < 0) {
                    this.directionX = -this.directionX;
                }
                if (this.y > canvas.height || this.y < 0) {
                    this.directionY = -this.directionY;
                }
                
                let dx = mouse.x - this.x;
                let dy = mouse.y - this.y;
                let distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < mouse.radius + this.size) {
                    const forceDirectionX = dx / distance;
                    const forceDirectionY = dy / distance;
                    const force = (mouse.radius - distance) / mouse.radius;
                    const directionX = forceDirectionX * force * 4;
                    const directionY = forceDirectionY * force * 4;
                    
                    this.x -= directionX;
                    this.y -= directionY;
                } else {
                    this.x += this.directionX;
                    this.y += this.directionY;
                }
                this.draw();
            }
        }

function init() {
            particlesArray = [];
            let numberOfParticles = Math.min(Math.floor((canvas.height * canvas.width) / 10000), 300);
            nodeCountElement.innerText = numberOfParticles;
            
            for (let i = 0; i < numberOfParticles; i++) {
                let size = (Math.random() * 2) + 1;
                let x = (Math.random() * ((canvas.width - size * 2) - (size * 2)) + size * 2);
                let y = (Math.random() * ((canvas.height - size * 2) - (size * 2)) + size * 2);
                let directionX = (Math.random() * 1.5) - 0.75;
                let directionY = (Math.random() * 1.5) - 0.75;
                let color = '#8a2be2';
                
                particlesArray.push(new Particle(x, y, directionX, directionY, size, color));
            }
        }

function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            for (let i = 0; i < particlesArray.length; i++) {
                particlesArray[i].update();
            }
            connect();
        }

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        init();
        animate();
    </script>
</body>
</html>

Interactive Neural Network Constellation: Dynamic Canvas Web Design

You may like these posts :

Write Your Comment