268 lines
9.7 KiB
XML
268 lines
9.7 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 450 315" width="450" height="315">
|
|
<defs>
|
|
<!-- Gradientes -->
|
|
<radialGradient id="nodeCore-vs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#4a9eff"/>
|
|
<stop offset="100%" stop-color="#2d7ad6"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="nodeAccent-vs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#3dd68d"/>
|
|
<stop offset="100%" stop-color="#28a968"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="nodeSecondary-vs" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#64748b"/>
|
|
<stop offset="100%" stop-color="#475569"/>
|
|
</radialGradient>
|
|
|
|
<radialGradient id="nodeGold-vs" 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-vs" 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-vs" 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-vs" 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-vs {
|
|
stroke: #475569;
|
|
stroke-width: 1.5;
|
|
stroke-linecap: round;
|
|
fill: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.connection-flow-vs {
|
|
stroke: #4a9eff;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 8 30;
|
|
fill: none;
|
|
}
|
|
|
|
.connection-flow-accent-vs {
|
|
stroke: #3dd68d;
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 8 30;
|
|
fill: none;
|
|
}
|
|
|
|
.hex-outline-vs {
|
|
stroke: #4a9eff;
|
|
stroke-width: 1;
|
|
fill: none;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.hex-outline-inner-vs {
|
|
stroke: #3dd68d;
|
|
stroke-width: 0.75;
|
|
fill: none;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
.glow-ring-vs {
|
|
fill: none;
|
|
stroke: #4a9eff;
|
|
stroke-width: 1;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.glow-ring-accent-vs {
|
|
fill: none;
|
|
stroke: #3dd68d;
|
|
stroke-width: 1;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.text-tube-base-vs {
|
|
fill: none;
|
|
stroke: #cbd5e1;
|
|
stroke-width: 10;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.text-tube-border-vs {
|
|
fill: none;
|
|
stroke: #475569;
|
|
stroke-width: 12;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
</style>
|
|
|
|
|
|
<!-- ==================== LOGO HEXAGON ==================== -->
|
|
<g id="logo-vs" transform="translate(45, 20) scale(0.42)">
|
|
|
|
<!-- Hexágono exterior sutil -->
|
|
<polygon class="hex-outline-vs" points="256,96 388,176 388,336 256,416 124,336 124,176"/>
|
|
<polygon class="hex-outline-inner-vs" points="256,136 352,196 352,316 256,376 160,316 160,196"/>
|
|
|
|
<!-- Conexiones al centro -->
|
|
<g id="connections-radial-vs">
|
|
<line class="connection-base-vs" x1="256" y1="256" x2="256" y2="116"/>
|
|
<line class="connection-base-vs" x1="256" y1="256" x2="377" y2="186"/>
|
|
<line class="connection-base-vs" x1="256" y1="256" x2="377" y2="326"/>
|
|
<line class="connection-base-vs" x1="256" y1="256" x2="256" y2="396"/>
|
|
<line class="connection-base-vs" x1="256" y1="256" x2="135" y2="326"/>
|
|
<line class="connection-base-vs" x1="256" y1="256" x2="135" y2="186"/>
|
|
|
|
<line class="connection-flow-vs" x1="256" y1="256" x2="256" y2="116"/>
|
|
<line class="connection-flow-accent-vs" x1="256" y1="256" x2="377" y2="186"/>
|
|
<line class="connection-flow-vs" x1="256" y1="256" x2="377" y2="326"/>
|
|
<line class="connection-flow-accent-vs" x1="256" y1="256" x2="256" y2="396"/>
|
|
<line class="connection-flow-vs" x1="256" y1="256" x2="135" y2="326"/>
|
|
<line class="connection-flow-accent-vs" x1="256" y1="256" x2="135" y2="186"/>
|
|
</g>
|
|
|
|
<!-- Conexiones perimetrales -->
|
|
<g id="connections-perimeter-vs">
|
|
<line class="connection-base-vs" x1="256" y1="116" x2="377" y2="186"/>
|
|
<line class="connection-base-vs" x1="377" y1="186" x2="377" y2="326"/>
|
|
<line class="connection-base-vs" x1="377" y1="326" x2="256" y2="396"/>
|
|
<line class="connection-base-vs" x1="256" y1="396" x2="135" y2="326"/>
|
|
<line class="connection-base-vs" x1="135" y1="326" x2="135" y2="186"/>
|
|
<line class="connection-base-vs" x1="135" y1="186" x2="256" y2="116"/>
|
|
</g>
|
|
|
|
<!-- Nodos -->
|
|
<g id="nodes-vs">
|
|
<!-- Centro - DORADO -->
|
|
<g filter="url(#glowGold-vs)">
|
|
<circle cx="256" cy="256" r="28" fill="url(#nodeGold-vs)"/>
|
|
<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-vs)">
|
|
<circle class="glow-ring-accent-vs" cx="256" cy="116" r="20" opacity="0.3"/>
|
|
<circle cx="256" cy="116" r="15" fill="url(#nodeAccent-vs)"/>
|
|
<circle cx="256" cy="116" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 2 - Top Right -->
|
|
<g filter="url(#glow-vs)">
|
|
<circle class="glow-ring-vs" cx="377" cy="186" r="20" opacity="0.3"/>
|
|
<circle cx="377" cy="186" r="15" fill="url(#nodeCore-vs)"/>
|
|
<circle cx="377" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 3 - Bottom Right -->
|
|
<g filter="url(#glow-vs)">
|
|
<circle class="glow-ring-accent-vs" cx="377" cy="326" r="20" opacity="0.3"/>
|
|
<circle cx="377" cy="326" r="15" fill="url(#nodeSecondary-vs)"/>
|
|
<circle cx="377" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 4 - Bottom -->
|
|
<g filter="url(#glow-vs)">
|
|
<circle class="glow-ring-vs" cx="256" cy="396" r="20" opacity="0.3"/>
|
|
<circle cx="256" cy="396" r="15" fill="url(#nodeAccent-vs)"/>
|
|
<circle cx="256" cy="396" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 5 - Bottom Left -->
|
|
<g filter="url(#glow-vs)">
|
|
<circle class="glow-ring-accent-vs" cx="135" cy="326" r="20" opacity="0.3"/>
|
|
<circle cx="135" cy="326" r="15" fill="url(#nodeCore-vs)"/>
|
|
<circle cx="135" cy="326" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
|
|
<!-- Nodo 6 - Top Left -->
|
|
<g filter="url(#glow-vs)">
|
|
<circle class="glow-ring-vs" cx="135" cy="186" r="20" opacity="0.3"/>
|
|
<circle cx="135" cy="186" r="15" fill="url(#nodeSecondary-vs)"/>
|
|
<circle cx="135" cy="186" r="6" fill="#fff" opacity="0.2"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Puntos de sincronización -->
|
|
<g id="sync-dots-vs" 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>
|
|
|
|
|
|
<!-- ==================== TEXTO kogral (centered below logo) ==================== -->
|
|
<g id="text-vs" transform="translate(-45, 175)">
|
|
|
|
<!-- K -->
|
|
<line x1="20" y1="30" x2="20" y2="120" class="text-tube-border-vs"/>
|
|
<line x1="20" y1="75" x2="60" y2="30" class="text-tube-border-vs"/>
|
|
<line x1="20" y1="75" x2="60" y2="120" class="text-tube-border-vs"/>
|
|
<line x1="20" y1="30" x2="20" y2="120" class="text-tube-base-vs"/>
|
|
<line x1="20" y1="75" x2="60" y2="30" class="text-tube-base-vs"/>
|
|
<line x1="20" y1="75" x2="60" y2="120" class="text-tube-base-vs"/>
|
|
|
|
<!-- o -->
|
|
<ellipse cx="100" cy="85" rx="20" ry="28" class="text-tube-border-vs"/>
|
|
<ellipse cx="100" cy="85" rx="20" ry="28" class="text-tube-base-vs"/>
|
|
|
|
<!-- g -->
|
|
<ellipse cx="170" cy="85" rx="20" ry="28" class="text-tube-border-vs"/>
|
|
<path d="M190 85 L190 115 Q190 135 170 135 Q152 135 148 122" class="text-tube-border-vs" fill="none"/>
|
|
<ellipse cx="170" cy="85" rx="20" ry="28" class="text-tube-base-vs"/>
|
|
<path d="M190 85 L190 115 Q190 135 170 135 Q152 135 148 122" class="text-tube-base-vs" fill="none"/>
|
|
|
|
<!-- r -->
|
|
<line x1="220" y1="60" x2="220" y2="113" class="text-tube-border-vs"/>
|
|
<path d="M220 75 Q220 58 242 58 Q258 58 262 70" class="text-tube-border-vs" fill="none"/>
|
|
<line x1="220" y1="60" x2="220" y2="113" class="text-tube-base-vs"/>
|
|
<path d="M220 75 Q220 58 242 58 Q258 58 262 70" class="text-tube-base-vs" fill="none"/>
|
|
|
|
<!-- a -->
|
|
<ellipse cx="300" cy="85" rx="20" ry="28" class="text-tube-border-vs"/>
|
|
<line x1="320" y1="60" x2="320" y2="113" class="text-tube-border-vs"/>
|
|
<ellipse cx="300" cy="85" rx="20" ry="28" class="text-tube-base-vs"/>
|
|
<line x1="320" y1="60" x2="320" y2="113" class="text-tube-base-vs"/>
|
|
|
|
<!-- l -->
|
|
<line x1="353" y1="30" x2="353" y2="113" class="text-tube-border-vs"/>
|
|
<line x1="353" y1="30" x2="353" y2="113" class="text-tube-base-vs"/>
|
|
|
|
<!-- Punto dorado final (nodo final de la línea central) -->
|
|
<g filter="url(#glowGold-vs)">
|
|
<circle cx="393" cy="75" r="10" fill="url(#nodeGold-vs)"/>
|
|
<circle cx="393" cy="75" r="6" fill="#fef3c7" opacity="0.5"/>
|
|
<circle cx="393" cy="75" r="2.5" fill="#fff" opacity="0.7"/>
|
|
</g>
|
|
|
|
</g>
|
|
|
|
</svg>
|