chore: add image
This commit is contained in:
Jesús Pérez
parent
f9dbd54ca6
commit
46ea1b03a4
200
imgs/vapora.svg
Normal file
200
imgs/vapora.svg
Normal file
@ -0,0 +1,200 @@
|
||||
<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>
|
||||
|
||||
<!-- 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="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>
|
||||
|
||||
<!-- 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"/>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
After Width: | Height: | Size: 10 KiB |
Loading…
x
Reference in New Issue
Block a user