225 lines
8.4 KiB
XML
225 lines
8.4 KiB
XML
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 250" width="600" height="250">
|
||
|
|
<defs>
|
||
|
|
<!-- Gradiente principal -->
|
||
|
|
<linearGradient id="mainGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<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 para ondas suaves -->
|
||
|
|
<linearGradient id="smoothWave" x1="0%" y1="100%" x2="0%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:0.8" />
|
||
|
|
<stop offset="50%" style="stop-color:#a855f7;stop-opacity:0.5" />
|
||
|
|
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:0.2" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Gradiente radial para núcleo -->
|
||
|
|
<radialGradient id="coreGlow">
|
||
|
|
<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.3" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<!-- Filtro glow suave -->
|
||
|
|
<filter id="softGlow">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Filtro glow intenso -->
|
||
|
|
<filter id="intensGlow">
|
||
|
|
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Filtro glassmorphism -->
|
||
|
|
<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="250" fill="#000000"/>
|
||
|
|
|
||
|
|
<!-- Símbolo de vapor híbrido -->
|
||
|
|
<g transform="translate(100, 140)">
|
||
|
|
<!-- Núcleo central brillante (de v3) -->
|
||
|
|
<circle cx="0" cy="0" r="10" fill="url(#coreGlow)" filter="url(#intensGlow)" opacity="0.95">
|
||
|
|
<animate attributeName="r" values="10;12;10" dur="2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.95;1;0.95" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Ondas suaves estilo v1 pero mejoradas -->
|
||
|
|
<!-- Onda curva izquierda -->
|
||
|
|
<path d="M -20 0 Q -25 -20, -20 -40 T -20 -60"
|
||
|
|
stroke="url(#smoothWave)"
|
||
|
|
stroke-width="3.5"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
filter="url(#softGlow)"
|
||
|
|
opacity="0.8">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M -20 0 Q -25 -20, -20 -40 T -20 -60;
|
||
|
|
M -20 0 Q -28 -20, -20 -40 T -20 -60;
|
||
|
|
M -20 0 Q -25 -20, -20 -40 T -20 -60"
|
||
|
|
dur="3s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda curva derecha -->
|
||
|
|
<path d="M 20 0 Q 25 -20, 20 -40 T 20 -60"
|
||
|
|
stroke="url(#smoothWave)"
|
||
|
|
stroke-width="3.5"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
filter="url(#softGlow)"
|
||
|
|
opacity="0.8">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 20 0 Q 25 -20, 20 -40 T 20 -60;
|
||
|
|
M 20 0 Q 28 -20, 20 -40 T 20 -60;
|
||
|
|
M 20 0 Q 25 -20, 20 -40 T 20 -60"
|
||
|
|
dur="3.2s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda central sutil -->
|
||
|
|
<path d="M 0 -5 Q -5 -25, 0 -45 T 0 -65"
|
||
|
|
stroke="url(#smoothWave)"
|
||
|
|
stroke-width="2.5"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.6">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 -5 Q -5 -25, 0 -45 T 0 -65;
|
||
|
|
M 0 -5 Q 5 -25, 0 -45 T 0 -65;
|
||
|
|
M 0 -5 Q -5 -25, 0 -45 T 0 -65"
|
||
|
|
dur="2.5s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Forma abstracta adicional (estilo v1) -->
|
||
|
|
<path d="M -10 -5 Q -15 -15, -10 -25 Q -5 -35, -10 -45"
|
||
|
|
stroke="url(#smoothWave)"
|
||
|
|
stroke-width="2"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.5">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M -10 -5 Q -15 -15, -10 -25 Q -5 -35, -10 -45;
|
||
|
|
M -10 -5 Q -13 -15, -10 -25 Q -7 -35, -10 -45;
|
||
|
|
M -10 -5 Q -15 -15, -10 -25 Q -5 -35, -10 -45"
|
||
|
|
dur="2.8s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<path d="M 10 -5 Q 15 -15, 10 -25 Q 5 -35, 10 -45"
|
||
|
|
stroke="url(#smoothWave)"
|
||
|
|
stroke-width="2"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.5">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 10 -5 Q 15 -15, 10 -25 Q 5 -35, 10 -45;
|
||
|
|
M 10 -5 Q 13 -15, 10 -25 Q 7 -35, 10 -45;
|
||
|
|
M 10 -5 Q 15 -15, 10 -25 Q 5 -35, 10 -45"
|
||
|
|
dur="3.3s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Partículas flotantes mejoradas -->
|
||
|
|
<circle cx="-15" cy="-20" r="2.5" fill="#22d3ee" opacity="0.8">
|
||
|
|
<animate attributeName="cy" values="-20;-70;-20" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.8;0" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="r" values="2.5;1.5;2.5" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="15" cy="-25" r="2" fill="#ec4899" opacity="0.7">
|
||
|
|
<animate attributeName="cy" values="-25;-75;-25" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="r" values="2;1;2" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="-5" cy="-15" r="1.8" fill="#a855f7" opacity="0.6">
|
||
|
|
<animate attributeName="cy" values="-15;-65;-15" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.6;0" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="8" cy="-18" r="1.8" fill="#22d3ee" opacity="0.6">
|
||
|
|
<animate attributeName="cy" values="-18;-68;-18" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.6;0" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="0" cy="-30" r="1.5" fill="#a855f7" opacity="0.5">
|
||
|
|
<animate attributeName="cy" values="-30;-80;-30" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="-8" cy="-35" r="1.2" fill="#ec4899" opacity="0.4">
|
||
|
|
<animate attributeName="cy" values="-35;-75;-35" dur="4.8s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.4;0" dur="4.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto VAPORA con glassmorphism -->
|
||
|
|
<g filter="url(#glass)">
|
||
|
|
<text x="220" y="135"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="58"
|
||
|
|
font-weight="800"
|
||
|
|
fill="url(#mainGrad)"
|
||
|
|
letter-spacing="3">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Capa de brillo glassmorphism -->
|
||
|
|
<text x="220" y="135"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="58"
|
||
|
|
font-weight="800"
|
||
|
|
fill="none"
|
||
|
|
stroke="rgba(255,255,255,0.25)"
|
||
|
|
stroke-width="0.5"
|
||
|
|
letter-spacing="3">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Glow sutil adicional -->
|
||
|
|
<text x="220" y="135"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="58"
|
||
|
|
font-weight="800"
|
||
|
|
fill="url(#mainGrad)"
|
||
|
|
letter-spacing="3"
|
||
|
|
filter="url(#softGlow)"
|
||
|
|
opacity="0.25">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Tagline -->
|
||
|
|
<text x="220" y="162"
|
||
|
|
font-family="'Inter', sans-serif"
|
||
|
|
font-size="13"
|
||
|
|
fill="#a855f7"
|
||
|
|
opacity="0.75"
|
||
|
|
letter-spacing="1.5">
|
||
|
|
Evaporate complexity. Build in the cloud.
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Punto decorativo pulsante -->
|
||
|
|
<circle cx="205" cy="125" r="3" fill="#22d3ee" opacity="0.6">
|
||
|
|
<animate attributeName="r" values="3;4.5;3" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</svg>
|