timmy/netbird-selfhosted
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: restore SMIL animations in embedded Caddy diagram SVG

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Timmy
2026-04-21 16:23:26 +08:00
parent c30abe2e83
commit 2808ed295a
1 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
caddy-netbird-diagram.svg
View File

@@ -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">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 11 KiB