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/CodeBuild.svg
+99
View File
@@ -0,0 +1,99 @@
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="275" viewBox="0 0 300 275"
role="img" aria-label="Animated binary configuration icon">
<style>
.outline{stroke:#050505;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.binary{font-family:Arial,sans-serif;font-size:51px;font-weight:600;fill:#43bed0}
.gear{transform-box:fill-box;transform-origin:center;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
<!-- browser -->
<rect x="83" y="56" width="165" height="158" fill="#fff" class="outline"/>
<line x1="84" y1="96" x2="247" y2="96" class="outline"/>
<circle cx="108" cy="77" r="4"/>
<circle cx="126" cy="77" r="4"/>
<line x1="174" y1="77" x2="224" y2="77" class="outline"/>
<!-- Binary rows: characters change independently for a continuous effect -->
<g class="binary">
<text x="98" y="149">0
<animate attributeName="opacity" values="1;1;0;0;1" dur="1.8s" repeatCount="indefinite"/>
</text>
<text x="98" y="149" opacity="0">1
<animate attributeName="opacity" values="0;0;1;1;0" dur="1.8s" repeatCount="indefinite"/>
</text>
<text x="127" y="149">1
<animate attributeName="opacity" values="1;1;0;0;1" begin=".35s" dur="2.1s" repeatCount="indefinite"/>
</text>
<text x="127" y="149" opacity="0">0
<animate attributeName="opacity" values="0;0;1;1;0" begin=".35s" dur="2.1s" repeatCount="indefinite"/>
</text>
<text x="156" y="149">0
<animate attributeName="opacity" values="1;1;0;0;1" begin=".7s" dur="1.9s" repeatCount="indefinite"/>
</text>
<text x="156" y="149" opacity="0">1
<animate attributeName="opacity" values="0;0;1;1;0" begin=".7s" dur="1.9s" repeatCount="indefinite"/>
</text>
<text x="185" y="149">1
<animate attributeName="opacity" values="1;1;0;0;1" begin=".15s" dur="2.3s" repeatCount="indefinite"/>
</text>
<text x="185" y="149" opacity="0">0
<animate attributeName="opacity" values="0;0;1;1;0" begin=".15s" dur="2.3s" repeatCount="indefinite"/>
</text>
<text x="214" y="149">0
<animate attributeName="opacity" values="1;1;0;0;1" begin=".9s" dur="2s" repeatCount="indefinite"/>
</text>
<text x="214" y="149" opacity="0">1
<animate attributeName="opacity" values="0;0;1;1;0" begin=".9s" dur="2s" repeatCount="indefinite"/>
</text>
<text x="98" y="197">1
<animate attributeName="opacity" values="1;1;0;0;1" begin=".5s" dur="2.2s" repeatCount="indefinite"/>
</text>
<text x="98" y="197" opacity="0">0
<animate attributeName="opacity" values="0;0;1;1;0" begin=".5s" dur="2.2s" repeatCount="indefinite"/>
</text>
<text x="127" y="197">0
<animate attributeName="opacity" values="1;1;0;0;1" begin=".1s" dur="1.85s" repeatCount="indefinite"/>
</text>
<text x="127" y="197" opacity="0">1
<animate attributeName="opacity" values="0;0;1;1;0" begin=".1s" dur="1.85s" repeatCount="indefinite"/>
</text>
<text x="156" y="197">1
<animate attributeName="opacity" values="1;1;0;0;1" begin=".8s" dur="2.4s" repeatCount="indefinite"/>
</text>
<text x="156" y="197" opacity="0">0
<animate attributeName="opacity" values="0;0;1;1;0" begin=".8s" dur="2.4s" repeatCount="indefinite"/>
</text>
<text x="185" y="197">0
<animate attributeName="opacity" values="1;1;0;0;1" begin=".25s" dur="2s" repeatCount="indefinite"/>
</text>
<text x="185" y="197" opacity="0">1
<animate attributeName="opacity" values="0;0;1;1;0" begin=".25s" dur="2s" repeatCount="indefinite"/>
</text>
<text x="214" y="197">1
<animate attributeName="opacity" values="1;1;0;0;1" begin=".65s" dur="1.95s" repeatCount="indefinite"/>
</text>
<text x="214" y="197" opacity="0">0
<animate attributeName="opacity" values="0;0;1;1;0" begin=".65s" dur="1.95s" repeatCount="indefinite"/>
</text>
</g>
<!-- rotating cog -->
<g class="gear">
<path d="M225 163 L236 167 L244 161 L254 171 L249 180 L254 190 L265 193
L265 207 L254 210 L249 220 L254 229 L244 239 L235 234 L225 238 L222 249
L208 249 L205 238 L195 234 L186 239 L176 229 L181 220 L177 210 L166 207
L166 193 L177 190 L181 180 L176 171 L186 161 L195 167 L205 163 L208 152
L222 152 Z" fill="#fff" class="outline"/>
<circle cx="215.5" cy="200.5" r="16" fill="#fff" class="outline"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.1 KiB