37 lines
No EOL
1.9 KiB
XML
37 lines
No EOL
1.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
|
<!-- Flow lines -->
|
|
<path d="M 20 80 Q 100 60, 180 80" fill="none" stroke="#8B5CF6" stroke-width="2" opacity="0.3"/>
|
|
<path d="M 20 100 L 180 100" fill="none" stroke="#8B5CF6" stroke-width="2" opacity="0.5"/>
|
|
<path d="M 20 120 Q 100 140, 180 120" fill="none" stroke="#8B5CF6" stroke-width="2" opacity="0.3"/>
|
|
|
|
<!-- Animated data packets -->
|
|
|
|
<circle cx="20" cy="100" r="3" fill="#06B6D4">
|
|
<animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite" begin="0s"/>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0s"/>
|
|
</circle>
|
|
|
|
<circle cx="20" cy="100" r="3" fill="#06B6D4">
|
|
<animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite" begin="0.5s"/>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="0.5s"/>
|
|
</circle>
|
|
|
|
<circle cx="20" cy="100" r="3" fill="#06B6D4">
|
|
<animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite" begin="1s"/>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="1s"/>
|
|
</circle>
|
|
|
|
<circle cx="20" cy="100" r="3" fill="#06B6D4">
|
|
<animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="1.5s"/>
|
|
</circle>
|
|
|
|
<circle cx="20" cy="100" r="3" fill="#06B6D4">
|
|
<animate attributeName="cx" from="20" to="180" dur="2s" repeatCount="indefinite" begin="2s"/>
|
|
<animate attributeName="opacity" values="0;1;1;0" dur="2s" repeatCount="indefinite" begin="2s"/>
|
|
</circle>
|
|
|
|
<!-- Nodes -->
|
|
<circle cx="20" cy="100" r="8" fill="#8B5CF6"/>
|
|
<circle cx="180" cy="100" r="8" fill="#06B6D4"/>
|
|
</svg> |