2026-01-11 20:12:56 +00:00
<svg xmlns= "http://www.w3.org/2000/svg" viewBox= "170 40 590 300" 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= "techGrad" 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>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Gradiente vertical -->
<linearGradient id= "vertGrad" 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>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Filtro glow tech -->
<filter id= "techGlow" >
<feGaussianBlur stdDeviation= "2" result= "coloredBlur" />
<feMerge >
<feMergeNode in= "coloredBlur" />
<feMergeNode in= "SourceGraphic" />
</feMerge>
</filter>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Filtro glow fuerte -->
<filter id= "strongGlow" >
<feGaussianBlur stdDeviation= "4" result= "coloredBlur" />
<feMerge >
<feMergeNode in= "coloredBlur" />
<feMergeNode in= "coloredBlur" />
<feMergeNode in= "SourceGraphic" />
</feMerge>
</filter>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Filtro glass -->
<filter id= "glass" >
<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>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Fondo -->
<rect width= "800" height= "400" fill= "#000000" />
<!-- Grid de fondo técnico sutil -->
<g opacity= "0.08" stroke= "#22d3ee" stroke-width= "1" >
<line x1= "0" y1= "133" x2= "800" y2= "133" />
<line x1= "0" y1= "200" x2= "800" y2= "200" />
<line x1= "0" y1= "267" x2= "800" y2= "267" />
<line x1= "133" y1= "0" x2= "133" y2= "400" />
<line x1= "267" y1= "0" x2= "267" y2= "400" />
<line x1= "400" y1= "0" x2= "400" y2= "400" />
<line x1= "533" y1= "0" x2= "533" y2= "400" />
<line x1= "667" y1= "0" x2= "667" y2= "400" />
</g>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Símbolo técnico: flujo de datos ascendente -->
<g transform= "translate(267, 280)" >
<!-- Base: plataforma -->
<rect x= "-25" y= "0" width= "50" height= "6.67" fill= "url(#techGrad)" opacity= "0.8" rx= "3.33" />
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- 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(#vertGrad)" stroke-width= "5" fill= "none" stroke-linecap= "round" stroke-linejoin= "round" filter= "url(#techGlow)" >
<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(#techGlow)" >
<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(#techGlow)" >
<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>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Nodos de datos en el flujo principal -->
<circle cx= "0" cy= "-67" r= "5" fill= "#22d3ee" filter= "url(#strongGlow)" >
<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(#strongGlow)" >
<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(#strongGlow)" >
<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>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- 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>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Texto VAPORA -->
<g filter= "url(#glass)" >
<text x= "550" y= "207" font-family= "'JetBrains Mono', 'Fira Code', monospace" font-size= "90" font-weight= "800" fill= "url(#techGrad)" letter-spacing= "5" text-anchor= "middle" >
VAPORA
</text>
<text x= "550" y= "207" font-family= "'JetBrains Mono', 'Fira Code', monospace" font-size= "90" font-weight= "800" fill= "none" stroke= "rgba(255,255,255,0.2)" stroke-width= "0.83" letter-spacing= "5" text-anchor= "middle" >
VAPORA
</text>
</g>
<!-- Glow en texto -->
<text x= "550" y= "207" font-family= "'JetBrains Mono', 'Fira Code', monospace" font-size= "90" font-weight= "800" fill= "url(#techGrad)" letter-spacing= "5" filter= "url(#techGlow)" opacity= "0.3" text-anchor= "middle" >
VAPORA
</text>
<!-- Tagline -->
<text x= "550" y= "240" font-family= "'Inter', sans-serif" font-size= "20" fill= "#a855f7" opacity= "0.8" letter-spacing= "0.25em" text-anchor= "middle" >
Evaporate complexity
</text>
2026-01-11 21:46:08 +00:00
2026-01-11 20:12:56 +00:00
<!-- Indicador técnico decorativo -->
<g transform= "translate(550, 280)" >
<rect x= "0" y= "0" width= "2" height= "13.33" fill= "#22d3ee" opacity= "0.6" >
<animate attributeName= "height" values= "13.33;20;13.33" dur= "1.5s" repeatCount= "indefinite" />
</rect>
<rect x= "6.67" y= "0" width= "2" height= "16.67" fill= "#a855f7" opacity= "0.6" >
<animate attributeName= "height" values= "16.67;23.33;16.67" dur= "1.8s" repeatCount= "indefinite" />
</rect>
<rect x= "13.33" y= "0" width= "2" height= "10" fill= "#ec4899" opacity= "0.6" >
<animate attributeName= "height" values= "10;16.67;10" dur= "1.3s" repeatCount= "indefinite" />
</rect>
</g>
</svg>