Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

small feat: svg animation for servers, codebuild, codePipleline etc...

Browse Source
This commit is contained in:
Zakaria
2026-10-15 10:25:16 -04:00
parent ca1e845cb6
commit 668911ed6e
29 changed files with 10034 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
svgAsset/animated_load_balancer.svg
+52
View File
@@ -0,0 +1,52 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB