Interactive AI Graph Network

<section class="w-full h-[500px] bg-[#020617] relative overflow-hidden flex items-center justify-center">

  <canvas id="graph"></canvas>

  <script>
    const canvas = document.getElementById("graph");
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = 500;

    const nodes = [];

    for (let i = 0; i < 25; i++) {
      nodes.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        vx: (Math.random() - 0.5) * 1,
        vy: (Math.random() - 0.5) * 1
      });
    }

    let mouse = { x: 0, y: 0 };

    canvas.addEventListener("mousemove", e => {
      mouse.x = e.clientX;
      mouse.y = e.clientY;
    });

    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Draw connections
      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 dist = Math.sqrt(dx * dx + dy * dy);

          if (dist < 120) {
            ctx.strokeStyle = "rgba(34,211,238," + (1 - dist / 120) + ")";
            ctx.beginPath();
            ctx.moveTo(nodes[i].x, nodes[i].y);
            ctx.lineTo(nodes[j].x, nodes[j].y);
            ctx.stroke();
          }
        }
      }

      // Draw nodes
      nodes.forEach(n => {
        ctx.beginPath();
        ctx.arc(n.x, n.y, 3, 0, Math.PI * 2);
        ctx.fillStyle = "#22d3ee";
        ctx.fill();

        // movement
        n.x += n.vx;
        n.y += n.vy;

        if (n.x < 0 || n.x > canvas.width) n.vx *= -1;
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;

        // attract to mouse
        const dx = mouse.x - n.x;
        const dy = mouse.y - n.y;
        n.x += dx * 0.002;
        n.y += dy * 0.002;
      });

      requestAnimationFrame(draw);
    }

    draw();
  </script>

</section>