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/db-creation.svg
+35
View File
@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<style>
.led{fill:#35d0b5}
.a{animation:blink 1.4s ease-in-out infinite}
.b{animation:blink 1.4s .22s ease-in-out infinite}
.c{animation:blink 1.4s .44s ease-in-out infinite}
.d{animation:blink 1.4s .66s ease-in-out infinite}
@keyframes blink{0%,25%,100%{opacity:.28}45%,72%{opacity:1}}
</style>
<!-- database body -->
<path d="M7 11C7 15 14.6 17 24 17S41 15 41 11v26c0 4-7.6 6-17 6S7 41 7 37Z" fill="#0D3D8C"/>
<path d="M7 11C7 15 14.6 17 24 17S41 15 41 11v14c0 4-7.6 6-17 6S7 29 7 25Z" fill="#1769C2">
<animate attributeName="d" dur="1.3s" repeatCount="indefinite"
values="M7 11C7 15 14.6 17 24 17S41 15 41 11v14c0 4-7.6 6-17 6S7 29 7 25Z;
M7 9C7 13 14.6 15 24 15S41 13 41 9v14c0 4-7.6 6-17 6S7 27 7 23Z;
M7 11C7 15 14.6 17 24 17S41 15 41 11v14c0 4-7.6 6-17 6S7 29 7 25Z"/>
</path>
<!-- animated top -->
<g>
<path d="M7 11C7 7 14.6 5 24 5S41 7 41 11v7c0 4-7.6 6-17 6S7 22 7 18Z" fill="#1976D2"/>
<ellipse cx="24" cy="11" rx="17" ry="5.5" fill="#2B91E3"/>
<ellipse cx="24" cy="9.7" rx="14.5" ry="3.5" fill="#39A0EA" opacity=".35"/>
<animateTransform attributeName="transform" type="translate" values="0 0;0 -3;0 0" dur="1.3s" repeatCount="indefinite"/>
</g>
<!-- server-style activity indicators -->
<g>
<circle class="led a" cx="16" cy="35.5" r="1.6"/>
<circle class="led b" cx="21.3" cy="36.2" r="1.6"/>
<circle class="led c" cx="26.7" cy="36.2" r="1.6"/>
<circle class="led d" cx="32" cy="35.5" r="1.6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB