From 2808ed295a3015bf9e3daae5f6c3254a86404bf8 Mon Sep 17 00:00:00 2001
From: Timmy <loyangchun@gmail.com>
Date: Tue, 21 Apr 2026 16:23:26 +0800
Subject: [PATCH] docs: restore SMIL animations in embedded Caddy diagram SVG

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 caddy-netbird-diagram.svg | 57 +++++++++++++++++++++++++++++++++------
 1 file changed, 49 insertions(+), 8 deletions(-)

diff --git a/caddy-netbird-diagram.svg b/caddy-netbird-diagram.svg
index 8f33af0..7e8bdf9 100644
--- a/caddy-netbird-diagram.svg
+++ b/caddy-netbird-diagram.svg
@@ -30,6 +30,14 @@
     <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.06" stroke-width="1"/>
     </pattern>
+
+    <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>
   </defs>
 
   <rect width="1060" height="810" fill="#0f1419"/>
@@ -57,7 +65,10 @@
       <text x="160" y="153" font-size="15" font-weight="700" fill="#1dd1a1">Caddy</text>
       <text x="213" y="153" font-size="13" font-weight="500" fill="#8b98a5">反向代理</text>
 
-      <circle cx="285" cy="148" r="6" fill="#1dd1a1" opacity="0.35"/>
+      <circle cx="285" cy="148" r="5" fill="#1dd1a1" opacity="0.8">
+        <animate attributeName="r" values="5;11;5" dur="2s" repeatCount="indefinite"/>
+        <animate attributeName="opacity" values="0.8;0;0.8" dur="2s" repeatCount="indefinite"/>
+      </circle>
       <circle cx="285" cy="148" r="3.5" fill="#1dd1a1"/>
 
       <g font-family="'JetBrains Mono', 'Consolas', monospace" font-size="12.5">
@@ -140,15 +151,45 @@
       </g>
     </g>
 
-    <path d="M 68 187 L 140 187" stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>
-    <path d="M 470 186 L 720 186" stroke="#ffd166" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-y)"/>
-    <path d="M 470 265 L 720 265" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
-    <path d="M 470 303 L 720 303" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
-    <path d="M 470 341 L 720 341" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
-    <path d="M 470 379 L 720 379" stroke="#a29bfe" stroke-width="1.8" fill="none" stroke-opacity="0.65" marker-end="url(#ar-p)"/>
-    <path d="M 90 488 L 690 488 L 690 440 L 720 440" stroke="#ff6b9d" stroke-width="2" fill="none" stroke-dasharray="6 4" marker-end="url(#ar-pk)"/>
+    <path id="p-in" d="M 68 187 L 140 187" stroke="#ffd166" stroke-width="2" fill="none" marker-end="url(#ar-y)"/>
+    <path id="p-dash" d="M 470 186 L 720 186" stroke="#ffd166" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-y)"/>
+    <path id="p-api" d="M 470 265 L 720 265" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
+    <path id="p-oauth" d="M 470 303 L 720 303" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
+    <path id="p-relay" d="M 470 341 L 720 341" stroke="#5ec9d6" stroke-width="1.8" fill="none" stroke-opacity="0.55" marker-end="url(#ar-c)"/>
+    <path id="p-grpc" d="M 470 379 L 720 379" stroke="#a29bfe" stroke-width="1.8" fill="none" stroke-opacity="0.65" marker-end="url(#ar-p)"/>
+    <path id="p-stun" d="M 90 488 L 690 488 L 690 440 L 720 440" stroke="#ff6b9d" stroke-width="2" fill="none" stroke-dasharray="6 4" marker-end="url(#ar-pk)"/>
 
     <text x="360" y="512" font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#ff6b9d" font-weight="700">STUN · 直送，不經 Caddy</text>
+
+    <circle r="4" fill="#ffd166" filter="url(#glow)">
+      <animateMotion dur="1.4s" repeatCount="indefinite"><mpath href="#p-in"/></animateMotion>
+    </circle>
+    <circle r="4" fill="#ffd166" filter="url(#glow)">
+      <animateMotion dur="1.4s" begin="-0.7s" repeatCount="indefinite"><mpath href="#p-in"/></animateMotion>
+    </circle>
+
+    <circle r="4" fill="#ffd166" filter="url(#glow)">
+      <animateMotion dur="1.8s" repeatCount="indefinite"><mpath href="#p-dash"/></animateMotion>
+    </circle>
+    <circle r="4" fill="#5ec9d6" filter="url(#glow)">
+      <animateMotion dur="1.8s" begin="-0.3s" repeatCount="indefinite"><mpath href="#p-api"/></animateMotion>
+    </circle>
+    <circle r="4" fill="#5ec9d6" filter="url(#glow)">
+      <animateMotion dur="1.8s" begin="-0.6s" repeatCount="indefinite"><mpath href="#p-oauth"/></animateMotion>
+    </circle>
+    <circle r="4" fill="#5ec9d6" filter="url(#glow)">
+      <animateMotion dur="1.8s" begin="-0.9s" repeatCount="indefinite"><mpath href="#p-relay"/></animateMotion>
+    </circle>
+    <circle r="4" fill="#a29bfe" filter="url(#glow)">
+      <animateMotion dur="1.8s" begin="-1.2s" repeatCount="indefinite"><mpath href="#p-grpc"/></animateMotion>
+    </circle>
+
+    <circle r="4" fill="#ff6b9d" filter="url(#glow)">
+      <animateMotion dur="2.4s" repeatCount="indefinite"><mpath href="#p-stun"/></animateMotion>
+    </circle>
+    <circle r="4" fill="#ff6b9d" filter="url(#glow)">
+      <animateMotion dur="2.4s" begin="-1.2s" repeatCount="indefinite"><mpath href="#p-stun"/></animateMotion>
+    </circle>
   </g>
 
   <g font-family="'JetBrains Mono', 'Consolas', monospace" font-size="11" fill="#8b98a5">