294 lines
11 KiB
XML
294 lines
11 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 200" width="610" height="200">
|
||
|
|
<defs>
|
||
|
|
<!-- Gradientes en escala de grises -->
|
||
|
|
<radialGradient id="nodeCore-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#4f4f4f"/>
|
||
|
|
<stop offset="100%" stop-color="#2d2d2d"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="nodeAccent-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#7a7a7a"/>
|
||
|
|
<stop offset="100%" stop-color="#555555"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="nodeSecondary-bn" cx="50%" cy="50%" r="50%">
|
||
|
|
<stop offset="0%" stop-color="#999999"/>
|
||
|
|
<stop offset="100%" stop-color="#6b6b6b"/>
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="nodeGold-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-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-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.12); 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; }
|
||
|
|
.node-primary { transform-origin: center; animation: pulse 2.5s ease-in-out infinite; }
|
||
|
|
|
||
|
|
.connection-base {
|
||
|
|
stroke: #909090;
|
||
|
|
stroke-width: 1.5;
|
||
|
|
stroke-linecap: round;
|
||
|
|
fill: none;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-flow {
|
||
|
|
stroke: #4f4f4f;
|
||
|
|
stroke-width: 2;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-dasharray: 8 30;
|
||
|
|
fill: none;
|
||
|
|
animation: flowToCenter 1.8s linear infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.connection-flow-accent {
|
||
|
|
stroke: #7a7a7a;
|
||
|
|
stroke-width: 2;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-dasharray: 8 30;
|
||
|
|
fill: none;
|
||
|
|
animation: flowToCenter 1.8s linear infinite 0.9s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hex-outline {
|
||
|
|
stroke: #4f4f4f;
|
||
|
|
stroke-width: 1;
|
||
|
|
fill: none;
|
||
|
|
animation: hexRotate 3s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hex-outline-inner {
|
||
|
|
stroke: #7a7a7a;
|
||
|
|
stroke-width: 0.75;
|
||
|
|
fill: none;
|
||
|
|
animation: hexRotate 3s ease-in-out infinite 1.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-ring {
|
||
|
|
fill: none;
|
||
|
|
stroke: #4f4f4f;
|
||
|
|
stroke-width: 1;
|
||
|
|
animation: pulseGlow 2.5s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.glow-ring-accent {
|
||
|
|
fill: none;
|
||
|
|
stroke: #7a7a7a;
|
||
|
|
stroke-width: 1;
|
||
|
|
animation: pulseGlow 2.5s ease-in-out infinite 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-tube-base {
|
||
|
|
fill: none;
|
||
|
|
stroke: #e0e0e0;
|
||
|
|
stroke-width: 10;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-linejoin: round;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-tube-border {
|
||
|
|
fill: none;
|
||
|
|
stroke: #909090;
|
||
|
|
stroke-width: 12;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-linejoin: round;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- LOGO HEXAGON (escalado) -->
|
||
|
|
<g id="logo" transform="translate(5, 5) scale(0.37)">
|
||
|
|
|
||
|
|
<!-- Hexágono exterior sutil -->
|
||
|
|
<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"/>
|
||
|
|
|
||
|
|
<!-- Conexiones al centro -->
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- Conexiones perimetrales -->
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- Nodos -->
|
||
|
|
<g id="nodes">
|
||
|
|
<g class="node-center" filter="url(#glowGold-bn)">
|
||
|
|
<circle cx="256" cy="256" r="28" fill="url(#nodeGold-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-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-bn)"/>
|
||
|
|
<circle cx="256" cy="116" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-2" filter="url(#glow-bn)">
|
||
|
|
<circle class="glow-ring" cx="377" cy="186" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="377" cy="186" r="15" fill="url(#nodeCore-bn)"/>
|
||
|
|
<circle cx="377" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-3" filter="url(#glow-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-bn)"/>
|
||
|
|
<circle cx="377" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-4" filter="url(#glow-bn)">
|
||
|
|
<circle class="glow-ring" cx="256" cy="396" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="256" cy="396" r="15" fill="url(#nodeAccent-bn)"/>
|
||
|
|
<circle cx="256" cy="396" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-5" filter="url(#glow-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-bn)"/>
|
||
|
|
<circle cx="135" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<g class="node-6" filter="url(#glow-bn)">
|
||
|
|
<circle class="glow-ring" cx="135" cy="186" r="20" opacity="0.3"/>
|
||
|
|
<circle cx="135" cy="186" r="15" fill="url(#nodeSecondary-bn)"/>
|
||
|
|
<circle cx="135" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Puntos de sincronización -->
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<!-- TEXTO kogral (escala de grises) -->
|
||
|
|
<g id="text" transform="translate(175, 25)">
|
||
|
|
|
||
|
|
<!-- K -->
|
||
|
|
<line x1="20" y1="30" x2="20" y2="120" class="text-tube-border"/>
|
||
|
|
<line x1="20" y1="75" x2="60" y2="30" class="text-tube-border"/>
|
||
|
|
<line x1="20" y1="75" x2="60" y2="120" class="text-tube-border"/>
|
||
|
|
<line x1="20" y1="30" x2="20" y2="120" class="text-tube-base"/>
|
||
|
|
<line x1="20" y1="75" x2="60" y2="30" class="text-tube-base"/>
|
||
|
|
<line x1="20" y1="75" x2="60" y2="120" class="text-tube-base"/>
|
||
|
|
|
||
|
|
<!-- o -->
|
||
|
|
<ellipse cx="100" cy="85" rx="20" ry="28" class="text-tube-border"/>
|
||
|
|
<ellipse cx="100" cy="85" rx="20" ry="28" class="text-tube-base"/>
|
||
|
|
|
||
|
|
<!-- g -->
|
||
|
|
<ellipse cx="170" cy="85" rx="20" ry="28" class="text-tube-border"/>
|
||
|
|
<path d="M190 85 L190 115 Q190 135 170 135 Q152 135 148 122" class="text-tube-border" fill="none"/>
|
||
|
|
<ellipse cx="170" cy="85" rx="20" ry="28" class="text-tube-base"/>
|
||
|
|
<path d="M190 85 L190 115 Q190 135 170 135 Q152 135 148 122" class="text-tube-base" fill="none"/>
|
||
|
|
|
||
|
|
<!-- r -->
|
||
|
|
<line x1="220" y1="60" x2="220" y2="113" class="text-tube-border"/>
|
||
|
|
<path d="M220 75 Q220 58 242 58 Q258 58 262 70" class="text-tube-border" fill="none"/>
|
||
|
|
<line x1="220" y1="60" x2="220" y2="113" class="text-tube-base"/>
|
||
|
|
<path d="M220 75 Q220 58 242 58 Q258 58 262 70" class="text-tube-base" fill="none"/>
|
||
|
|
|
||
|
|
<!-- a -->
|
||
|
|
<ellipse cx="300" cy="85" rx="20" ry="28" class="text-tube-border"/>
|
||
|
|
<line x1="320" y1="60" x2="320" y2="113" class="text-tube-border"/>
|
||
|
|
<ellipse cx="300" cy="85" rx="20" ry="28" class="text-tube-base"/>
|
||
|
|
<line x1="320" y1="60" x2="320" y2="113" class="text-tube-base"/>
|
||
|
|
|
||
|
|
<!-- l -->
|
||
|
|
<line x1="353" y1="30" x2="353" y2="113" class="text-tube-border"/>
|
||
|
|
<line x1="353" y1="30" x2="353" y2="113" class="text-tube-base"/>
|
||
|
|
|
||
|
|
<!-- Punto dorado final (nodo final de la línea central) -->
|
||
|
|
<g class="node-primary" style="transform-origin: 400px 70px" filter="url(#glowGold-bn)">
|
||
|
|
<circle cx="400" cy="70" r="10" fill="url(#nodeGold-bn)"/>
|
||
|
|
<circle cx="400" cy="70" r="6" fill="#f0f0f0" opacity="0.5"/>
|
||
|
|
<circle cx="400" cy="70" r="2.5" fill="#fff" opacity="0.7"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</svg>
|