Zakaria
99 lines
4.1 KiB
XML
99 lines
4.1 KiB
XML
<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> |
