jesus/kogral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
kogral/assets/web/kogral.svg

355 lines
14 KiB
XML
Raw Normal View History

chore: add docs
2026-01-23 16:11:07 +00:00
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 610 200" width="610" height="200">
<defs>
<!-- Gradientes -->
<radialGradient id="nodeCore" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4a9eff"/>
<stop offset="100%" stop-color="#2d7ad6"/>
</radialGradient>
<radialGradient id="nodeAccent" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#3dd68d"/>
<stop offset="100%" stop-color="#28a968"/>
</radialGradient>
<radialGradient id="nodeSecondary" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#64748b"/>
<stop offset="100%" stop-color="#475569"/>
</radialGradient>
<radialGradient id="nodeGold" 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" 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" 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" 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>
@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: #475569;
stroke-width: 1.5;
stroke-linecap: round;
fill: none;
opacity: 0.5;
}
.connection-flow {
stroke: #4a9eff;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 8 30;
fill: none;
animation: flowToCenter 1.8s linear infinite;
}
.connection-flow-accent {
stroke: #3dd68d;
stroke-width: 2;
stroke-linecap: round;
stroke-dasharray: 8 30;
fill: none;
animation: flowToCenter 1.8s linear infinite 0.9s;
}
.hex-outline {
stroke: #4a9eff;
stroke-width: 1;
fill: none;
animation: hexRotate 3s ease-in-out infinite;
}
.hex-outline-inner {
stroke: #3dd68d;
stroke-width: 0.75;
fill: none;
animation: hexRotate 3s ease-in-out infinite 1.5s;
}
.glow-ring {
fill: none;
stroke: #4a9eff;
stroke-width: 1;
animation: pulseGlow 2.5s ease-in-out infinite;
}
.glow-ring-accent {
fill: none;
stroke: #3dd68d;
stroke-width: 1;
animation: pulseGlow 2.5s ease-in-out infinite 0.5s;
}
.text-tube-base {
fill: none;
stroke: #cbd5e1;
stroke-width: 10;
stroke-linecap: round;
stroke-linejoin: round;
}
.text-tube-border {
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" 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">
<!-- Centro - DORADO -->
<g class="node-center" filter="url(#glowGold)">
<circle cx="256" cy="256" r="28" fill="url(#nodeGold)"/>
<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 class="node-1" filter="url(#glow)">
<circle class="glow-ring-accent" cx="256" cy="116" r="20" opacity="0.3"/>
<circle cx="256" cy="116" r="15" fill="url(#nodeAccent)"/>
<circle cx="256" cy="116" r="6" fill="#fff" opacity="0.2"/>
</g>
<!-- Nodo 2 - Top Right -->
<g class="node-2" filter="url(#glow)">
<circle class="glow-ring" cx="377" cy="186" r="20" opacity="0.3"/>
<circle cx="377" cy="186" r="15" fill="url(#nodeCore)"/>
<circle cx="377" cy="186" r="6" fill="#fff" opacity="0.2"/>
</g>
<!-- Nodo 3 - Bottom Right -->
<g class="node-3" filter="url(#glow)">
<circle class="glow-ring-accent" cx="377" cy="326" r="20" opacity="0.3"/>
<circle cx="377" cy="326" r="15" fill="url(#nodeSecondary)"/>
<circle cx="377" cy="326" r="6" fill="#fff" opacity="0.2"/>
</g>
<!-- Nodo 4 - Bottom -->
<g class="node-4" filter="url(#glow)">
<circle class="glow-ring" cx="256" cy="396" r="20" opacity="0.3"/>
<circle cx="256" cy="396" r="15" fill="url(#nodeAccent)"/>
<circle cx="256" cy="396" r="6" fill="#fff" opacity="0.2"/>
</g>
<!-- Nodo 5 - Bottom Left -->
<g class="node-5" filter="url(#glow)">
<circle class="glow-ring-accent" cx="135" cy="326" r="20" opacity="0.3"/>
<circle cx="135" cy="326" r="15" fill="url(#nodeCore)"/>
<circle cx="135" cy="326" r="6" fill="#fff" opacity="0.2"/>
</g>
<!-- Nodo 6 - Top Left -->
<g class="node-6" filter="url(#glow)">
<circle class="glow-ring" cx="135" cy="186" r="20" opacity="0.3"/>
<circle cx="135" cy="186" r="15" fill="url(#nodeSecondary)"/>
<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">
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite"/>
</circle>
<circle cx="316" cy="221" r="2.5" fill="#3dd68d">
<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="#4a9eff">
<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="#3dd68d">
<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="#4a9eff">
<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="#3dd68d">
<animate attributeName="opacity" values="0.3;1;0.3" dur="1.8s" repeatCount="indefinite" begin="1.5s"/>
</circle>
</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"/>
<!-- Línea prolongada hasta el punto final -->
<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">
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="-10" cy="100" r="1.5" fill="#64748b">
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.5s" repeatCount="indefinite" begin="0.5s"/>
</circle>
<circle cx="373" cy="15" r="1.5" fill="#64748b">
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="3.2s" repeatCount="indefinite" begin="0.3s"/>
</circle>
<!-- Nodos intermedios -->
<circle cx="135" cy="70" r="1.5" fill="#4a9eff">
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="195" cy="60" r="1" fill="#3dd68d">
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="2.3s" repeatCount="indefinite" begin="0.4s"/>
</circle>
<circle cx="260" cy="90" r="1.5" fill="#4a9eff">
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="2.6s" repeatCount="indefinite" begin="0.8s"/>
</circle>
<circle cx="330" cy="50" r="1" fill="#3dd68d">
<animate attributeName="opacity" values="0.2;0.7;0.2" dur="2.1s" repeatCount="indefinite" begin="1.2s"/>
</circle>
</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"/>
<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)">
<circle cx="400" cy="70" r="10" fill="url(#nodeGold)"/>
<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>
Reference in New Issue Copy Permalink