42_38/proxmox-cluster-topology.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1020 580" font-family="'Space Grotesk', 'Segoe UI', system-ui, sans-serif">
  <defs>
    <marker id="ar-y" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#ffd166"/>
    </marker>
    <marker id="ar-g" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#1dd1a1"/>
    </marker>
    <marker id="ar-c" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#5ec9d6"/>
    </marker>

    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2.5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <linearGradient id="inet-grad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#ffd166" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="#ffd166" stop-opacity="0.04"/>
    </linearGradient>
    <linearGradient id="gw-grad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#1dd1a1" stop-opacity="0.22"/>
      <stop offset="100%" stop-color="#1dd1a1" stop-opacity="0.06"/>
    </linearGradient>
    <linearGradient id="pve-grad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1e2730"/>
      <stop offset="100%" stop-color="#161d25"/>
    </linearGradient>
    <linearGradient id="bridge-grad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#5ec9d6" stop-opacity="0.06"/>
      <stop offset="50%" stop-color="#5ec9d6" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="#5ec9d6" stop-opacity="0.06"/>
    </linearGradient>

    <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
      <path d="M 24 0 L 0 0 0 24" fill="none" stroke="#5ec9d6" stroke-opacity="0.04" stroke-width="1"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="1020" height="580" fill="#0f1419"/>

  <!-- Title -->
  <text x="20" y="36" font-size="24" font-weight="700" fill="#e6edf3">Proxmox 叢集網路架構</text>
  <text x="20" y="58" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12" fill="#8b98a5">network: <tspan fill="#5ec9d6">192.168.42.0/24</tspan> · bridge: vmbr0</text>

  <!-- Diagram container -->
  <rect x="10" y="75" width="1000" height="450" rx="14" fill="#1a2129" stroke="#2d3942" stroke-width="1"/>
  <rect x="10" y="75" width="1000" height="450" rx="14" fill="url(#grid)"/>

  <!-- Diagram content (shifted down by 80) -->
  <g transform="translate(0, 80)">
    <!-- ===== Internet cloud ===== -->
    <g>
      <rect x="20" y="40" width="160" height="70" rx="35"
            fill="url(#inet-grad)" stroke="#ffd166" stroke-width="1.6"/>
      <path d="M 48 88
               C 42 88, 38 84, 40 80
               C 36 78, 37 73, 41 72
               C 42 67, 49 66, 53 69
               C 57 64, 65 65, 67 70
               C 73 69, 78 74, 76 79
               C 80 81, 79 86, 75 88
               Z"
            fill="#ffd166" fill-opacity="0.18" stroke="#ffd166" stroke-width="1.4"/>
      <text x="90" y="80" font-size="14" font-weight="700" fill="#ffd166">Internet</text>
    </g>

    <!-- ===== Gateway (OpenWRT) with firewall icon ===== -->
    <g>
      <rect x="220" y="32" width="280" height="86" rx="10"
            fill="url(#gw-grad)" stroke="#1dd1a1" stroke-width="1.8"/>

      <g transform="translate(240, 50)">
        <path d="M 18 4
                 C 14 10, 14 14, 18 16
                 C 20 12, 22 12, 22 16
                 C 26 14, 26 10, 22 6
                 C 21 9, 19 9, 18 4 Z"
              fill="#ff6b9d" fill-opacity="0.9" stroke="#ff6b9d" stroke-width="0.8"/>

        <g stroke="#1dd1a1" stroke-width="1.3" fill="#1dd1a1" fill-opacity="0.08">
          <rect x="2"  y="20" width="10" height="7"/>
          <rect x="13" y="20" width="10" height="7"/>
          <rect x="24" y="20" width="10" height="7"/>
          <rect x="-3" y="28" width="7"  height="7"/>
          <rect x="5"  y="28" width="10" height="7"/>
          <rect x="16" y="28" width="10" height="7"/>
          <rect x="27" y="28" width="10" height="7"/>
          <rect x="2"  y="36" width="10" height="7"/>
          <rect x="13" y="36" width="10" height="7"/>
          <rect x="24" y="36" width="10" height="7"/>
        </g>
      </g>

      <text x="295" y="65" font-size="14" font-weight="700" fill="#e6edf3">OpenWRT GW</text>
      <text x="295" y="85" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#1dd1a1">192.168.42.10</text>
      <text x="295" y="103" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">NAT · DHCP · Firewall</text>

      <circle cx="482" cy="50" r="4" fill="#1dd1a1" opacity="0.8">
        <animate attributeName="r" values="4;10;4" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite"/>
      </circle>
      <circle cx="482" cy="50" r="3" fill="#1dd1a1"/>
    </g>

    <!-- ===== vmbr0 bridge bar ===== -->
    <g>
      <rect x="80" y="180" width="860" height="54" rx="8"
            fill="url(#bridge-grad)" stroke="#5ec9d6" stroke-width="1.5"/>
      <text x="102" y="205" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="13" font-weight="700" fill="#5ec9d6">vmbr0</text>
      <text x="150" y="205" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12" fill="#8b98a5">192.168.42.0/24</text>
      <text x="918" y="223" text-anchor="end" font-size="11" fill="#8b98a5" font-style="italic">L2 bridge</text>

      <circle cx="220" cy="234" r="4" fill="#5ec9d6"/>
      <circle cx="510" cy="234" r="4" fill="#5ec9d6"/>
      <circle cx="800" cy="234" r="4" fill="#5ec9d6"/>
    </g>

    <!-- ===== PVE nodes ===== -->
    <!-- pve (.38) -->
    <g>
      <rect x="80" y="290" width="280" height="110" rx="12"
            fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>

      <g transform="translate(100, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
        <rect x="0" y="0" width="26" height="7" rx="1"/>
        <rect x="0" y="10" width="26" height="7" rx="1"/>
        <rect x="0" y="20" width="26" height="7" rx="1"/>
        <circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
        <circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
        <circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
      </g>

      <text x="140" y="330" font-size="18" font-weight="700" fill="#e6edf3">pve</text>
      <text x="340" y="330" text-anchor="end" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="14" fill="#a29bfe" font-weight="700">.38</text>
      <text x="140" y="350" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#8b98a5">192.168.42.38</text>

      <line x1="100" y1="368" x2="340" y2="368" stroke="#2d3942" stroke-width="1"/>
      <text x="100" y="388" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
    </g>

    <!-- pve-02 (.39) -->
    <g>
      <rect x="370" y="290" width="280" height="110" rx="12"
            fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>

      <g transform="translate(390, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
        <rect x="0" y="0" width="26" height="7" rx="1"/>
        <rect x="0" y="10" width="26" height="7" rx="1"/>
        <rect x="0" y="20" width="26" height="7" rx="1"/>
        <circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
        <circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
        <circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
      </g>

      <text x="430" y="330" font-size="18" font-weight="700" fill="#e6edf3">pve-02</text>
      <text x="630" y="330" text-anchor="end" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="14" fill="#a29bfe" font-weight="700">.39</text>
      <text x="430" y="350" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#8b98a5">192.168.42.39</text>

      <line x1="390" y1="368" x2="630" y2="368" stroke="#2d3942" stroke-width="1"/>
      <text x="390" y="388" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
    </g>

    <!-- pve-03 (.40) -->
    <g>
      <rect x="660" y="290" width="280" height="110" rx="12"
            fill="url(#pve-grad)" stroke="#a29bfe" stroke-width="1.6"/>

      <g transform="translate(680, 318)" stroke="#a29bfe" stroke-width="1.4" fill="none">
        <rect x="0" y="0" width="26" height="7" rx="1"/>
        <rect x="0" y="10" width="26" height="7" rx="1"/>
        <rect x="0" y="20" width="26" height="7" rx="1"/>
        <circle cx="3.5" cy="3.5" r="0.9" fill="#a29bfe" stroke="none"/>
        <circle cx="3.5" cy="13.5" r="0.9" fill="#a29bfe" stroke="none"/>
        <circle cx="3.5" cy="23.5" r="0.9" fill="#a29bfe" stroke="none"/>
      </g>

      <text x="720" y="330" font-size="18" font-weight="700" fill="#e6edf3">pve-03</text>
      <text x="920" y="330" text-anchor="end" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="14" fill="#a29bfe" font-weight="700">.40</text>
      <text x="720" y="350" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11.5" fill="#8b98a5">192.168.42.40</text>

      <line x1="680" y1="368" x2="920" y2="368" stroke="#2d3942" stroke-width="1"/>
      <text x="680" y="388" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="10.5" fill="#8b98a5">Proxmox VE · cluster node</text>
    </g>

    <!-- ===== Paths ===== -->
    <path id="p-inet" d="M 180 75 L 220 75"
          stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>

    <path id="p-gw-br" d="M 360 118 L 360 180"
          stroke="#1dd1a1" stroke-width="2" fill="none" marker-end="url(#ar-g)"/>

    <path id="p-pve1" d="M 220 234 L 220 290"
          stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
    <path id="p-pve2" d="M 510 234 L 510 290"
          stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>
    <path id="p-pve3" d="M 800 234 L 800 290"
          stroke="#5ec9d6" stroke-width="1.8" fill="none" marker-end="url(#ar-c)"/>

    <!-- ===== Animated dots ===== -->
    <circle r="4" fill="#ffd166" filter="url(#glow)">
      <animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
    </circle>
    <circle r="4" fill="#ffd166" filter="url(#glow)">
      <animateMotion dur="1.2s" begin="-0.6s" repeatCount="indefinite"><mpath href="#p-inet"/></animateMotion>
    </circle>

    <circle r="4" fill="#1dd1a1" filter="url(#glow)">
      <animateMotion dur="1s" repeatCount="indefinite"><mpath href="#p-gw-br"/></animateMotion>
    </circle>

    <circle r="4" fill="#5ec9d6" filter="url(#glow)">
      <animateMotion dur="1.2s" repeatCount="indefinite"><mpath href="#p-pve1"/></animateMotion>
    </circle>
    <circle r="4" fill="#5ec9d6" filter="url(#glow)">
      <animateMotion dur="1.2s" begin="-0.4s" repeatCount="indefinite"><mpath href="#p-pve2"/></animateMotion>
    </circle>
    <circle r="4" fill="#5ec9d6" filter="url(#glow)">
      <animateMotion dur="1.2s" begin="-0.8s" repeatCount="indefinite"><mpath href="#p-pve3"/></animateMotion>
    </circle>

    <!-- Bridge traffic (left↔right) -->
    <circle r="3" fill="#5ec9d6" opacity="0.7">
      <animate attributeName="cx" values="100;920;100" dur="6s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
    </circle>
    <circle r="3" fill="#5ec9d6" opacity="0.7">
      <animate attributeName="cx" values="920;100;920" dur="6s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="207;207;207" dur="6s" repeatCount="indefinite"/>
    </circle>
  </g>

  <!-- Legend -->
  <g transform="translate(20, 548)" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#8b98a5">
    <g>
      <circle cx="5" cy="0" r="5" fill="#ffd166"/>
      <text x="16" y="4">Internet</text>
    </g>
    <g transform="translate(110, 0)">
      <circle cx="5" cy="0" r="5" fill="#1dd1a1"/>
      <text x="16" y="4">OpenWRT Gateway</text>
    </g>
    <g transform="translate(290, 0)">
      <circle cx="5" cy="0" r="5" fill="#5ec9d6"/>
      <text x="16" y="4">vmbr0 (L2 bridge)</text>
    </g>
    <g transform="translate(460, 0)">
      <circle cx="5" cy="0" r="5" fill="#a29bfe"/>
      <text x="16" y="4">PVE 節點</text>
    </g>
  </g>
</svg>