222 lines
8.4 KiB
XML
222 lines
8.4 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||
|
|
<defs>
|
||
|
|
<radialGradient id="nodeCore-icon-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#4f4f4f"/>
|
||
|
|
<stop offset="100%" stop-color="#2d2d2d"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="nodeAccent-icon-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#7a7a7a"/>
|
||
|
|
<stop offset="100%" stop-color="#555555"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="nodeSecondary-icon-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#999999"/>
|
||
|
|
<stop offset="100%" stop-color="#6b6b6b"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="nodeGold-icon-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#f0f0f0"/>
|
||
|
|
<stop offset="40%" stop-color="#d0d0d0"/>
|
||
|
|
<stop offset="100%" stop-color="#a0a0a0"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<filter id="glow-icon-bn" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="blur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<filter id="glowGold-icon-bn" x="-100%" y="-100%" width="300%" height="300%">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="blur"/>
|
||
|
|
<feFlood flood-color="#d0d0d0" flood-opacity="0.6"/>
|
||
|
|
<feComposite in2="blur" operator="in"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
||
|
|
50% { transform: scale(1.1); opacity: 0.85; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulseGlow {
|
||
|
|
0%, 100% { opacity: 0.4; }
|
||
|
|
50% { opacity: 0.8; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes flowToCenter {
|
||
|
|
0% { stroke-dashoffset: 30; }
|
||
|
|
100% { stroke-dashoffset: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes hexRotate {
|
||
|
|
0%, 100% { opacity: 0.15; }
|
||
|
|
50% { opacity: 0.3; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.node-center { transform-origin: center; animation: pulse 2.5s ease-in-out infinite; }
|
||
|
|
.node-1 { transform-origin: center; animation: pulse 2.5s ease-in-out infinite 0s; }
|
||
|
|
.node-2 { transform-origin: center; animation: pulse 2.5s ease-in-out infinite 0.4s; }
|
||
|
|
.node-3 { transform-origin: center; animation: pulse 2.5s ease-in-out infinite 0.8s; }
|
||
|
|
.node-4 { transform-origin: center; animation: pulse 2.5s ease-in-out infinite 1.2s; }
|
||
|
|
.node-5 { transform-origin: center; animation: pulse 2.5s ease-in-out infinite 1.6s; }
|
||
|
|
.node-6 { transform-origin: center; animation: pulse 2.5s ease-in-out infinite 2s; }
|
||
|
|
|
||
|
|
.connection-base {
|
||
|
|
stroke: #909090;
|
||
|
|
stroke-width: 1;
|
||
|
|
stroke-linecap: round;
|
||
|
|
fill: none;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-flow {
|
||
|
|
stroke: #4f4f4f;
|
||
|
|
stroke-width: 1.5;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-dasharray: 6 25;
|
||
|
|
fill: none;
|
||
|
|
animation: flowToCenter 1.8s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-flow-accent {
|
||
|
|
stroke: #7a7a7a;
|
||
|
|
stroke-width: 1.5;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-dasharray: 6 25;
|
||
|
|
fill: none;
|
||
|
|
animation: flowToCenter 1.8s linear infinite 0.9s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hex-outline {
|
||
|
|
stroke: #4f4f4f;
|
||
|
|
stroke-width: 0.8;
|
||
|
|
fill: none;
|
||
|
|
animation: hexRotate 3s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hex-outline-inner {
|
||
|
|
stroke: #7a7a7a;
|
||
|
|
stroke-width: 0.6;
|
||
|
|
fill: none;
|
||
|
|
animation: hexRotate 3s ease-in-out infinite 1.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-ring {
|
||
|
|
fill: none;
|
||
|
|
stroke: #4f4f4f;
|
||
|
|
stroke-width: 0.8;
|
||
|
|
animation: pulseGlow 2.5s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-ring-accent {
|
||
|
|
fill: none;
|
||
|
|
stroke: #7a7a7a;
|
||
|
|
stroke-width: 0.8;
|
||
|
|
animation: pulseGlow 2.5s ease-in-out infinite 0.5s;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<g id="icon" transform="translate(50, 50) scale(0.25)">
|
||
|
|
<polygon class="hex-outline" points="256,96 388,176 388,336 256,416 124,336 124,176"/>
|
||
|
|
<polygon class="hex-outline-inner" points="256,136 352,196 352,316 256,376 160,316 160,196"/>
|
||
|
|
|
||
|
|
<g id="connections-radial">
|
||
|
|
<line class="connection-base" x1="256" y1="256" x2="256" y2="116"/>
|
||
|
|
<line class="connection-base" x1="256" y1="256" x2="377" y2="186"/>
|
||
|
|
<line class="connection-base" x1="256" y1="256" x2="377" y2="326"/>
|
||
|
|
<line class="connection-base" x1="256" y1="256" x2="256" y2="396"/>
|
||
|
|
<line class="connection-base" x1="256" y1="256" x2="135" y2="326"/>
|
||
|
|
<line class="connection-base" x1="256" y1="256" x2="135" y2="186"/>
|
||
|
|
|
||
|
|
<line class="connection-flow" x1="256" y1="256" x2="256" y2="116"/>
|
||
|
|
<line class="connection-flow-accent" x1="256" y1="256" x2="377" y2="186"/>
|
||
|
|
<line class="connection-flow" x1="256" y1="256" x2="377" y2="326"/>
|
||
|
|
<line class="connection-flow-accent" x1="256" y1="256" x2="256" y2="396"/>
|
||
|
|
<line class="connection-flow" x1="256" y1="256" x2="135" y2="326"/>
|
||
|
|
<line class="connection-flow-accent" x1="256" y1="256" x2="135" y2="186"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g id="connections-perimeter">
|
||
|
|
<line class="connection-base" x1="256" y1="116" x2="377" y2="186"/>
|
||
|
|
<line class="connection-base" x1="377" y1="186" x2="377" y2="326"/>
|
||
|
|
<line class="connection-base" x1="377" y1="326" x2="256" y2="396"/>
|
||
|
|
<line class="connection-base" x1="256" y1="396" x2="135" y2="326"/>
|
||
|
|
<line class="connection-base" x1="135" y1="326" x2="135" y2="186"/>
|
||
|
|
<line class="connection-base" x1="135" y1="186" x2="256" y2="116"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g id="nodes">
|
||
|
|
<g class="node-center" filter="url(#glowGold-icon-bn)">
|
||
|
|
<circle cx="256" cy="256" r="28" fill="url(#nodeGold-icon-bn)"/>
|
||
|
|
<circle cx="256" cy="256" r="16" fill="#f0f0f0" opacity="0.5"/>
|
||
|
|
<circle cx="256" cy="256" r="7" fill="#fff" opacity="0.7"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-1" filter="url(#glow-icon-bn)">
|
||
|
|
<circle class="glow-ring-accent" cx="256" cy="116" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="256" cy="116" r="15" fill="url(#nodeAccent-icon-bn)"/>
|
||
|
|
<circle cx="256" cy="116" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-2" filter="url(#glow-icon-bn)">
|
||
|
|
<circle class="glow-ring" cx="377" cy="186" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="377" cy="186" r="15" fill="url(#nodeCore-icon-bn)"/>
|
||
|
|
<circle cx="377" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-3" filter="url(#glow-icon-bn)">
|
||
|
|
<circle class="glow-ring-accent" cx="377" cy="326" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="377" cy="326" r="15" fill="url(#nodeSecondary-icon-bn)"/>
|
||
|
|
<circle cx="377" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-4" filter="url(#glow-icon-bn)">
|
||
|
|
<circle class="glow-ring" cx="256" cy="396" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="256" cy="396" r="15" fill="url(#nodeAccent-icon-bn)"/>
|
||
|
|
<circle cx="256" cy="396" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-5" filter="url(#glow-icon-bn)">
|
||
|
|
<circle class="glow-ring-accent" cx="135" cy="326" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="135" cy="326" r="15" fill="url(#nodeCore-icon-bn)"/>
|
||
|
|
<circle cx="135" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-6" filter="url(#glow-icon-bn)">
|
||
|
|
<circle class="glow-ring" cx="135" cy="186" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="135" cy="186" r="15" fill="url(#nodeSecondary-icon-bn)"/>
|
||
|
|
<circle cx="135" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g id="sync-dots" opacity="0.7">
|
||
|
|
<circle cx="256" cy="186" r="2.5" fill="#4f4f4f">
|
||
|
|
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="316" cy="221" r="2.5" fill="#7a7a7a">
|
||
|
|
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite" begin="0.3s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="316" cy="291" r="2.5" fill="#4f4f4f">
|
||
|
|
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite" begin="0.6s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="256" cy="326" r="2.5" fill="#7a7a7a">
|
||
|
|
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite" begin="0.9s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="196" cy="291" r="2.5" fill="#4f4f4f">
|
||
|
|
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite" begin="1.2s"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="196" cy="221" r="2.5" fill="#7a7a7a">
|
||
|
|
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite" begin="1.5s"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
</svg>
|