198 lines
9.8 KiB
XML
198 lines
9.8 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 200" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
|
||
|
|
<defs>
|
||
|
|
<!-- Google Fonts import -->
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap');
|
||
|
|
</style>
|
||
|
|
<!-- Gradiente principal -->
|
||
|
|
<linearGradient id="techGradV" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
|
||
|
|
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:1"/>
|
||
|
|
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:1"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Gradiente vertical -->
|
||
|
|
<linearGradient id="vertGradV" x1="0%" y1="100%" x2="0%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:1"/>
|
||
|
|
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:0.8"/>
|
||
|
|
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:0.4"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Filtro glow tech -->
|
||
|
|
<filter id="techGlowV">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Filtro glow fuerte -->
|
||
|
|
<filter id="strongGlowV">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Filtro glass -->
|
||
|
|
<filter id="glassV">
|
||
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur"/>
|
||
|
|
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"/>
|
||
|
|
<feBlend in="SourceGraphic" in2="goo"/>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Fondo -->
|
||
|
|
<rect width="150" height="200" fill="#000000"/>
|
||
|
|
|
||
|
|
<!-- Grid de fondo técnico sutil -->
|
||
|
|
<g opacity="0.08" stroke="#22d3ee" stroke-width="0.5">
|
||
|
|
<line x1="0" y1="50" x2="150" y2="50"/>
|
||
|
|
<line x1="0" y1="100" x2="150" y2="100"/>
|
||
|
|
<line x1="0" y1="150" x2="150" y2="150"/>
|
||
|
|
<line x1="37" y1="0" x2="37" y2="200"/>
|
||
|
|
<line x1="75" y1="0" x2="75" y2="200"/>
|
||
|
|
<line x1="112" y1="0" x2="112" y2="200"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Símbolo técnico: flujo de datos ascendente (ARRIBA) -->
|
||
|
|
<g transform="translate(75, 90) scale(0.33)">
|
||
|
|
<!-- Base: plataforma -->
|
||
|
|
<rect x="-25" y="0" width="50" height="6.67" fill="url(#techGradV)" opacity="0.8" rx="3.33"/>
|
||
|
|
|
||
|
|
<!-- Stream principal - línea central tipo señal -->
|
||
|
|
<path d="M 0 0 L 0 -50 L 8.33 -58 L -8.33 -75 L 8.33 -92 L -8.33 -108 L 8.33 -125 L 0 -133 L 0 -200" stroke="url(#vertGradV)" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#techGlowV)">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,500;500,0;0,500" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream izquierdo 1 -->
|
||
|
|
<path d="M -33 0 L -33 -42 L -30 -58 L -37 -75 L -30 -92 L -37 -108 L -33 -125 L -33 -167" stroke="#22d3ee" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlowV)">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,417;417,0;0,417" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream izquierdo 2 -->
|
||
|
|
<path d="M -58 0 L -58 -33 L -53 -50 L -63 -67 L -53 -83 L -63 -100 L -58 -117 L -58 -142" stroke="#a855f7" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,333;333,0;0,333" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream derecho 1 -->
|
||
|
|
<path d="M 33 0 L 33 -42 L 30 -58 L 37 -75 L 30 -92 L 37 -108 L 33 -125 L 33 -167" stroke="#ec4899" stroke-width="3.33" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlowV)">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,417;417,0;0,417" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream derecho 2 -->
|
||
|
|
<path d="M 58 0 L 58 -33 L 53 -50 L 63 -67 L 53 -83 L 63 -100 L 58 -117 L 58 -142" stroke="#22d3ee" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,333;333,0;0,333" dur="5.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Nodos de datos en el flujo principal -->
|
||
|
|
<circle cx="0" cy="-67" r="5" fill="#22d3ee" filter="url(#strongGlowV)">
|
||
|
|
<animate attributeName="cy" values="-67;-183;-67" dur="3s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="0" cy="-100" r="4.17" fill="#a855f7" filter="url(#strongGlowV)">
|
||
|
|
<animate attributeName="cy" values="-100;-217;-100" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="0" cy="-133" r="3.33" fill="#ec4899" filter="url(#strongGlowV)">
|
||
|
|
<animate attributeName="cy" values="-133;-233;-133" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Partículas laterales -->
|
||
|
|
<circle cx="-33" cy="-83" r="3.33" fill="#22d3ee" opacity="0.7">
|
||
|
|
<animate attributeName="cy" values="-83;-175;-83" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="33" cy="-92" r="3.33" fill="#ec4899" opacity="0.7">
|
||
|
|
<animate attributeName="cy" values="-92;-175;-92" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="-58" cy="-58" r="2.5" fill="#a855f7" opacity="0.5">
|
||
|
|
<animate attributeName="cy" values="-58;-142;-58" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="58" cy="-67" r="2.5" fill="#22d3ee" opacity="0.5">
|
||
|
|
<animate attributeName="cy" values="-67;-142;-67" dur="5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Hexágonos técnicos flotantes -->
|
||
|
|
<polygon points="0,-158 5,-162 5,-167 0,-170 -5,-167 -5,-162" stroke="#22d3ee" fill="none" stroke-width="1.67" opacity="0.6">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(0,-50);translate(0,0)" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.6;0" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<polygon points="-42,-117 -37,-120 -37,-125 -42,-128 -47,-125 -47,-120" stroke="#a855f7" fill="none" stroke-width="1.67" opacity="0.5">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(0,-42);translate(0,0)" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<polygon points="42,-125 47,-128 47,-133 42,-137 37,-133 37,-128" stroke="#ec4899" fill="none" stroke-width="1.67" opacity="0.5">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(0,-33);translate(0,0)" dur="5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<!-- Líneas de conexión horizontales animadas -->
|
||
|
|
<line x1="-33" y1="-100" x2="-8" y2="-100" stroke="#22d3ee" stroke-width="0.83" opacity="0.4">
|
||
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
<line x1="8" y1="-117" x2="33" y2="-117" stroke="#ec4899" stroke-width="0.83" opacity="0.4">
|
||
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
<line x1="-58" y1="-83" x2="-37" y2="-83" stroke="#a855f7" stroke-width="0.83" opacity="0.3">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
<line x1="37" y1="-92" x2="58" y2="-92" stroke="#22d3ee" stroke-width="0.83" opacity="0.3">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto VAPORA (ABAJO) -->
|
||
|
|
<g filter="url(#glassV)">
|
||
|
|
<text x="75" y="135" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="32" font-weight="800" fill="url(#techGradV)" letter-spacing="2" text-anchor="middle">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<text x="75" y="135" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="32" font-weight="800" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.3" letter-spacing="2" text-anchor="middle">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Glow en texto -->
|
||
|
|
<text x="75" y="135" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="32" font-weight="800" fill="url(#techGradV)" letter-spacing="2" filter="url(#techGlowV)" opacity="0.3" text-anchor="middle">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Tagline -->
|
||
|
|
<text x="75" y="155" font-family="'Inter', sans-serif" font-size="8" fill="#a855f7" opacity="0.8" letter-spacing="0.1em" text-anchor="middle">
|
||
|
|
Evaporate complexity
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Indicador técnico decorativo -->
|
||
|
|
<g transform="translate(75, 170)">
|
||
|
|
<rect x="0" y="0" width="1.5" height="10" fill="#22d3ee" opacity="0.6">
|
||
|
|
<animate attributeName="height" values="10;15;10" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="4" y="0" width="1.5" height="12" fill="#a855f7" opacity="0.6">
|
||
|
|
<animate attributeName="height" values="12;17;12" dur="1.8s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="8" y="0" width="1.5" height="8" fill="#ec4899" opacity="0.6">
|
||
|
|
<animate attributeName="height" values="8;13;8" dur="1.3s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</svg>
|