297 lines
12 KiB
XML
297 lines
12 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 200" width="610" height="200">
|
|
<defs>
|
|
<!-- Gradientes -->
|
|
<radialGradient id="nodeCore-hs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#4a9eff"/>
|
|
<stop offset="100%" stop-color="#2d7ad6"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="nodeAccent-hs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#3dd68d"/>
|
|
<stop offset="100%" stop-color="#28a968"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="nodeSecondary-hs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#64748b"/>
|
|
<stop offset="100%" stop-color="#475569"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="nodeGold-hs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#fef3c7"/>
|
|
<stop offset="40%" stop-color="#fbbf24"/>
|
|
<stop offset="100%" stop-color="#d97706"/>
|
|
</radialGradient>
|
|
|
|
<filter id="glow-hs" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feGaussianBlur stdDeviation="2" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="glowStrong-hs" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="4" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
|
|
<filter id="glowGold-hs" x="-100%" y="-100%" width="300%" height="300%">
|
|
<feGaussianBlur stdDeviation="4" result="blur"/>
|
|
<feFlood flood-color="#fbbf24" flood-opacity="0.6"/>
|
|
<feComposite in2="blur" operator="in"/>
|
|
<feMerge>
|
|
<feMergeNode/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<style>
|
|
.connection-base-hs {
|
|
stroke: #475569;
|
|
stroke-width: 1.5;
|
|
stroke-linecap: round;
|
|
fill: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.connection-flow-hs {
|
|
stroke: #4a9eff;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 8 30;
|
|
fill: none;
|
|
}
|
|
|
|
.connection-flow-accent-hs {
|
|
stroke: #3dd68d;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 8 30;
|
|
fill: none;
|
|
}
|
|
|
|
.hex-outline-hs {
|
|
stroke: #4a9eff;
|
|
stroke-width: 1;
|
|
fill: none;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.hex-outline-inner-hs {
|
|
stroke: #3dd68d;
|
|
stroke-width: 0.75;
|
|
fill: none;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.glow-ring-hs {
|
|
fill: none;
|
|
stroke: #4a9eff;
|
|
stroke-width: 1;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.glow-ring-accent-hs {
|
|
fill: none;
|
|
stroke: #3dd68d;
|
|
stroke-width: 1;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.text-tube-base-hs {
|
|
fill: none;
|
|
stroke: #cbd5e1;
|
|
stroke-width: 10;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.text-tube-border-hs {
|
|
fill: none;
|
|
stroke: #475569;
|
|
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-hs" points="256,96 388,176 388,336 256,416 124,336 124,176"/>
|
|
<polygon class="hex-outline-inner-hs" points="256,136 352,196 352,316 256,376 160,316 160,196"/>
|
|
|
|
<!-- Conexiones al centro -->
|
|
<g id="connections-radial">
|
|
<line class="connection-base-hs" x1="256" y1="256" x2="256" y2="116"/>
|
|
<line class="connection-base-hs" x1="256" y1="256" x2="377" y2="186"/>
|
|
<line class="connection-base-hs" x1="256" y1="256" x2="377" y2="326"/>
|
|
<line class="connection-base-hs" x1="256" y1="256" x2="256" y2="396"/>
|
|
<line class="connection-base-hs" x1="256" y1="256" x2="135" y2="326"/>
|
|
<line class="connection-base-hs" x1="256" y1="256" x2="135" y2="186"/>
|
|
|
|
<line class="connection-flow-hs" x1="256" y1="256" x2="256" y2="116"/>
|
|
<line class="connection-flow-accent-hs" x1="256" y1="256" x2="377" y2="186"/>
|
|
<line class="connection-flow-hs" x1="256" y1="256" x2="377" y2="326"/>
|
|
<line class="connection-flow-accent-hs" x1="256" y1="256" x2="256" y2="396"/>
|
|
<line class="connection-flow-hs" x1="256" y1="256" x2="135" y2="326"/>
|
|
<line class="connection-flow-accent-hs" x1="256" y1="256" x2="135" y2="186"/>
|
|
</g>
|
|
|
|
<!-- Conexiones perimetrales -->
|
|
<g id="connections-perimeter">
|
|
<line class="connection-base-hs" x1="256" y1="116" x2="377" y2="186"/>
|
|
<line class="connection-base-hs" x1="377" y1="186" x2="377" y2="326"/>
|
|
<line class="connection-base-hs" x1="377" y1="326" x2="256" y2="396"/>
|
|
<line class="connection-base-hs" x1="256" y1="396" x2="135" y2="326"/>
|
|
<line class="connection-base-hs" x1="135" y1="326" x2="135" y2="186"/>
|
|
<line class="connection-base-hs" x1="135" y1="186" x2="256" y2="116"/>
|
|
</g>
|
|
|
|
<!-- Nodos -->
|
|
<g id="nodes">
|
|
<!-- Centro - DORADO -->
|
|
<g filter="url(#glowGold-hs)">
|
|
<circle cx="256" cy="256" r="28" fill="url(#nodeGold-hs)"/>
|
|
<circle cx="256" cy="256" r="16" fill="#fef3c7" opacity="0.5"/>
|
|
<circle cx="256" cy="256" r="7" fill="#fff" opacity="0.7"/>
|
|
</g>
|
|
|
|
<!-- Nodo 1 - Top -->
|
|
<g filter="url(#glow-hs)">
|
|
<circle class="glow-ring-accent-hs" cx="256" cy="116" r="20" opacity="0.3"/>
|
|
<circle cx="256" cy="116" r="15" fill="url(#nodeAccent-hs)"/>
|
|
<circle cx="256" cy="116" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 2 - Top Right -->
|
|
<g filter="url(#glow-hs)">
|
|
<circle class="glow-ring-hs" cx="377" cy="186" r="20" opacity="0.3"/>
|
|
<circle cx="377" cy="186" r="15" fill="url(#nodeCore-hs)"/>
|
|
<circle cx="377" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 3 - Bottom Right -->
|
|
<g filter="url(#glow-hs)">
|
|
<circle class="glow-ring-accent-hs" cx="377" cy="326" r="20" opacity="0.3"/>
|
|
<circle cx="377" cy="326" r="15" fill="url(#nodeSecondary-hs)"/>
|
|
<circle cx="377" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 4 - Bottom -->
|
|
<g filter="url(#glow-hs)">
|
|
<circle class="glow-ring-hs" cx="256" cy="396" r="20" opacity="0.3"/>
|
|
<circle cx="256" cy="396" r="15" fill="url(#nodeAccent-hs)"/>
|
|
<circle cx="256" cy="396" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 5 - Bottom Left -->
|
|
<g filter="url(#glow-hs)">
|
|
<circle class="glow-ring-accent-hs" cx="135" cy="326" r="20" opacity="0.3"/>
|
|
<circle cx="135" cy="326" r="15" fill="url(#nodeCore-hs)"/>
|
|
<circle cx="135" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 6 - Top Left -->
|
|
<g filter="url(#glow-hs)">
|
|
<circle class="glow-ring-hs" cx="135" cy="186" r="20" opacity="0.3"/>
|
|
<circle cx="135" cy="186" r="15" fill="url(#nodeSecondary-hs)"/>
|
|
<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="#4a9eff" opacity="0.6"/>
|
|
<circle cx="316" cy="221" r="2.5" fill="#3dd68d" opacity="0.6"/>
|
|
<circle cx="316" cy="291" r="2.5" fill="#4a9eff" opacity="0.6"/>
|
|
<circle cx="256" cy="326" r="2.5" fill="#3dd68d" opacity="0.6"/>
|
|
<circle cx="196" cy="291" r="2.5" fill="#4a9eff" opacity="0.6"/>
|
|
<circle cx="196" cy="221" r="2.5" fill="#3dd68d" opacity="0.6"/>
|
|
</g>
|
|
</g>
|
|
|
|
|
|
<!-- ==================== FONDO CONSTELACIÓN ==================== -->
|
|
<g id="constellation" transform="translate(175, 25)" opacity="0.35">
|
|
<!-- Conexiones de red - punteadas -->
|
|
<line x1="20" y1="75" x2="100" y2="85" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 8"/>
|
|
<line x1="100" y1="85" x2="170" y2="85" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 8"/>
|
|
<line x1="170" y1="85" x2="220" y2="75" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 8"/>
|
|
<line x1="220" y1="75" x2="300" y2="85" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 8"/>
|
|
<line x1="300" y1="85" x2="353" y2="70" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 8"/>
|
|
<line x1="353" y1="70" x2="400" y2="70" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="4 8"/>
|
|
|
|
<!-- Conexiones diagonales -->
|
|
<line x1="60" y1="30" x2="100" y2="57" stroke="#94a3b8" stroke-width="1" stroke-dasharray="3 6"/>
|
|
<line x1="60" y1="120" x2="100" y2="113" stroke="#94a3b8" stroke-width="1" stroke-dasharray="3 6"/>
|
|
<line x1="170" y1="135" x2="220" y2="113" stroke="#94a3b8" stroke-width="1" stroke-dasharray="3 6"/>
|
|
<line x1="320" y1="60" x2="353" y2="30" stroke="#94a3b8" stroke-width="1" stroke-dasharray="3 6"/>
|
|
|
|
<!-- Pequeños nodos de constelación -->
|
|
<circle cx="-15" cy="50" r="2" fill="#64748b" opacity="0.6"/>
|
|
<circle cx="-10" cy="100" r="1.5" fill="#64748b" opacity="0.6"/>
|
|
<circle cx="373" cy="15" r="1.5" fill="#64748b" opacity="0.6"/>
|
|
|
|
<!-- Nodos intermedios -->
|
|
<circle cx="135" cy="70" r="1.5" fill="#4a9eff" opacity="0.5"/>
|
|
<circle cx="195" cy="60" r="1" fill="#3dd68d" opacity="0.5"/>
|
|
<circle cx="260" cy="90" r="1.5" fill="#4a9eff" opacity="0.5"/>
|
|
<circle cx="330" cy="50" r="1" fill="#3dd68d" opacity="0.5"/>
|
|
</g>
|
|
|
|
|
|
<!-- ==================== TEXTO kogral (solo tubos, sin flujo interno) ==================== -->
|
|
<g id="text" transform="translate(175, 25)">
|
|
|
|
<!-- K -->
|
|
<line x1="20" y1="30" x2="20" y2="120" class="text-tube-border-hs"/>
|
|
<line x1="20" y1="75" x2="60" y2="30" class="text-tube-border-hs"/>
|
|
<line x1="20" y1="75" x2="60" y2="120" class="text-tube-border-hs"/>
|
|
<line x1="20" y1="30" x2="20" y2="120" class="text-tube-base-hs"/>
|
|
<line x1="20" y1="75" x2="60" y2="30" class="text-tube-base-hs"/>
|
|
<line x1="20" y1="75" x2="60" y2="120" class="text-tube-base-hs"/>
|
|
|
|
<!-- o -->
|
|
<ellipse cx="100" cy="85" rx="20" ry="28" class="text-tube-border-hs"/>
|
|
<ellipse cx="100" cy="85" rx="20" ry="28" class="text-tube-base-hs"/>
|
|
|
|
<!-- g -->
|
|
<ellipse cx="170" cy="85" rx="20" ry="28" class="text-tube-border-hs"/>
|
|
<path d="M190 85 L190 115 Q190 135 170 135 Q152 135 148 122" class="text-tube-border-hs" fill="none"/>
|
|
<ellipse cx="170" cy="85" rx="20" ry="28" class="text-tube-base-hs"/>
|
|
<path d="M190 85 L190 115 Q190 135 170 135 Q152 135 148 122" class="text-tube-base-hs" fill="none"/>
|
|
|
|
<!-- r -->
|
|
<line x1="220" y1="60" x2="220" y2="113" class="text-tube-border-hs"/>
|
|
<path d="M220 75 Q220 58 242 58 Q258 58 262 70" class="text-tube-border-hs" fill="none"/>
|
|
<line x1="220" y1="60" x2="220" y2="113" class="text-tube-base-hs"/>
|
|
<path d="M220 75 Q220 58 242 58 Q258 58 262 70" class="text-tube-base-hs" fill="none"/>
|
|
|
|
<!-- a -->
|
|
<ellipse cx="300" cy="85" rx="20" ry="28" class="text-tube-border-hs"/>
|
|
<line x1="320" y1="60" x2="320" y2="113" class="text-tube-border-hs"/>
|
|
<ellipse cx="300" cy="85" rx="20" ry="28" class="text-tube-base-hs"/>
|
|
<line x1="320" y1="60" x2="320" y2="113" class="text-tube-base-hs"/>
|
|
|
|
<!-- l -->
|
|
<line x1="353" y1="30" x2="353" y2="113" class="text-tube-border-hs"/>
|
|
<line x1="353" y1="30" x2="353" y2="113" class="text-tube-base-hs"/>
|
|
|
|
<!-- Punto dorado final (nodo final de la línea central) -->
|
|
<g filter="url(#glowGold-hs)">
|
|
<circle cx="400" cy="70" r="10" fill="url(#nodeGold-hs)"/>
|
|
<circle cx="400" cy="70" r="6" fill="#fef3c7" opacity="0.5"/>
|
|
<circle cx="400" cy="70" r="2.5" fill="#fff" opacity="0.7"/>
|
|
</g>
|
|
|
|
</g>
|
|
|
|
</svg>
|
