Zakaria
52 lines
2.5 KiB
XML
52 lines
2.5 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" role="img" aria-label="Animated load balancer">
|
|
<style>
|
|
.device { fill:#30283d; }
|
|
.wire { fill:none; stroke:#30283d; stroke-width:2.4; stroke-linecap:round; }
|
|
.led { fill:#ffc12d; }
|
|
.blink1 { animation:blink 1.15s ease-in-out infinite; }
|
|
.blink2 { animation:blink 1.15s .25s ease-in-out infinite; }
|
|
.blink3 { animation:blink 1.15s .5s ease-in-out infinite; }
|
|
@keyframes blink { 0%,100%{opacity:.25} 45%,65%{opacity:1} }
|
|
</style>
|
|
|
|
<!-- Load balancer -->
|
|
<rect class="device" x="20" y="28" width="96" height="29" rx="4"/>
|
|
<circle class="led blink1" cx="35" cy="42.5" r="5.3"/>
|
|
<g class="led">
|
|
<circle class="blink1" cx="72" cy="37" r="2"/>
|
|
<circle class="blink2" cx="81" cy="37" r="2"/>
|
|
<circle class="blink3" cx="97" cy="37" r="2"/>
|
|
<circle class="blink2" cx="106" cy="37" r="2"/>
|
|
<circle class="blink3" cx="64" cy="47" r="2"/>
|
|
<circle class="blink1" cx="75" cy="47" r="2"/>
|
|
<circle class="blink2" cx="85" cy="47" r="2"/>
|
|
<circle class="blink3" cx="97" cy="47" r="2"/>
|
|
<circle class="blink1" cx="106" cy="47" r="2"/>
|
|
</g>
|
|
|
|
<!-- Connections -->
|
|
<path id="leftPath" class="wire" d="M58 64 L49 83 L42 97"/>
|
|
<path id="rightPath" class="wire" d="M79 64 L88 83 L94 97"/>
|
|
|
|
<!-- Packets moving from balancer down each branch -->
|
|
<circle r="3.2" fill="#ffc12d">
|
|
<animateMotion dur="1.55s" repeatCount="indefinite" path="M58 64 L49 83 L42 97"/>
|
|
<animate attributeName="opacity" values="0;1;1;0" keyTimes="0;.08;.82;1" dur="1.55s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle r="3.2" fill="#ffc12d">
|
|
<animateMotion begin=".72s" dur="1.55s" repeatCount="indefinite" path="M79 64 L88 83 L94 97"/>
|
|
<animate attributeName="opacity" begin=".72s" values="0;1;1;0" keyTimes="0;.08;.82;1" dur="1.55s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Backend boxes -->
|
|
<rect class="device" x="24" y="88" width="36" height="19" rx="5"/>
|
|
<rect class="device" x="77" y="88" width="36" height="19" rx="5"/>
|
|
|
|
<!-- brief receiving pulse -->
|
|
<rect x="24" y="88" width="36" height="19" rx="5" fill="#ffc12d" opacity="0">
|
|
<animate attributeName="opacity" values="0;0;.20;0" keyTimes="0;.72;.86;1" dur="1.55s" repeatCount="indefinite"/>
|
|
</rect>
|
|
<rect x="77" y="88" width="36" height="19" rx="5" fill="#ffc12d" opacity="0">
|
|
<animate attributeName="opacity" begin=".72s" values="0;0;.20;0" keyTimes="0;.72;.86;1" dur="1.55s" repeatCount="indefinite"/>
|
|
</rect>
|
|
</svg> |