206 lines
10 KiB
XML
206 lines
10 KiB
XML
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300" width="600" height="300">
|
||
|
|
<defs>
|
||
|
|
<!-- 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>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
|
||
|
|
<!-- Filtro glow tech -->
|
||
|
|
<filter id="techGlow">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Filtro glow fuerte -->
|
||
|
|
<filter id="strongGlow">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
|
||
|
|
<!-- Fondo -->
|
||
|
|
<rect width="600" height="300" fill="#000000"/>
|
||
|
|
|
||
|
|
<!-- Grid de fondo técnico sutil -->
|
||
|
|
<g opacity="0.08" stroke="#22d3ee" stroke-width="0.5">
|
||
|
|
<line x1="0" y1="100" x2="600" y2="100"/>
|
||
|
|
<line x1="0" y1="150" x2="600" y2="150"/>
|
||
|
|
<line x1="0" y1="200" x2="600" y2="200"/>
|
||
|
|
<line x1="100" y1="0" x2="100" y2="300"/>
|
||
|
|
<line x1="200" y1="0" x2="200" y2="300"/>
|
||
|
|
<line x1="300" y1="0" x2="300" y2="300"/>
|
||
|
|
<line x1="400" y1="0" x2="400" y2="300"/>
|
||
|
|
<line x1="500" y1="0" x2="500" y2="300"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Símbolo técnico: flujo de datos ascendente -->
|
||
|
|
<g transform="translate(80, 240)">
|
||
|
|
<!-- Base: plataforma -->
|
||
|
|
<rect x="-15" y="0" width="30" height="4" fill="url(#techGrad)" opacity="0.8" rx="2"/>
|
||
|
|
|
||
|
|
<!-- Stream principal - línea central tipo señal -->
|
||
|
|
<path d="M 0 0 L 0 -30 L 5 -35 L -5 -45 L 5 -55 L -5 -65 L 5 -75 L 0 -80 L 0 -120" stroke="url(#vertGrad)" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#techGlow)">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,300;300,0;0,300" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream izquierdo 1 -->
|
||
|
|
<path d="M -20 0 L -20 -25 L -18 -35 L -22 -45 L -18 -55 L -22 -65 L -20 -75 L -20 -100" stroke="#22d3ee" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlow)">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,250;250,0;0,250" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream izquierdo 2 -->
|
||
|
|
<path d="M -35 0 L -35 -20 L -32 -30 L -38 -40 L -32 -50 L -38 -60 L -35 -70 L -35 -85" stroke="#a855f7" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.5">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,200;200,0;0,200" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream derecho 1 -->
|
||
|
|
<path d="M 20 0 L 20 -25 L 18 -35 L 22 -45 L 18 -55 L 22 -65 L 20 -75 L 20 -100" stroke="#ec4899" stroke-width="2" fill="none" stroke-linecap="round" opacity="0.6" filter="url(#techGlow)">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,250;250,0;0,250" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Stream derecho 2 -->
|
||
|
|
<path d="M 35 0 L 35 -20 L 32 -30 L 38 -40 L 32 -50 L 38 -60 L 35 -70 L 35 -85" stroke="#22d3ee" stroke-width="1.5" fill="none" stroke-linecap="round" opacity="0.5">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,200;200,0;0,200" dur="5.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Nodos de datos en el flujo principal -->
|
||
|
|
<circle cx="0" cy="-40" r="3" fill="#22d3ee" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cy" values="-40;-110;-40" dur="3s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="0" cy="-60" r="2.5" fill="#a855f7" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cy" values="-60;-130;-60" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="0" cy="-80" r="2" fill="#ec4899" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cy" values="-80;-140;-80" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Partículas laterales -->
|
||
|
|
<circle cx="-20" cy="-50" r="2" fill="#22d3ee" opacity="0.7">
|
||
|
|
<animate attributeName="cy" values="-50;-105;-50" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="20" cy="-55" r="2" fill="#ec4899" opacity="0.7">
|
||
|
|
<animate attributeName="cy" values="-55;-105;-55" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="-35" cy="-35" r="1.5" fill="#a855f7" opacity="0.5">
|
||
|
|
<animate attributeName="cy" values="-35;-85;-35" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="35" cy="-40" r="1.5" fill="#22d3ee" opacity="0.5">
|
||
|
|
<animate attributeName="cy" values="-40;-85;-40" 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,-95 3,-97 3,-100 0,-102 -3,-100 -3,-97" stroke="#22d3ee" fill="none" stroke-width="1" opacity="0.6">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(0,-30);translate(0,0)" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.6;0" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<polygon points="-25,-70 -22,-72 -22,-75 -25,-77 -28,-75 -28,-72" stroke="#a855f7" fill="none" stroke-width="1" opacity="0.5">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(0,-25);translate(0,0)" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<polygon points="25,-75 28,-77 28,-80 25,-82 22,-80 22,-77" stroke="#ec4899" fill="none" stroke-width="1" opacity="0.5">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(0,-20);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="-20" y1="-60" x2="-5" y2="-60" stroke="#22d3ee" stroke-width="0.5" opacity="0.4">
|
||
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
<line x1="5" y1="-70" x2="20" y2="-70" stroke="#ec4899" stroke-width="0.5" opacity="0.4">
|
||
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
<line x1="-35" y1="-50" x2="-22" y2="-50" stroke="#a855f7" stroke-width="0.5" opacity="0.3">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
|
||
|
|
<line x1="22" y1="-55" x2="35" y2="-55" stroke="#22d3ee" stroke-width="0.5" opacity="0.3">
|
||
|
|
<animate attributeName="opacity" values="0;0.3;0" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</line>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Indicadores técnicos laterales -->
|
||
|
|
<g opacity="0.3">
|
||
|
|
<text x="25" y="150" font-family="'JetBrains Mono', monospace" font-size="8" fill="#22d3ee">↑ STREAM</text>
|
||
|
|
<text x="25" y="180" font-family="'JetBrains Mono', monospace" font-size="8" fill="#a855f7">↑ DATA</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto VAPORA -->
|
||
|
|
<g filter="url(#glass)">
|
||
|
|
<text x="200" y="155" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="64" font-weight="800" fill="url(#techGrad)" letter-spacing="4">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<text x="200" y="155" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="64" font-weight="800" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5" letter-spacing="4">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Glow en texto -->
|
||
|
|
<text x="200" y="155" font-family="'JetBrains Mono', 'Fira Code', monospace" font-size="64" font-weight="800" fill="url(#techGrad)" letter-spacing="4" filter="url(#techGlow)" opacity="0.3">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Tagline -->
|
||
|
|
<text x="200" y="183" font-family="'Inter', sans-serif" font-size="14" fill="#a855f7" opacity="0.8" letter-spacing="2">
|
||
|
|
Evaporate complexity. Build in the cloud.
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Indicador técnico decorativo -->
|
||
|
|
<g transform="translate(200, 195)">
|
||
|
|
<rect x="0" y="0" width="2" height="8" fill="#22d3ee" opacity="0.6">
|
||
|
|
<animate attributeName="height" values="8;12;8" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="5" y="0" width="2" height="10" fill="#a855f7" opacity="0.6">
|
||
|
|
<animate attributeName="height" values="10;14;10" dur="1.8s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="10" y="0" width="2" height="6" fill="#ec4899" opacity="0.6">
|
||
|
|
<animate attributeName="height" values="6;10;6" dur="1.3s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Metadata técnica -->
|
||
|
|
<text x="550" y="280" font-family="'JetBrains Mono', monospace" font-size="8" fill="#22d3ee" opacity="0.3" text-anchor="end">
|
||
|
|
v4.0.0-dev
|
||
|
|
</text>
|
||
|
|
</svg>
|