49 lines
2.3 KiB
XML
49 lines
2.3 KiB
XML
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
|
|
<style>
|
|
@keyframes center-pulse {
|
|
0%, 100% { r: 10; opacity: 1; }
|
|
50% { r: 12; opacity: 0.85; }
|
|
}
|
|
@keyframes glow-pulse {
|
|
0%, 100% { r: 16; opacity: 0.12; }
|
|
50% { r: 22; opacity: 0.06; }
|
|
}
|
|
@keyframes node-breathe {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.8; }
|
|
}
|
|
.center-node { animation: center-pulse 2.4s ease-in-out infinite; }
|
|
.center-glow { animation: glow-pulse 2.4s ease-in-out infinite; }
|
|
.node-tl { animation: node-breathe 2.4s ease-in-out infinite 0.3s; }
|
|
.node-tr { animation: node-breathe 2.4s ease-in-out infinite 0.6s; }
|
|
.node-bl { animation: node-breathe 2.4s ease-in-out infinite 0.9s; }
|
|
.node-br { animation: node-breathe 2.4s ease-in-out infinite 1.2s; }
|
|
</style>
|
|
|
|
<rect width="200" height="200" rx="32" fill="#14142a"/>
|
|
|
|
<!-- Diamond outline -->
|
|
<line x1="100" y1="51" x2="145" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="145" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="100" y1="149" x2="55" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
|
<line x1="55" y1="100" x2="100" y2="51" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
|
|
|
|
<!-- Cross lines -->
|
|
<line x1="55" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="145" y1="100" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="100" y1="51" x2="100" y2="100" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
|
<line x1="100" y1="100" x2="100" y2="149" stroke="#c8c8d0" stroke-width="2" stroke-linecap="round" opacity="0.4"/>
|
|
|
|
<!-- Center glow -->
|
|
<circle cx="100" cy="100" r="16" fill="#3B82F6" opacity="0.12" class="center-glow"/>
|
|
|
|
<!-- Nodes -->
|
|
<circle cx="100" cy="51" r="8" fill="#3B82F6" class="node-tl"/>
|
|
<circle cx="55" cy="100" r="8" fill="#3B82F6" class="node-tr"/>
|
|
<circle cx="145" cy="100" r="8" fill="#EF4444" class="node-bl"/>
|
|
<circle cx="100" cy="149" r="8" fill="#3B82F6" class="node-br"/>
|
|
|
|
<!-- Center -->
|
|
<circle cx="100" cy="100" r="10" fill="#3B82F6" class="center-node"/>
|
|
</svg>
|
