270 lines
10 KiB
XML
270 lines
10 KiB
XML
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 250" width="600" height="250">
|
||
|
|
<defs>
|
||
|
|
<!-- Gradiente horizontal -->
|
||
|
|
<linearGradient id="horizGrad" 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 para ondas que se desvanecen -->
|
||
|
|
<linearGradient id="fadeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#22d3ee;stop-opacity:0.2" />
|
||
|
|
<stop offset="30%" style="stop-color:#a855f7;stop-opacity:0.8" />
|
||
|
|
<stop offset="70%" style="stop-color:#ec4899;stop-opacity:0.8" />
|
||
|
|
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:0.2" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Filtro glow -->
|
||
|
|
<filter id="glow">
|
||
|
|
<feGaussianBlur stdDeviation="2.5" 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="250" fill="#000000"/>
|
||
|
|
|
||
|
|
<!-- Punto de origen del flujo -->
|
||
|
|
<g transform="translate(50, 125)">
|
||
|
|
<!-- Núcleo emisor -->
|
||
|
|
<circle cx="0" cy="0" r="8" fill="url(#horizGrad)" filter="url(#strongGlow)" opacity="0.9">
|
||
|
|
<animate attributeName="r" values="8;10;8" dur="2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.9;1;0.9" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="0" cy="0" r="4" fill="#22d3ee" opacity="0.8">
|
||
|
|
<animate attributeName="r" values="4;6;4" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Ondas horizontales superiores -->
|
||
|
|
<!-- Onda 1 superior -->
|
||
|
|
<path d="M 0 -30 Q 30 -35, 60 -30 T 120 -30 T 180 -30 T 240 -30"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
filter="url(#glow)"
|
||
|
|
opacity="0.8">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 -30 Q 30 -35, 60 -30 T 120 -30 T 180 -30 T 240 -30;
|
||
|
|
M 0 -30 Q 30 -25, 60 -30 T 120 -30 T 180 -30 T 240 -30;
|
||
|
|
M 0 -30 Q 30 -35, 60 -30 T 120 -30 T 180 -30 T 240 -30"
|
||
|
|
dur="3s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda 2 superior -->
|
||
|
|
<path d="M 0 -20 Q 25 -23, 50 -20 T 100 -20 T 150 -20 T 200 -20"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="2.5"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.7">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 -20 Q 25 -23, 50 -20 T 100 -20 T 150 -20 T 200 -20;
|
||
|
|
M 0 -20 Q 25 -17, 50 -20 T 100 -20 T 150 -20 T 200 -20;
|
||
|
|
M 0 -20 Q 25 -23, 50 -20 T 100 -20 T 150 -20 T 200 -20"
|
||
|
|
dur="2.5s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda 3 superior cerca -->
|
||
|
|
<path d="M 0 -12 Q 20 -14, 40 -12 T 80 -12 T 120 -12 T 160 -12"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="2"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.6">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 -12 Q 20 -14, 40 -12 T 80 -12 T 120 -12 T 160 -12;
|
||
|
|
M 0 -12 Q 20 -10, 40 -12 T 80 -12 T 120 -12 T 160 -12;
|
||
|
|
M 0 -12 Q 20 -14, 40 -12 T 80 -12 T 120 -12 T 160 -12"
|
||
|
|
dur="2.2s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Ondas inferiores (simétricas) -->
|
||
|
|
<!-- Onda 1 inferior -->
|
||
|
|
<path d="M 0 30 Q 30 35, 60 30 T 120 30 T 180 30 T 240 30"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="3"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
filter="url(#glow)"
|
||
|
|
opacity="0.8">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 30 Q 30 35, 60 30 T 120 30 T 180 30 T 240 30;
|
||
|
|
M 0 30 Q 30 25, 60 30 T 120 30 T 180 30 T 240 30;
|
||
|
|
M 0 30 Q 30 35, 60 30 T 120 30 T 180 30 T 240 30"
|
||
|
|
dur="3.2s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda 2 inferior -->
|
||
|
|
<path d="M 0 20 Q 25 23, 50 20 T 100 20 T 150 20 T 200 20"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="2.5"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.7">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 20 Q 25 23, 50 20 T 100 20 T 150 20 T 200 20;
|
||
|
|
M 0 20 Q 25 17, 50 20 T 100 20 T 150 20 T 200 20;
|
||
|
|
M 0 20 Q 25 23, 50 20 T 100 20 T 150 20 T 200 20"
|
||
|
|
dur="2.7s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda 3 inferior cerca -->
|
||
|
|
<path d="M 0 12 Q 20 14, 40 12 T 80 12 T 120 12 T 160 12"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="2"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.6">
|
||
|
|
<animate attributeName="d"
|
||
|
|
values="M 0 12 Q 20 14, 40 12 T 80 12 T 120 12 T 160 12;
|
||
|
|
M 0 12 Q 20 10, 40 12 T 80 12 T 120 12 T 160 12;
|
||
|
|
M 0 12 Q 20 14, 40 12 T 80 12 T 120 12 T 160 12"
|
||
|
|
dur="2.4s"
|
||
|
|
repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Onda central (más sutil) -->
|
||
|
|
<path d="M 5 0 L 250 0"
|
||
|
|
stroke="url(#fadeGrad)"
|
||
|
|
stroke-width="1.5"
|
||
|
|
fill="none"
|
||
|
|
stroke-linecap="round"
|
||
|
|
opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,300;300,0;0,300" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
|
||
|
|
<!-- Partículas viajando horizontalmente -->
|
||
|
|
<circle cx="40" cy="-25" r="2.5" fill="#22d3ee" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cx" values="40;200;40" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="3.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="30" cy="-15" r="2" fill="#a855f7" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cx" values="30;180;30" dur="4s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="35" cy="18" r="2" fill="#ec4899" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cx" values="35;190;35" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="3.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="45" cy="28" r="2.5" fill="#22d3ee" filter="url(#strongGlow)">
|
||
|
|
<animate attributeName="cx" values="45;210;45" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;1;0" dur="4.2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="50" cy="-8" r="1.8" fill="#a855f7">
|
||
|
|
<animate attributeName="cx" values="50;170;50" dur="3.2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="3.2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<circle cx="55" cy="8" r="1.8" fill="#ec4899">
|
||
|
|
<animate attributeName="cx" values="55;175;55" dur="3.6s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.7;0" dur="3.6s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Nodos hexagonales viajando -->
|
||
|
|
<polygon points="60,0 63,-2 63,-5 60,-7 57,-5 57,-2"
|
||
|
|
stroke="#22d3ee"
|
||
|
|
fill="none"
|
||
|
|
stroke-width="1"
|
||
|
|
opacity="0.6">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(140,0);translate(0,0)" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.6;0" dur="4.5s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
|
||
|
|
<polygon points="70,22 73,20 73,17 70,15 67,17 67,20"
|
||
|
|
stroke="#ec4899"
|
||
|
|
fill="none"
|
||
|
|
stroke-width="1"
|
||
|
|
opacity="0.5">
|
||
|
|
<animate attributeName="transform" values="translate(0,0);translate(120,0);translate(0,0)" dur="5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0;0.5;0" dur="5s" repeatCount="indefinite"/>
|
||
|
|
</polygon>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Texto VAPORA -->
|
||
|
|
<g filter="url(#glass)">
|
||
|
|
<text x="320" y="135"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="58"
|
||
|
|
font-weight="800"
|
||
|
|
fill="url(#horizGrad)"
|
||
|
|
letter-spacing="3">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<text x="320" y="135"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="58"
|
||
|
|
font-weight="800"
|
||
|
|
fill="none"
|
||
|
|
stroke="rgba(255,255,255,0.2)"
|
||
|
|
stroke-width="0.5"
|
||
|
|
letter-spacing="3">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Glow en texto -->
|
||
|
|
<text x="320" y="135"
|
||
|
|
font-family="'JetBrains Mono', 'Fira Code', monospace"
|
||
|
|
font-size="58"
|
||
|
|
font-weight="800"
|
||
|
|
fill="url(#horizGrad)"
|
||
|
|
letter-spacing="3"
|
||
|
|
filter="url(#glow)"
|
||
|
|
opacity="0.25">
|
||
|
|
VAPORA
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Tagline -->
|
||
|
|
<text x="320" 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>
|
||
|
|
|
||
|
|
<!-- Indicador de flujo -->
|
||
|
|
<g opacity="0.4">
|
||
|
|
<text x="300" y="130"
|
||
|
|
font-family="'JetBrains Mono', monospace"
|
||
|
|
font-size="10"
|
||
|
|
fill="#22d3ee">
|
||
|
|
←
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
</svg>
|