157 lines
5.9 KiB
XML
157 lines
5.9 KiB
XML
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" width="500" height="200">
|
||
|
|
<defs>
|
||
|
|
<!-- Gradiente principal: cyan -> purple -> pink -->
|
||
|
|
<linearGradient id="vaporGradient" 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 -->
|
||
|
|
<linearGradient id="waveGradient" 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>
|
||
|
|
|
||
|
|
<!-- Filtro glassmorphism -->
|
||
|
|
<filter id="glass">
|
||
|
|
<feGaussianBlur in="SourceGraphic" stdDeviation="1" 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>
|
||
|
|
|
||
|
|
<!-- Filtro glow -->
|
||
|
|
<filter id="glow">
|
||
|
|
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Fondo -->
|
||
|
|
<rect width="500" height="200" fill="#000000"/>
|
||
|
|
|
||
|
|
<!-- Ondas de vapor ascendentes (3 ondas con animación) -->
|
||
|
|
<g opacity="0.6">
|
||
|
|
<!-- Onda 1 -->
|
||
|
|
<path d="M 80 150 Q 90 130, 100 150 T 120 150" stroke="url(#waveGradient)" stroke-width="3" fill="none" opacity="0.8">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 80 150 Q 90 130, 100 150 T 120 150;
|
||
|
|
M 80 140 Q 90 120, 100 140 T 120 140;
|
||
|
|
M 80 130 Q 90 110, 100 130 T 120 130;
|
||
|
|
M 80 120 Q 90 100, 100 120 T 120 120"
|
||
|
|
dur="3s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.8;0.4;0.1;0" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda 2 -->
|
||
|
|
<path d="M 70 160 Q 85 140, 100 160 T 130 160" stroke="url(#waveGradient)" stroke-width="2.5" fill="none" opacity="0.7">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 70 160 Q 85 140, 100 160 T 130 160;
|
||
|
|
M 70 145 Q 85 125, 100 145 T 130 145;
|
||
|
|
M 70 130 Q 85 110, 100 130 T 130 130;
|
||
|
|
M 70 115 Q 85 95, 100 115 T 130 115"
|
||
|
|
dur="3.5s"
|
||
|
|
begin="0.5s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.7;0.3;0.1;0" dur="3.5s" begin="0.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda 3 -->
|
||
|
|
<path d="M 90 155 Q 100 135, 110 155 T 130 155" stroke="url(#waveGradient)" stroke-width="2" fill="none" opacity="0.6">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 90 155 Q 100 135, 110 155 T 130 155;
|
||
|
|
M 90 140 Q 100 120, 110 140 T 130 140;
|
||
|
|
M 90 125 Q 100 105, 110 125 T 130 125;
|
||
|
|
M 90 110 Q 100 90, 110 110 T 130 110"
|
||
|
|
dur="4s"
|
||
|
|
begin="1s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.6;0.3;0.1;0" dur="4s" begin="1s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Partículas flotantes -->
|
||
|
|
<g opacity="0.5">
|
||
|
|
<circle cx="110" cy="140" r="2" fill="#22d3ee">
|
||
|
|
<animate attributeName="cy" values="140;80;140" dur="5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="95" cy="150" r="1.5" fill="#a855f7">
|
||
|
|
<animate attributeName="cy" values="150;90;150" dur="6s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="6s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="85" cy="145" r="1" fill="#ec4899">
|
||
|
|
<animate attributeName="cy" values="145;85;145" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Logo icon: símbolo de vapor estilizado -->
|
||
|
|
<g transform="translate(50, 80)">
|
||
|
|
<!-- Forma de vapor abstracta -->
|
||
|
|
<path d="M 20 30 Q 30 10, 40 30 Q 50 50, 60 30 Q 70 10, 80 30"
|
||
|
|
stroke="url(#vaporGradient)"
|
||
|
|
stroke-width="4"
|
||
|
|
fill="none"
|
||
|
|
filter="url(#glow)"
|
||
|
|
opacity="0.9"/>
|
||
|
|
<path d="M 25 40 Q 35 20, 45 40 Q 55 60, 65 40 Q 75 20, 85 40"
|
||
|
|
stroke="url(#vaporGradient)"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="none"
|
||
|
|
filter="url(#glow)"
|
||
|
|
opacity="0.6"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto VAPORA con efecto glassmorphism -->
|
||
|
|
<g filter="url(#glass)">
|
||
|
|
<text x="150" y="110"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="48"
|
||
|
|
font-weight="700"
|
||
|
|
fill="url(#vaporGradient)"
|
||
|
|
letter-spacing="2">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Capa de brillo glassmorphism -->
|
||
|
|
<text x="150" y="110"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="48"
|
||
|
|
font-weight="700"
|
||
|
|
fill="none"
|
||
|
|
stroke="rgba(255,255,255,0.3)"
|
||
|
|
stroke-width="0.5"
|
||
|
|
letter-spacing="2">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Tagline -->
|
||
|
|
<text x="150" y="135"
|
||
|
|
font-family="'Inter', sans-serif"
|
||
|
|
font-size="12"
|
||
|
|
fill="#a855f7"
|
||
|
|
opacity="0.7"
|
||
|
|
letter-spacing="1">
|
||
|
|
Evaporate complexity. Build in the cloud.
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Brillo adicional en el texto -->
|
||
|
|
<g filter="url(#glow)" opacity="0.3">
|
||
|
|
<text x="150" y="110"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="48"
|
||
|
|
font-weight="700"
|
||
|
|
fill="url(#vaporGradient)"
|
||
|
|
letter-spacing="2">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|