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

svgAsset/animated-cpu.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140" viewBox="0 0 140 140" role="img" aria-label="Animated CPU">
+<style>
+.pin{stroke:#17162b;stroke-width:2;stroke-linecap:round}
+.chip{fill:#45b5fa;stroke:#17162b;stroke-width:2.5}
+.cpu{font: 25px Arial,sans-serif;fill:#17162b;letter-spacing:4px}
+.pulse{fill:none;stroke:#8bd6ff;stroke-width:2;opacity:0;animation:pulse 1.8s ease-out infinite}
+.p1{animation:pin 1.2s ease-in-out infinite}.p2{animation:pin 1.2s .2s ease-in-out infinite}.p3{animation:pin 1.2s .4s ease-in-out infinite}
+@keyframes pin{0%,100%{stroke:#17162b}50%{stroke:#45b5fa}}
+@keyframes pulse{0%{opacity:.8;transform:scale(.75)}100%{opacity:0;transform:scale(1.08)}}
+</style>
+
+<!-- pins -->
+<g>
+ <path class="pin p1" d="M40 25V13M58 25V13M76 25V13M94 25V13"/>
+ <path class="pin p2" d="M40 106v13M58 106v13M76 106v13M94 106v13"/>
+ <path class="pin p3" d="M27 40H14M27 58H14M27 76H14M27 94H14"/>
+ <path class="pin p1" d="M107 40h13M107 58h13M107 76h13M107 94h13"/>
+</g>
+
+<rect class="chip" x="27" y="26" width="80" height="80" rx="6"/>
+<rect class="pulse" x="31" y="30" width="72" height="72" rx="4" transform-origin="67px 66px"/>
+<text class="cpu" x="38" y="76">CPU</text>
+
+<!-- animated processing/data dots -->
+<g fill="#17162b">
+ <circle r="2.5"><animateMotion dur="1.5s" repeatCount="indefinite" path="M31 45 H103"/><animate attributeName="opacity" values="0;1;1;0" dur="1.5s" repeatCount="indefinite"/></circle>
+ <circle r="2.5"><animateMotion begin=".45s" dur="1.5s" repeatCount="indefinite" path="M103 89 H31"/><animate attributeName="opacity" begin=".45s" values="0;1;1;0" dur="1.5s" repeatCount="indefinite"/></circle>
+</g>
+</svg>