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/server_network_animation.svg
+61
View File
@@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 362 356" width="362" height="356" role="img" aria-label="Animated server network icon">
<style>
.dark{fill:#17132f}.panel{fill:#2b2440;stroke:#17132f;stroke-width:5}.led{fill:#31aa98}
.port{fill:none;stroke:#ffc52e;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.wire{fill:none;stroke:#17132f;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.blink1{animation:b1 4.5s steps(1,end) infinite}.blink2{animation:b2 4.5s steps(1,end) infinite}.blink3{animation:b3 4.5s steps(1,end) infinite}
.ports{animation:portMorph 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hub{animation:hubPulse 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.packet{fill:#31aa98;filter:drop-shadow(0 0 2px rgba(49,170,152,.65))}
@keyframes b1{0%,18%,42%,68%,100%{opacity:1}19%,41%,69%,84%{opacity:.22}85%,99%{opacity:1}}
@keyframes b2{0%,28%,58%,88%,100%{opacity:.28}29%,57%,89%,99%{opacity:1}}
@keyframes b3{0%,12%,48%,76%,100%{opacity:1}13%,47%,77%,92%{opacity:.2}93%,99%{opacity:1}}
@keyframes portMorph{0%,18%,82%,100%{transform:scaleX(.62)}42%,62%{transform:scaleX(1.18)}}
@keyframes hubPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
</style>
<!-- server chassis -->
<rect class="panel" x="49" y="68" width="270" height="68" rx="15"/>
<rect class="panel" x="49" y="135" width="270" height="68" rx="15"/>
<!-- left separators/shading -->
<path d="M67 72v59M67 140v58" stroke="#241d38" stroke-width="6" opacity=".65"/>
<!-- animated yellow ports -->
<g class="ports"><rect class="port" x="81" y="92" width="47" height="25" rx="13"/></g>
<g class="ports"><rect class="port" x="81" y="158" width="47" height="25" rx="13"/></g>
<!-- LEDs top -->
<g>
<circle class="led blink1" cx="178" cy="95" r="6.5"/><circle class="led blink2" cx="197" cy="95" r="6.5"/><circle class="led blink3" cx="216" cy="95" r="6.5"/><circle class="led blink1" cx="236" cy="95" r="6.5"/><circle class="led blink2" cx="256" cy="95" r="6.5"/><circle class="led blink3" cx="276" cy="95" r="6.5"/><circle class="led blink1" cx="295" cy="95" r="6.5"/>
<circle class="led blink3" cx="178" cy="115" r="6.5"/><circle class="led blink1" cx="197" cy="115" r="6.5"/><circle class="led blink2" cx="216" cy="115" r="6.5"/><circle class="led blink3" cx="236" cy="115" r="6.5"/><circle class="led blink1" cx="256" cy="115" r="6.5"/><circle class="led blink2" cx="276" cy="115" r="6.5"/><circle class="led blink3" cx="295" cy="115" r="6.5"/>
</g>
<!-- LEDs bottom -->
<g>
<circle class="led blink2" cx="178" cy="162" r="6.5"/><circle class="led blink3" cx="197" cy="162" r="6.5"/><circle class="led blink1" cx="216" cy="162" r="6.5"/><circle class="led blink2" cx="236" cy="162" r="6.5"/><circle class="led blink3" cx="256" cy="162" r="6.5"/><circle class="led blink1" cx="276" cy="162" r="6.5"/>
<circle class="led blink1" cx="178" cy="181" r="6.5"/><circle class="led blink2" cx="197" cy="181" r="6.5"/><circle class="led blink3" cx="216" cy="181" r="6.5"/><circle class="led blink1" cx="236" cy="181" r="6.5"/><circle class="led blink2" cx="256" cy="181" r="6.5"/><circle class="led blink3" cx="276" cy="181" r="6.5"/>
</g>
<!-- center hub -->
<path class="dark" d="M163 202h42c0 13-8 21-21 21s-21-8-21-21z"/>
<path class="wire" d="M184 222v31M184 253c0 10-6 14-17 14M184 253c0 10 6 14 17 14"/>
<!-- horizontal network -->
<path class="wire" d="M55 267H307"/>
<path class="dark" d="M43 249h8c10 0 17 8 17 17s-7 18-17 18h-8zM325 249h-8c-10 0-17 8-17 17s7 18 17 18h8z"/>
<!-- connection/data indicators: packets originate on the lower branches, converge at the hub, then travel upward into the servers -->
<g>
<circle class="packet" r="7">
<animateMotion dur="3.8s" begin="0s" repeatCount="indefinite" path="M66 267 H184 V181"/>
<animate attributeName="opacity" values="0;1;1;1;0" keyTimes="0;.05;.78;.96;1" dur="3.8s" begin="0s" repeatCount="indefinite"/>
</circle>
<circle class="packet" r="7">
<animateMotion dur="3.8s" begin="1.25s" repeatCount="indefinite" path="M302 267 H184 V162"/>
<animate attributeName="opacity" values="0;1;1;1;0" keyTimes="0;.05;.78;.96;1" dur="3.8s" begin="1.25s" repeatCount="indefinite"/>
</circle>
<circle class="packet" r="6.5">
<animateMotion dur="3.8s" begin="2.5s" repeatCount="indefinite" path="M120 267 H184 V115"/>
<animate attributeName="opacity" values="0;1;1;1;0" keyTimes="0;.05;.78;.96;1" dur="3.8s" begin="2.5s" repeatCount="indefinite"/>
</circle>
<circle class="packet" r="6.5">
<animateMotion dur="3.8s" begin="3.15s" repeatCount="indefinite" path="M250 267 H184 V95"/>
<animate attributeName="opacity" values="0;1;1;1;0" keyTimes="0;.05;.78;.96;1" dur="3.8s" begin="3.15s" repeatCount="indefinite"/>
</circle>
</g>
<!-- small hub activity indicator -->
<g class="hub"><circle class="led" cx="184" cy="267" r="8"/></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB