provisioning-outreach/presentations/rust-laspalmas-250926/designs/imgs/prov-syste-poster.html

2135 lines
89 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rust Las Palmas Septiembre 2025 - Provisioning</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;700;800;900&family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
background: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.poster {
width: 794px;
position: relative;
overflow: hidden;
background: #000;
}
.old-poster {
height: 1123px;
}
/* Fondo oceánico de Las Palmas con overlay tecnológico */
.ocean-tech-bg {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(0, 20, 40, 0.95) 0%,
rgba(0, 40, 80, 0.9) 30%,
rgba(206, 66, 43, 0.3) 60%,
rgba(15, 23, 42, 0.95) 100%
);
animation: waves 20s ease-in-out infinite;
}
@keyframes waves {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
/* Símbolo del infinito animado */
.infinity-container {
position: absolute;
top: 265px;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 300px;
z-index: 10;
opacity: 0.8;
}
.infinity-symbol {
width: 100%;
height: 100%;
position: relative;
}
.infinity-path {
stroke: url(#infinityGradient);
stroke-width: 8;
fill: none;
stroke-linecap: round;
filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.8));
animation: infinity-draw 8s linear infinite;
}
@keyframes infinity-draw {
0% {
stroke-dasharray: 0 1000;
}
50% {
stroke-dasharray: 1000 0;
}
100% {
stroke-dasharray: 0 1000;
}
}
.infinity-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.infinity-particle {
position: absolute;
width: 8px;
height: 8px;
background: radial-gradient(circle, #00ffb3, transparent);
border-radius: 50%;
animation: follow-infinity 4s linear infinite;
box-shadow: 0 0 15px rgba(0, 255, 179, 0.8);
}
.infinity-particle:nth-child(1) {
animation-delay: 0s;
}
.infinity-particle:nth-child(2) {
animation-delay: 0.5s;
}
.infinity-particle:nth-child(3) {
animation-delay: 1s;
}
.infinity-particle:nth-child(4) {
animation-delay: 1.5s;
}
.infinity-particle:nth-child(5) {
animation-delay: 2s;
}
.infinity-particle:nth-child(6) {
animation-delay: 2.5s;
}
@keyframes follow-infinity {
0% {
left: 50%;
top: 50%;
opacity: 0;
}
12.5% {
left: 40%;
top: 30%;
opacity: 1;
}
25% {
left: 30%;
top: 50%;
opacity: 1;
}
37.5% {
left: 40%;
top: 70%;
opacity: 1;
}
50% {
left: 50%;
top: 50%;
opacity: 1;
}
62.5% {
left: 60%;
top: 30%;
opacity: 1;
}
75% {
left: 70%;
top: 50%;
opacity: 1;
}
87.5% {
left: 60%;
top: 70%;
opacity: 1;
}
100% {
left: 50%;
top: 50%;
opacity: 0;
}
}
/* Cangrejo de Rust gigante emergiendo del océano digital */
.rust-crab-container {
position: absolute;
top: 120px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 400px;
filter: drop-shadow(0 20px 40px rgba(206, 66, 43, 0.5));
z-index: 5;
}
.digital-crab {
width: 100%;
height: 100%;
position: relative;
}
/* Cuerpo del cangrejo */
.crab-body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background: linear-gradient(
135deg,
#ce422b 0%,
#8b2f20 50%,
#ce422b 100%
);
border-radius: 50% 50% 40% 40%;
box-shadow:
inset 0 -20px 40px rgba(0, 0, 0, 0.3),
0 30px 60px rgba(206, 66, 43, 0.4);
}
/* Pinzas del cangrejo */
.claw {
position: absolute;
width: 120px;
height: 80px;
background: linear-gradient(135deg, #ce422b, #a0351f);
clip-path: polygon(
0 50%,
30% 0,
70% 20%,
100% 30%,
100% 70%,
70% 80%,
30% 100%
);
}
.claw-left {
top: 40%;
left: -60px;
transform: rotate(-30deg);
}
.claw-right {
top: 40%;
right: -60px;
transform: rotate(30deg) scaleX(-1);
}
/* Ojos del cangrejo */
.crab-eyes {
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 100px;
}
.eye {
width: 40px;
height: 40px;
background: radial-gradient(
circle,
#fff 30%,
#1a1a1a 35%,
#ce422b 40%
);
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
animation: blink 4s infinite;
}
@keyframes blink {
0%,
90%,
100% {
transform: scaleY(1);
}
95% {
transform: scaleY(0.1);
}
}
/* Circuitos digitales emanando del cangrejo */
.digital-circuits {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.circuit-line {
position: absolute;
background: linear-gradient(
90deg,
transparent,
#3b82f6,
transparent
);
height: 2px;
opacity: 0.4;
animation: circuit-flow 3s linear infinite;
}
.circuit-line:nth-child(1) {
top: 20%;
left: -100%;
right: -100%;
animation-delay: 0s;
}
.circuit-line:nth-child(2) {
top: 40%;
left: -100%;
right: -100%;
animation-delay: 1s;
}
.circuit-line:nth-child(3) {
top: 60%;
left: -100%;
right: -100%;
animation-delay: 2s;
}
@keyframes circuit-flow {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Islas flotantes de servidores */
.floating-servers {
position: absolute;
width: 100%;
height: 200px;
top: 150px;
z-index: 3;
}
.server-island {
position: absolute;
width: 80px;
height: 100px;
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
border: 2px solid #3b82f6;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
opacity: 0.8;
}
.server-island::before {
content: "";
position: absolute;
width: 60%;
height: 4px;
background: #10b981;
top: 20px;
left: 20%;
border-radius: 2px;
animation: server-blink 2s infinite;
}
@keyframes server-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
.server-1 {
top: 50px;
left: 10%;
animation: float-1 6s ease-in-out infinite;
}
.server-2 {
top: 120px;
right: 15%;
animation: float-2 8s ease-in-out infinite;
}
.server-3 {
top: 30px;
right: 30%;
animation: float-3 7s ease-in-out infinite;
}
@keyframes float-1 {
0%,
100% {
transform: translateY(0) rotate(2deg);
}
50% {
transform: translateY(-20px) rotate(-2deg);
}
}
@keyframes float-2 {
0%,
100% {
transform: translateY(0) rotate(-1deg);
}
50% {
transform: translateY(-15px) rotate(1deg);
}
}
@keyframes float-3 {
0%,
100% {
transform: translateY(0) rotate(1deg);
}
50% {
transform: translateY(-25px) rotate(-1deg);
}
}
/* Contenido del póster */
.content {
position: relative;
z-index: 10;
padding: 40px;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
text-align: center;
margin-bottom: 20px;
}
.event-location {
font-family: "Merienda", cursive;
font-size: 34px;
font-weight: 700;
letter-spacing: 3px;
color: #ce422b;
text-shadow: 0 0 20px rgba(206, 66, 43, 0.5);
margin-bottom: 10px;
}
.event-name {
font-size: 20px;
color: #3b82f6;
letter-spacing: 2px;
}
/* Espacio para el cangrejo */
.crab-space {
height: 135px;
}
.main-title {
text-align: center;
margin-bottom: 30px;
margin-top: 0px;
}
.title {
font-family: "Merienda", cursive;
font-size: 56px;
font-weight: 900;
letter-spacing: -1px;
margin-bottom: 15px;
background: linear-gradient(
135deg,
#00d4ff,
#1e40af,
#00ffb3,
#00d4ff
);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 4s ease infinite;
filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.5));
}
.title-prov {
font-family: "Merienda", cursive;
font-weight: 300;
letter-spacing: 8px;
font-size: 50px;
}
@keyframes gradient-shift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.subtitle {
font-family: "Merienda", cursive;
font-size: 17px;
color: #94a3b8;
margin-bottom: 10px;
font-weight: 400;
letter-spacing: 0px;
}
.tagline {
font-size: 16px;
color: #3b82f6;
font-style: italic;
}
.top-logo {
position: absolute;
top: 35px;
right: 35px;
width: 90px;
height: 90px;
z-index: 20;
}
.logo-hexagon {
width: 100%;
height: 100%;
position: relative;
animation: logo-rotate 15s linear infinite;
}
@keyframes logo-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.hex-shape {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #00d4ff, #7b2bff, #00ffb3);
clip-path: polygon(
30% 0%,
70% 0%,
100% 30%,
100% 70%,
70% 100%,
30% 100%,
0% 70%,
0% 30%
);
position: relative;
box-shadow:
0 0 40px rgba(0, 212, 255, 0.6),
inset 0 0 20px rgba(255, 255, 255, 0.2);
}
.hex-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 75%;
background: rgba(10, 10, 10, 0.95);
clip-path: polygon(
30% 0%,
70% 0%,
100% 30%,
100% 70%,
70% 100%,
30% 100%,
0% 70%,
0% 30%
);
}
.hex-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Merienda", cursive;
font-size: 48px;
font-weight: 700;
color: #00ffb3;
text-shadow:
0 0 20px rgba(0, 255, 179, 0.9),
0 0 40px rgba(0, 255, 179, 0.5);
}
/* Anillo de energía alrededor del hexágono */
.energy-ring {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid transparent;
border-radius: 50%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(0, 255, 179, 0.3) 50%,
transparent 70%
);
animation: ring-pulse 3s linear infinite;
}
@keyframes ring-pulse {
0% {
transform: rotate(0deg) scale(1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotate(360deg) scale(1.2);
opacity: 0;
}
}
/* Grid de características */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin-bottom: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.feature-item {
text-align: center;
padding: 15px;
background: rgba(206, 66, 43, 0.1);
border-radius: 8px;
border: 1px solid rgba(206, 66, 43, 0.3);
}
.feature-emoji {
font-size: 32px;
margin-bottom: 5px;
}
.feature-text {
font-size: 12px;
color: #cbd5e1;
font-weight: 600;
}
/* Terminal holográfico */
.holographic-terminal {
background: rgba(0, 0, 0, 0.8);
border: 2px solid transparent;
background-image:
linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
linear-gradient(135deg, #00d4ff, #7b2bff, #00ffb3);
background-origin: border-box;
background-clip: padding-box, border-box;
border-radius: 8px;
padding: 20px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.holographic-terminal::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(59, 130, 246, 0.1) 50%,
transparent 70%
);
animation: hologram 4s linear infinite;
}
@keyframes hologram {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.terminal-text {
font-family: "JetBrains Mono", monospace;
font-size: 14px;
color: #10b981;
position: relative;
z-index: 1;
}
/* Speaker info */
.speaker-section {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: rgba(206, 66, 43, 0.1);
border-radius: 12px;
border: 2px solid rgba(206, 66, 43, 0.3);
}
.speaker-name {
font-size: 24px;
font-weight: 700;
color: #ce422b;
margin-bottom: 5px;
}
.speaker-title {
font-size: 14px;
color: #cbd5e1;
}
/* Footer */
.footer {
margin-top: auto;
text-align: center;
padding: 20px;
background: linear-gradient(
135deg,
rgba(206, 66, 43, 0.2),
rgba(59, 130, 246, 0.2)
);
border-radius: 12px;
}
.contact-row {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 15px;
font-size: 14px;
color: #cbd5e1;
}
.register-cta {
font-size: 18px;
font-weight: 700;
color: #fff;
text-transform: none;
letter-spacing: 2px;
padding: 15px 30px;
margin: 15px;
background: linear-gradient(135deg, #ce422b, #f97316);
border-radius: 30px;
display: inline-block;
box-shadow: 0 10px 30px rgba(206, 66, 43, 0.4);
animation: pulse-cta 2s infinite;
}
@keyframes pulse-cta {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Partículas de datos */
.data-particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #3b82f6;
border-radius: 50%;
opacity: 0;
animation: particle-rise 8s linear infinite;
}
.particle:nth-child(1) {
left: 10%;
animation-delay: 0s;
}
.particle:nth-child(2) {
left: 30%;
animation-delay: 2s;
}
.particle:nth-child(3) {
left: 50%;
animation-delay: 4s;
}
.particle:nth-child(4) {
left: 70%;
animation-delay: 6s;
}
.particle:nth-child(5) {
left: 90%;
animation-delay: 8s;
}
@keyframes particle-rise {
0% {
bottom: -10px;
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
bottom: 100%;
opacity: 0;
}
}
.event-content {
font-family: "Inter", sans-serif;
display: flex;
z-index: 20;
gap: 15px;
color: white;
}
.event-details {
display: flex;
font-size: 16px;
flex-direction: column;
color: white;
margin-top: 15px;
min-width: 150px;
}
.event-details span {
margin-left: 15px;
}
#event-rust-las-palmas {
border-top: 1px solid gray;
font-family: "Inter", sans-serif;
width: 300px;
margin: 0px auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
z-index: 20;
font-size: 16px;
color: white;
text-align: center;
padding: 10px 40px;
font-weight: bold;
gap: 15px;
}
.event-rust-las-palmas span {
margin-left: 15px;
}
.event-info {
font-size: 16px;
color: white;
text-align: center;
padding: 20px 20px;
font-weight: bold;
}
.event-info span {
margin-left: 8px;
}
.event-date {
font-size: 16px;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.event-time {
font-size: 16px;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.event-location {
font-size: 14px;
line-height: 1.3;
}
.event-location p {
margin-top: 15px;
}
.event-location .white {
background: white;
padding: 2px;
border-radius: 50%;
}
.event-type a p {
margin-top: 11px;
}
.event-type a,
.event-location a {
color: white;
font-weight: normal;
font-family: "Inter", sans-serif;
text-decoration: none;
font-size: 14px;
letter-spacing: 0.5px;
}
.event-cta-container {
display: flex;
font-size: 16px;
flex-direction: column;
color: white;
}
.event-cta-container .event-warning {
margin-top: 20px;
}
.event-cta {
display: inline-block;
padding: 5px 10px;
background: linear-gradient(90deg, #00d4ff 0%, #00ff88 100%);
color: #0a0a0a;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
font-size: 15px;
transition: all 0.3s ease;
margin-bottom: 2px;
}
.event-content .event-type {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-right: 20px;
border-right: 1px solid gray;
}
.event-container {
margin: 11px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.location-header,
.event-type {
font-size: 13px;
margin: 12px 5px;
opacity: 0.9;
letter-spacing: 1px;
}
.provisioning-logo {
text-align: center;
margin-bottom: 15px;
}
#med-logo {
width: 220px;
}
#event-rust-las-palmas .rust-laspalmas-logo-black {
margin-bottom: 15px;
}
.event-register {
font-size: 15px;
marging-top: 2px;
}
.event-warning {
font-size: 13px;
margin: 15px;
opacity: 0.9;
}
</style>
</head>
<body>
<div class="poster">
<!-- Fondo oceánico/tecnológico -->
<div class="ocean-tech-bg"></div>
<!-- Partículas de datos ascendentes -->
<div class="data-particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<!-- Símbolo del infinito detrás del cangrejo -->
<div class="infinity-container">
<svg
class="infinity-symbol"
viewBox="0 0 600 300"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="infinityGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #00d4ff; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF"
dur="4s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="50%"
style="stop-color: #7b2bff; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF"
dur="4s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="100%"
style="stop-color: #00ffb3; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3"
dur="4s"
repeatCount="indefinite"
/>
</stop>
</linearGradient>
</defs>
<path
class="infinity-path"
d="M 300 150 C 240 90, 180 90, 180 150 C 180 210, 240 210, 300 150 C 360 90, 420 90, 420 150 C 420 210, 360 210, 300 150"
/>
</svg>
<div class="infinity-particles">
<div class="infinity-particle"></div>
<div class="infinity-particle"></div>
<div class="infinity-particle"></div>
<div class="infinity-particle"></div>
<div class="infinity-particle"></div>
<div class="infinity-particle"></div>
</div>
</div>
<!-- Servidores flotantes -->
<div class="floating-servers">
<div class="server-island server-1"></div>
<div class="server-island server-2"></div>
<div class="server-island server-3"></div>
</div>
<!-- Cangrejo de Rust gigante -->
<div class="rust-crab-container">
<div class="digital-crab">
<div class="crab-body"></div>
<div class="claw claw-left"></div>
<div class="claw claw-right"></div>
<div class="crab-eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>
<div class="digital-circuits">
<div class="circuit-line"></div>
<div class="circuit-line"></div>
<div class="circuit-line"></div>
</div>
</div>
<!-- Contenido -->
<div class="content">
<!-- Logo de Provisioning - Hexágono con infinito -->
<div class="top-logo">
<a href="https://provisioning.systems" target="_blank">
<div class="energy-ring"></div>
<div class="logo-hexagon">
<div class="hex-shape"></div>
<div class="hex-inner"></div>
<div class="hex-text"></div>
</div>
</a>
</div>
<div class="header">
<div class="event-content">
<div class="event-type">
<a
href="https://rust-laspalmais.dev"
target="_blank"
>
<img
class="rust-laspalmas-logo-black"
src="https://rust-laspalmas.dev/images/logos/rust-laspalmas-dark.svg"
width="120"
/>
<p>Rust Las Palmas</p>
</a>
</div>
<div class="event-details">
<div class="event-date">
📅<span>26 Sept. 2025</span>
</div>
<div class="event-time">
🕐<span>18:30 horas</span>
</div>
<div class="event-location">
<span class="white">📍</span>
<span
><a href="#event-rust-las-palmas">
click para ver</a
></span
>
</div>
</div>
<div class="event-cta-container">
<div class="event-warning">Plazas limitadas</div>
<div class="event-register">
<a
class="event-cta"
href="mailto:info@rust-laspalmas.dev?subject=INSCRIPCION%3A%20Evento%20con%20Rust%20LasPalmas.%20Septiembre%202025"
>Inscribirse</a
>
</div>
</div>
</div>
</div>
<div class="crab-space"></div>
<div class="main-title">
<h1 class="title">
Provisioning<br /><span class="title-prov"></span>
</h1>
<p class="subtitle">
Automatización de Infraestructura con Rust
</p>
<p class="tagline">"Navegando en el bucle infinito"</p>
</div>
<div class="features-grid">
<div class="feature-item">
<div class="feature-emoji">🌊</div>
<div class="feature-text">Universal Deploy</div>
</div>
<div class="feature-item">
<div class="feature-emoji"></div>
<div class="feature-text">10x Performance</div>
</div>
<div class="feature-item">
<div class="feature-emoji">🦀</div>
<div class="feature-text">Memory Safe</div>
</div>
<div class="feature-item">
<div class="feature-emoji">🤖</div>
<div class="feature-text">AI Powered</div>
</div>
</div>
<div class="holographic-terminal">
<div class="terminal-text">
$ provisioning --target all --deploy<br />
🦀 Orquestando infraestructura a través del bucle
infinito ...<br />
✓ On-prem | ✓ Bare metal | ✓ Cloud | ✓ Edge | ✓ IoT
</div>
</div>
<div class="speaker-section">
<div class="speaker-name">Jesús Pérez Lorenzo</div>
<div class="speaker-title">
Senior Rust Developer & Provisioning Architect
</div>
<div
class="speaker-title"
style="margin-top: 5px; color: #ce422b"
>
Organizador Rust Las Palmas
</div>
</div>
<div class="provisioning-logo">
<a href="https://provisioning.systems" target="_blank">
<svg id="med-logo" fill="currentColor">
<use href="#logo-black"></use>
</svg>
<svg id="med-text-logo" fill="currentColor">
<use href="#logo-text-black"></use>
</svg>
</a>
</div>
<div class="footer">
<div class="contact-row">
<span>🐦 @jesusperezdev</span>
<span>📧 jesus@provisioning.dev</span>
<span>🌐 provisioning.systems</span>
</div>
<div class="register-cta">Únete a la Rust-evolución</div>
</div>
<div class="event-container">
<div class="main-title">
<h1 class="title">
Provisioning<br /><span class="title-prov"></span>
</h1>
<p class="subtitle">
Automatización de Infraestructura con Rust
</p>
<p class="tagline">"Navegando en el bucle infinito"</p>
</div>
<div id="event-rust-las-palmas">
<div class="event-type">
<a
href="https://rust-laspalmais.dev"
target="_blank"
>
<img
class="rust-laspalmas-logo-black"
src="https://rust-laspalmas.dev/images/logos/rust-laspalmas-dark.svg"
width="120"
/>
<p>Rust Las Palmas</p>
</a>
</div>
<div class="event-details">
<div class="event-date">
📅<span>26 Sept. 2025</span>
</div>
<div class="event-time">
🕐<span>18:30 horas</span>
</div>
</div>
<div class="event-cta-container">
<div class="event-warning">Plazas limitadas</div>
<div class="event-register">
<a
class="event-cta"
href="mailto:info@rust-laspalmas.dev?subject=INSCRIPCION%3A%20Evento%20con%20Rust%20LasPalmas.%20Septiembre%202025"
>Inscribirse</a
>
</div>
</div>
</div>
<div class="event-location">
<span class="white">📍</span>
<a
href="https://nautilus-cyberneering.de/"
target="_blank"
class="location-header"
>
Nautilus
</a>
<p>
<a
href="https://maps.app.goo.gl/ecUfxkpjKJPr6wuLA"
target="_blank"
>
C. Fernando Guanarteme 14<br />
Santa Brígida Las Palmas
<br />(entrada por arriba,<br />por la cancela)
</a>
</p>
</div>
</div>
</div>
</div>
<svg style="display: none" xmlns="http://www.w3.org/2000/svg">
<symbol id="logo-black" viewBox="0 0 359.49 221.13">
<defs>
<clipPath id="d">
<path
d="M226.79,113.62c0,19.36,15.85,35.06,35.4,35.06,19.55,0,35.4-15.7,35.4-35.06,0-19.36-15.85-35.06-35.4-35.06h0c-42.68,0-35.4,15.7-35.4,35.06"
style="fill: none"
/>
</clipPath>
<!-- Animated gradient for connecting elements -->
<linearGradient
id="infinityGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #00d4ff; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF"
dur="4s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="50%"
style="stop-color: #7b2bff; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF"
dur="4s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="100%"
style="stop-color: #00ffb3; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#00FFB3;#00D4FF;#7B2BFF;#00FFB3"
dur="4s"
repeatCount="indefinite"
/>
</stop>
</linearGradient>
</defs>
<g id="c">
<g>
<!-- Left wheel - only outer shape rotates -->
<g>
<path
d="M3.04,87.53c-3.66,16.4-3.36,33.43,.85,49.7l18.49-.31c2.12,7.08,5.09,13.89,8.85,20.26l-12.81,13.12c9.22,14.08,21.56,25.9,36.09,34.55l12.81-13.13c6.56,3.51,13.52,6.22,20.74,8.08l.31,18.3c16.56,3.62,33.75,3.33,50.18-.85l-.31-18.3c7.15-2.1,14.02-5.04,20.46-8.77l13.25,12.69c14.22-9.14,26.14-21.36,34.87-35.75l-13.25-12.68c3.54-6.5,6.28-13.4,8.15-20.55l18.49-.31c3.65-16.4,3.36-33.43-.85-49.7l-18.49,.31c-2.12-7.08-5.09-13.88-8.85-20.26l12.8-13.12c-9.22-14.08-21.56-25.9-36.08-34.55l-12.81,13.13c-6.56-3.51-13.53-6.23-20.75-8.08l-.31-18.3c-16.56-3.62-33.75-3.33-50.18,.85l.31,18.3c-7.15,2.1-14.01,5.04-20.45,8.77l-13.25-12.69c-14.22,9.14-26.15,21.36-34.88,35.75l13.25,12.68c-3.54,6.5-6.28,13.4-8.15,20.55l-18.49,.31Z"
style="
fill: #4cc2f1;
fill-rule: evenodd;
stroke: #fff;
stroke-miterlimit: 10;
"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 115.86 113.25;360 115.86 113.25"
dur="8s"
repeatCount="indefinite"
/>
</path>
</g>
<!-- Right wheel - only outer shape rotates -->
<g>
<path
d="M167.28,92.87c-3.19,14.31-2.94,29.17,.74,43.37l16.13-.27c1.85,6.18,4.44,12.12,7.72,17.68l-11.18,11.45c8.05,12.29,18.82,22.6,31.49,30.15l11.18-11.46c5.72,3.06,11.8,5.43,18.1,7.05l.27,15.97c14.45,3.16,29.45,2.91,43.78-.74l-.27-15.97c6.24-1.83,12.23-4.4,17.85-7.66l11.56,11.08c12.41-7.97,22.81-18.64,30.43-31.19l-11.56-11.06c3.09-5.67,5.48-11.69,7.11-17.93l16.13-.27c3.18-14.31,2.93-29.17-.74-43.37l-16.13,.27c-1.85-6.18-4.44-12.11-7.72-17.68l11.17-11.44c-8.04-12.29-18.81-22.6-31.48-30.15l-11.18,11.46c-5.72-3.07-11.8-5.43-18.1-7.05l-.27-15.97c-14.45-3.16-29.45-2.91-43.78,.74l.27,15.97c-6.24,1.83-12.23,4.4-17.84,7.66l-11.56-11.08c-12.41,7.97-22.81,18.64-30.44,31.19l11.56,11.06c-3.09,5.67-5.48,11.69-7.11,17.93l-16.13,.27Z"
style="
fill: #4cc2f1;
fill-rule: evenodd;
stroke: #fff;
stroke-miterlimit: 10;
"
>
<animateTransform
attributeName="transform"
type="rotate"
values="0 261.91 113.28;-360 261.91 113.28"
dur="6s"
repeatCount="indefinite"
/>
</path>
</g>
<!-- Left wheel center -->
<path
d="M115.86,78.19c19.55,0,35.4,15.7,35.4,35.06s-15.85,35.06-35.4,35.06-35.4-15.7-35.4-35.06,15.85-35.06,35.4-35.06"
style="fill: #f2b03f"
/>
<ellipse
cx="116.42"
cy="115.68"
rx="20.17"
ry="20.15"
style="
fill: none;
stroke: #4159a4;
stroke-miterlimit: 10;
stroke-width: 1.58px;
"
/>
<path
d="M116.42,107.88c4.35-.04,7.91,3.43,7.95,7.73,.04,4.31-3.46,7.83-7.81,7.87-4.35,.04-7.91-3.43-7.95-7.73,0-.02,0-.05,0-.07-.02-4.29,3.48-7.78,7.81-7.8"
style="fill: #fff"
/>
<path
d="M116.42,100.38c.2,0,.37,.16,.37,.36s-.16,.37-.37,.37c-.2,0-.37-.16-.37-.36,0,0,0,0,0,0,0-.2,.16-.36,.37-.37h0Zm1.38-4.53v-4.06h1.55c.82,.02,1.49-.63,1.51-1.43,.02-.81-.63-1.48-1.45-1.49-.02,0-.04,0-.06,0h-6.1c-.82-.02-1.49,.63-1.51,1.43-.02,.81,.63,1.48,1.45,1.49,.02,0,.04,0,.06,0h1.79v4.06m.14,18.68l6.92-9.15c.08-.11,.23-.13,.34-.05,.09,.07,.12,.19,.08,.29l-4.47,10.56c-.35,.84-1.32,1.23-2.16,.89-.07-.03-.14-.06-.2-.1-.8-.47-1.07-1.49-.6-2.28,.03-.05,.07-.11,.11-.16h0Zm-8.08-16.69l-1.86-3.97m2.09-.71l-3.98,1.86"
style="
fill: none;
stroke: #4159a4;
stroke-miterlimit: 10;
stroke-width: 1.58px;
"
/>
<!-- Green dot with smooth pulse -->
<path
d="M86.86,91.68c0-1.42,1.17-2.57,2.6-2.56,1.43,0,2.59,1.16,2.59,2.58,0,1.42-1.17,2.57-2.6,2.56-1.43,0-2.58-1.15-2.59-2.56v-.02Z"
style="fill: #50a89c"
>
<animateTransform
attributeName="transform"
type="scale"
values="1;1.3;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
<!-- Connection elements forming infinity symbol - AGILE ANIMATION -->
<!-- Top left part of infinity -->
<path
d="M225.8,83.92c1.22-1.35,2.46-2.66,3.75-3.94,16.69-16.54,43.22-18.12,61.79-3.68l17.46-2.65,2.57-16.63c-29.5-25.42-73.83-23.89-101.47,3.5-1.24,1.23-2.45,2.49-3.63,3.77l16.89,2.56,2.64,17.07Z"
style="stroke: #fff; stroke-miterlimit: 10"
>
<animate
attributeName="fill"
values="#5e74b7;#00D4FF;#7B2BFF;#00FFB3;#5e74b7"
dur="2s"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
values="1;3;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
<!-- Bottom left part of infinity -->
<path
d="M78.59,141.18c-14.54-18.4-12.95-44.65,3.71-61.2,1.33-1.31,2.73-2.54,4.2-3.68l-17.46-2.65-2.57-16.63c-1.3,1.13-2.58,2.28-3.82,3.5-27.79,27.53-28.96,71.57-3.53,100.51l16.79-2.55,2.67-17.3Z"
style="stroke: #fff; stroke-miterlimit: 10"
>
<animate
attributeName="fill"
values="#5e74b7;#7B2BFF;#00FFB3;#00D4FF;#5e74b7"
dur="2s"
begin="0.5s"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
values="1;3;1"
dur="2s"
begin="0.5s"
repeatCount="indefinite"
/>
</path>
<!-- Top right part of infinity -->
<path
d="M86.5,76.3c18.57-14.44,45.1-12.86,61.79,3.68,1.29,1.27,2.53,2.6,3.75,3.94l2.64-17.07,16.89-2.56c-1.18-1.28-2.39-2.54-3.63-3.77-27.64-27.39-71.97-28.92-101.48-3.5l2.57,16.63,17.46,2.65Z"
style="stroke: #fff; stroke-miterlimit: 10"
>
<animate
attributeName="fill"
values="#8d9ccf;#00FFB3;#00D4FF;#7B2BFF;#8d9ccf"
dur="2s"
begin="1s"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
values="1;3;1"
dur="2s"
begin="1s"
repeatCount="indefinite"
/>
</path>
<!-- Bottom right part of infinity -->
<path
d="M299.26,141.18c-15.88,20.08-45.19,23.61-65.46,7.88l-.04-.03-17.46,2.65-2.57,16.63c29.5,25.42,73.83,23.89,101.47-3.5,1.24-1.22,2.4-2.49,3.53-3.78l-16.79-2.55-2.68-17.3Z"
style="stroke: #fff; stroke-miterlimit: 10"
>
<animate
attributeName="fill"
values="#8d9ccf;#7B2BFF;#00D4FF;#00FFB3;#8d9ccf"
dur="2s"
begin="1.5s"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
values="1;3;1"
dur="2s"
begin="1.5s"
repeatCount="indefinite"
/>
</path>
<!-- Additional elements -->
<path
d="M315.19,60.52c-1.23-1.22-2.51-2.38-3.82-3.5l-2.57,16.63-17.46,2.65c1.47,1.14,2.88,2.37,4.2,3.68,16.66,16.55,18.25,42.8,3.71,61.2l2.68,17.3,16.79,2.55c25.42-28.93,24.26-72.98-3.53-100.5m-171.1,88.5c-20.2,15.76-49.48,12.31-65.39-7.7-.04-.05-.08-.1-.12-.15l-2.68,17.3-16.79,2.55c1.13,1.29,2.3,2.56,3.53,3.78,27.64,27.39,71.97,28.92,101.47,3.5l-2.57-16.63-17.46-2.65Z"
style="
fill: #455aa5;
stroke: #fff;
stroke-miterlimit: 10;
"
/>
<path
d="M204.38,103.42c1.09,1.79,2.17,3.56,3.25,5.32,5.65-8.96,11.44-17.4,18.17-24.81l-2.64-17.07-16.89-2.56c-5.38,5.87-10.34,12.11-14.83,18.68,4.58,6.77,8.8,13.66,12.94,20.45m-30.92,18.5c-1.09-1.79-2.18-3.56-3.25-5.32-6.68,10.59-13.53,20.44-21.92,28.75-1.33,1.31-2.73,2.54-4.21,3.68l17.46,2.65,2.57,16.63c1.3-1.12,2.58-2.28,3.82-3.5,6.84-6.9,13.02-14.41,18.46-22.43-4.57-6.76-8.78-13.66-12.93-20.46"
style="
fill: #8d9ccf;
stroke: #fff;
stroke-miterlimit: 10;
"
/>
<!-- Central flow representing infinity -->
<path
d="M171.57,64.29c11.77,12.66,20.64,27.17,29.24,41.26,9,14.74,17.5,28.67,28.74,39.8,1.33,1.31,2.73,2.54,4.21,3.68l-17.46,2.65-2.57,16.63c-1.3-1.12-2.58-2.27-3.82-3.5-13.63-13.5-23.41-29.52-32.87-45.02-7.97-13.05-15.55-25.46-24.99-35.86l2.64-17.07,16.89-2.56Z"
style="stroke: #fff; stroke-miterlimit: 10"
>
<animate
attributeName="fill"
values="#5e74b7;url(#infinityGradient);#00D4FF;url(#infinityGradient);#5e74b7"
dur="3s"
repeatCount="indefinite"
/>
<animate
attributeName="stroke-width"
values="1;4;1"
dur="3s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="3s"
repeatCount="indefinite"
/>
</path>
<!-- Chronometer/clock with CSS pulse animation -->
<g>
<ellipse
cx="261.91"
cy="113.28"
rx="35.65"
ry="35.31"
style="fill: #f9b224"
>
<!-- CSS-style pulse animation: scale + opacity -->
<animateTransform
attributeName="transform"
type="scale"
values="1;1.05;1"
dur="2s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="1;0.75;1"
dur="2s"
repeatCount="indefinite"
/>
</ellipse>
<!-- Chronometer display -->
<g style="clip-path: url(#d)">
<g>
<path
d="M329.9,88.02v57.19c0,1.92-1.57,3.47-3.51,3.47h-89.87c-1.94,0-3.51-1.55-3.51-3.47v-57.19c0-1.92,1.57-3.47,3.51-3.47h89.87c1.94,0,3.51,1.55,3.51,3.47"
style="fill: #5e74b7"
/>
<path
d="M236.69,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0"
style="fill: #dba0a6"
/>
<path
d="M238.63,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0"
style="fill: #f5cc56"
/>
<path
d="M240.56,87.19c.3,0,.55,.24,.55,.54s-.25,.54-.55,.54-.55-.24-.55-.54,.25-.54,.55-.54h0"
style="fill: #263682"
/>
<path
d="M237.73,89.86h87.43c.92,0,1.66,.74,1.66,1.64s-.74,1.64-1.66,1.64h-87.43c-.92,0-1.66-.74-1.66-1.64s.74-1.64,1.66-1.64m-1.16,9.24h22.25v45.29h-22.25v-45.29Zm23.91,0h64.88v45.29h-64.88v-45.29Z"
style="fill: #f3f4f5"
/>
<!-- Animated chart -->
<path
d="M265.45,108.82v13.02h53.62v-9.61s-3.47,2.93-5.61,2.93c-3.49,0-5.5-2.32-7.99-2.27-3.52,.07-4.32,2.03-7.04,2.27-3.57,.31-4.73-4.21-9.35-4.47-4.62-.27-6.46,4.96-10.78,4.65-3.26-.23-6.17-5.71-8.31-6.51-1.48-.45-3.06-.45-4.53,0"
style="fill: #f2ac41"
>
<!-- Real-time data animation -->
<animateTransform
attributeName="transform"
type="scale"
values="1,1;1.02,1.1;1,1"
dur="2s"
repeatCount="indefinite"
/>
</path>
<path
d="M239.78,102.82h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Zm0,7.89h4.96v4.93h-4.96v-4.93Z"
style="fill: #8d9ccf"
/>
<path
d="M284.39,127.69h16.01v11.29h-16.01v-11.29Zm-18.94,0h16.01v11.29h-16.01v-11.29Zm37.61,0h16.01v11.29h-16.01v-11.29Zm-56.48-22.8h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.7h9.27v1.08h-9.27v-1.08Zm0,7.89h9.27v1.08h-9.27v-1.08Zm0,7.79h9.27v1.08h-9.27v-1.08Z"
style="fill: #d1d9e0"
/>
</g>
</g>
<!-- Green indicator with CSS pulse animation -->
<ellipse
cx="287.99"
cy="132.27"
rx="11.69"
ry="11.58"
style="fill: #05ab9e"
>
<animateTransform
attributeName="transform"
type="scale"
values="1;1.05;1"
dur="2s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="1;0.8;1"
dur="2s"
repeatCount="indefinite"
/>
</ellipse>
<!-- Animated check mark -->
<path
d="M281.89,131.18l4.78,4.73,8.02-7.94"
style="
fill: none;
stroke: #fff;
stroke-width: 4px;
"
>
<animate
attributeName="stroke-dasharray"
values="0 20;20 20"
dur="1s"
repeatCount="indefinite"
/>
</path>
</g>
</g>
</g>
</symbol>
<symbol id="logo-text-black" viewBox="0 0 607.69 116.06">
<defs>
<!-- Animated gradient for text glow effect -->
<linearGradient
id="textGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #4cc2f1; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#4cc2f1;#f2b03f;#4cc2f1"
dur="3s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="50%"
style="stop-color: #f2b03f; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#f2b03f;#4cc2f1;#f2b03f"
dur="3s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="100%"
style="stop-color: #4cc2f1; stop-opacity: 1"
>
<animate
attributeName="stop-color"
values="#4cc2f1;#f2b03f;#4cc2f1"
dur="3s"
repeatCount="indefinite"
/>
</stop>
</linearGradient>
<!-- Animated gradient for floating particles -->
<linearGradient
id="particleGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color: #00d4ff; stop-opacity: 0.8"
>
<animate
attributeName="stop-color"
values="#00D4FF;#7B2BFF;#00FFB3;#00D4FF"
dur="2s"
repeatCount="indefinite"
/>
</stop>
<stop
offset="100%"
style="stop-color: #7b2bff; stop-opacity: 0.8"
>
<animate
attributeName="stop-color"
values="#7B2BFF;#00FFB3;#00D4FF;#7B2BFF"
dur="2s"
repeatCount="indefinite"
/>
</stop>
</linearGradient>
</defs>
<g id="c">
<!-- Animated floating particles background -->
<g>
<!-- Floating particles with gentle movement -->
<circle
cx="50"
cy="30"
r="2"
style="fill: url(#particleGradient)"
>
<animateTransform
attributeName="transform"
type="translate"
values="0,0;10,5;0,0"
dur="4s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.3;0.8;0.3"
dur="4s"
repeatCount="indefinite"
/>
</circle>
<circle
cx="150"
cy="20"
r="1.5"
style="fill: url(#particleGradient)"
>
<animateTransform
attributeName="transform"
type="translate"
values="0,0;-8,7;0,0"
dur="5s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.2;0.7;0.2"
dur="5s"
repeatCount="indefinite"
/>
</circle>
<circle
cx="250"
cy="25"
r="2.5"
style="fill: url(#particleGradient)"
>
<animateTransform
attributeName="transform"
type="translate"
values="0,0;12,-6;0,0"
dur="3.5s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.4;0.9;0.4"
dur="3.5s"
repeatCount="indefinite"
/>
</circle>
<circle
cx="350"
cy="15"
r="1.8"
style="fill: url(#particleGradient)"
>
<animateTransform
attributeName="transform"
type="translate"
values="0,0;-6,8;0,0"
dur="4.5s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.3;0.6;0.3"
dur="4.5s"
repeatCount="indefinite"
/>
</circle>
<circle
cx="450"
cy="35"
r="2.2"
style="fill: url(#particleGradient)"
>
<animateTransform
attributeName="transform"
type="translate"
values="0,0;9,-4;0,0"
dur="3.8s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.5;0.8;0.5"
dur="3.8s"
repeatCount="indefinite"
/>
</circle>
<circle
cx="550"
cy="28"
r="1.6"
style="fill: url(#particleGradient)"
>
<animateTransform
attributeName="transform"
type="translate"
values="0,0;-7,9;0,0"
dur="4.2s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.2;0.7;0.2"
dur="4.2s"
repeatCount="indefinite"
/>
</circle>
</g>
<!-- Animated "provisioning" text -->
<g>
<!-- Letter "p" -->
<path
d="M6.89,82.3c-1.67-1.33-2.5-3.57-2.5-6.7s1.12-12.62,3.35-28.45c2.23-15.83,3.35-27.13,3.35-33.9s-.47-11.18-1.4-13.25c6.8,.53,11.27,3.2,13.4,8,5.13-2.8,10.78-4.2,16.95-4.2s11.03,1.92,14.6,5.75c3.57,3.83,5.35,8.55,5.35,14.15,0,6.93-2.54,13.2-7.6,18.8-2.47,2.67-5.65,4.83-9.55,6.5-3.9,1.67-8.22,2.5-12.95,2.5-2,0-3.9-.13-5.7-.4l-.3-4.2h.8c7.53,0,13.53-2.8,18-8.4,3.07-4,4.6-8.2,4.6-12.6,0-6.47-2.63-10.73-7.9-12.8-4.47-1.67-9.47-1.33-15,1v.2c0,2.53-.95,10.82-2.85,24.85-1.9,14.03-2.85,25.75-2.85,35.15,0,4.2,.2,7.47,.6,9.8-2.13,.13-3.53,.2-4.2,.2-3.8,0-6.53-.67-8.2-2Z"
style="fill: url(#textGradient)"
>
<!-- Pulse animation -->
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "r" -->
<path
d="M80.19,50.1c2.4-8.67,5.28-15.05,8.65-19.15c3.37-4.1,6.5-6.15,9.4-6.15s5.08,1.08,6.55,3.25c1.47,2.17,2.2,4.97,2.2,8.4s-1.02,6.58-3.05,9.45c-2.03,2.87-4.82,4.3-8.35,4.3-.93,0-2.04-.27-3.3-.8,2.07-2.6,3.1-5.73,3.1-9.4,0-2.13-.87-3.2-2.6-3.2-1.27,0-2.63,.88-4.1,2.65-1.47,1.77-2.87,4.2-4.2,7.3-1.33,3.1-2.45,7.07-3.35,11.9-.9,4.83-1.35,9.98-1.35,15.45,0,.67,.17,3.5,.5,8.5-2.13,.13-3.5,.2-4.1,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.13,2.9,9.9s-.3,7.38-.9,10.85Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="0.2s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "o" -->
<path
d="M132.39,23.5c.73,0,1.42,.22,2.05,.65,.63,.43,.95,.88,.95,1.35-6.73,4.67-10.77,11.17-12.1,19.5,1.4-3.73,3.12-6.97,5.15-9.7,2.03-2.73,4.15-4.8,6.35-6.2,4.2-2.6,8.3-3.9,12.3-3.9s7.4,1.97,10.2,5.9c2.8,3.93,4.2,9.2,4.2,15.8,0,7.4-1.5,14.2-4.5,20.4-3.33,7-8.07,11.83-14.2,14.5-3.47,1.53-7.27,2.3-11.4,2.3-5.8,0-10.85-2.25-15.15-6.75s-6.45-10.97-6.45-19.4,2.07-15.87,6.2-22.3c4.13-6.43,9.6-10.48,16.4-12.15Zm8.5,9c-4.33,0-8.2,2.92-11.6,8.75-3.4,5.83-5.1,11.65-5.1,17.45,0,12.13,3.13,18.2,9.4,18.2,4.47,0,8.1-2.92,10.9-8.75,2.8-5.83,4.2-12.38,4.2-19.65,0-10.67-2.6-16-7.8-16Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="0.4s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "v" -->
<path
d="M193.09,82.6c-2.13,.93-4.37,1.4-6.7,1.4s-3.63-.5-3.9-1.5c-1.07-4.27-2.3-10.65-3.7-19.15s-2.82-15.93-4.25-22.3c-1.43-6.37-3.15-11.18-5.15-14.45,3.67-1.73,6.6-2.6,8.8-2.6s3.87,.5,5,1.5c1.13,1,2.08,2.98,2.85,5.95,.77,2.97,1.32,5.42,1.65,7.35,.93,6.4,1.4,9.97,1.4,10.7s.27,3.72,.8,8.95c.53,5.23,.93,8.68,1.2,10.35,11.87-23,17.8-38.37,17.8-46.1,5.47,2.8,8.2,5.83,8.2,9.1,0,2.67-1.38,6.62-4.15,11.85-2.77,5.23-6.23,11.57-10.4,19-4.17,7.43-7.32,14.08-9.45,19.95Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="0.6s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "i" -->
<path
d="M241.34,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05s-2.7-6.65-2.7-11.85c0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="0.8s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "s" -->
<path
d="M278.59,30.8c-1.87,0-3.53,.62-5,1.85-1.47,1.23-2.2,2.98-2.2,5.25s.78,4.4,2.35,6.4c1.57,2,3.48,3.75,5.75,5.25,2.27,1.5,4.55,3.03,6.85,4.6,2.3,1.57,4.32,3.5,6.05,5.8,1.73,2.3,2.7,4.85,2.9,7.65,0,4.8-2.07,8.83-6.2,12.1-4.13,3.27-9.27,4.9-15.4,4.9s-10.95-1.23-14.45-3.7-5.25-5.3-5.25-8.5,.98-5.78,2.95-7.75,4.42-2.95,7.35-2.95c1.53,0,2.97,.27,4.3,.8-2.13,2.27-3.2,4.67-3.2,7.2s.7,4.57,2.1,6.1c1.4,1.53,3.3,2.3,5.7,2.3s4.42-.62,6.05-1.85c1.63-1.23,2.45-2.83,2.45-4.8s-.57-3.71-1.7-5.25c-1.13-1.53-2.55-2.88-4.25-4.05-1.7-1.17-3.55-2.48-5.55-3.95-2-1.46-3.85-2.95-5.55-4.45-1.7-1.5-3.12-3.4-4.25-5.7-1.13-2.3-1.7-4.82-1.7-7.55,0-4.73,1.95-8.62,5.85-11.65,3.9-3.03,8.77-4.55,14.6-4.55s10.1,1.13,12.8,3.4c2.7,2.27,4.05,4.92,4.05,7.95s-.95,5.62-2.85,7.75c-1.9,2.13-4.35,3.2-7.35,3.2-1.47,0-3.13-.3-5-.9,1.47-1.27,2.6-2.71,3.4-4.35,.8-1.63,1.2-3.25,1.2-4.85s-.67-2.95-2-4.05c-1.33-1.1-2.93-1.65-4.8-1.65Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="1s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "i" (second) -->
<path
d="M323.64,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05s-2.7-6.65-2.7-11.85c0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="1.2s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "o" (second) -->
<path
d="M360.09,23.5c.73,0,1.42,.22,2.05,.65,.63,.43,.95,.88,.95,1.35-6.73,4.67-10.77,11.17-12.1,19.5,1.4-3.73,3.12-6.97,5.15-9.7,2.03-2.73,4.15-4.8,6.35-6.2,4.2-2.6,8.3-3.9,12.3-3.9s7.4,1.97,10.2,5.9c2.8,3.93,4.2,9.2,4.2,15.8,0,7.4-1.5,14.2-4.5,20.4-3.34,7-8.07,11.83-14.2,14.5-3.47,1.53-7.27,2.3-11.4,2.3-5.8,0-10.85-2.25-15.15-6.75-4.3-4.5-6.45-10.97-6.45-19.4s2.07-15.87,6.2-22.3c4.13-6.43,9.6-10.48,16.4-12.15Zm8.5,9c-4.33,0-8.2,2.92-11.6,8.75-3.4,5.83-5.1,11.65-5.1,17.45,0,12.13,3.13,18.2,9.4,18.2,4.47,0,8.1-2.92,10.9-8.75,2.8-5.83,4.2-12.38,4.2-19.65,0-10.67-2.6-16-7.8-16Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="1.4s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "n" -->
<path
d="M438.99,24.9c3.93,0,6.75,1.22,8.45,3.65,1.7,2.43,2.55,5.73,2.55,9.9s-.65,10.02-1.95,17.55c-1.3,7.53-1.95,13.02-1.95,16.45s.43,5.93,1.3,7.5c.87,1.57,2.33,2.92,4.4,4.05-.87,.07-2.1,.1-3.7,.1-5.6,0-9.58-.87-11.95-2.6-2.37-1.73-3.55-4.77-3.55-9.1,0-2.47,.67-7.28,2-14.45,1.33-7.17,2-12.52,2-16.05,0-4.4-1.33-6.6-4-6.6-1.54,0-3.27,.9-5.2,2.7-1.93,1.8-3.8,4.25-5.6,7.35-1.8,3.1-3.3,7.08-4.5,11.95-1.2,4.87-1.8,9.72-1.8,14.55s.2,8.42,.6,10.75c-2.13,.13-3.54,.2-4.2,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.07,2.9,9.7s-.4,7.85-1.2,12.65c2.2-7.46,5.67-13.8,10.4-19,4.73-5.2,9.07-7.8,13-7.8Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="1.6s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "i" (third) -->
<path
d="M480.04,48.65c-1.63,9.5-2.47,17.33-2.5,23.5-.03,6.17,.35,10.15,1.15,11.95-5.2-1.33-8.7-3.35-10.5-6.05-1.8-2.7-2.7-6.65-2.7-11.85,0-2.8,.53-7.87,1.6-15.2,1.07-7.33,1.6-13.03,1.6-17.1s-.2-7.2-.6-9.4c1.47-.13,2.83-.2,4.1-.2,3.87,0,6.55,.65,8.05,1.95,1.5,1.3,2.25,3.52,2.25,6.65,0,1-.82,6.25-2.45,15.75Zm3.95-33.15c-1.87,.27-3.5,.4-4.9,.4-6.87,0-10.3-2.4-10.3-7.2,0-1.73,.5-4.1,1.5-7.1,1.87-.27,3.5-.4,4.9-.4,6.87,0,10.3,2.4,10.3,7.2,0,1.73-.5,4.1-1.5,7.1Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="1.8s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "n" (second) -->
<path
d="M533.69,24.9c3.93,0,6.75,1.22,8.45,3.65,1.7,2.43,2.55,5.73,2.55,9.9s-.65,10.02-1.95,17.55c-1.3,7.53-1.95,13.02-1.95,16.45s.43,5.93,1.3,7.5c.87,1.57,2.33,2.92,4.4,4.05-.87,.07-2.1,.1-3.7,.1-5.6,0-9.58-.87-11.95-2.6-2.37-1.73-3.55-4.77-3.55-9.1,0-2.47,.67-7.28,2-14.45,1.33-7.17,2-12.52,2-16.05,0-4.4-1.33-6.6-4-6.6-1.54,0-3.27,.9-5.2,2.7-1.93,1.8-3.8,4.25-5.6,7.35-1.8,3.1-3.3,7.08-4.5,11.95-1.2,4.87-1.8,9.72-1.8,14.55s.2,8.42,.6,10.75c-2.13,.13-3.54,.2-4.2,.2-3.8,0-6.53-.67-8.2-2-1.67-1.33-2.5-3.53-2.5-6.6,0-1.33,.7-6.46,2.1-15.4,1.4-8.93,2.1-16.05,2.1-21.35s-.57-10.18-1.7-14.65c4.87,1.53,8.27,3.72,10.2,6.55,1.93,2.83,2.9,6.07,2.9,9.7s-.4,7.85-1.2,12.65c2.2-7.46,5.67-13.8,10.4-19,4.73-5.2,9.07-7.8,13-7.8Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="2s"
repeatCount="indefinite"
/>
</path>
<!-- Letter "g" -->
<path
d="M588.59,25.9c1.27,0,2.23,.07,2.9,.2,1.73,.33,2.67,1.57,2.8,3.7-7.27,1.53-13.05,5.47-17.35,11.8-4.3,6.33-6.45,12.93-6.45,19.8,0,8,2.43,12,7.3,12,2.93,0,5.57-1.6,7.9-4.8,4.13-5.8,7.03-14.87,8.7-27.2,1.27-9.73,3.63-16,7.1-18.8,1.67-1.4,3.73-2.5,6.2-3.3-.93,7.07-1.4,12.4-1.4,16,0,26.67-2.85,46.7-8.55,60.1-5.7,13.4-14.98,20.1-27.85,20.1-5.2,0-9.27-1.38-12.2-4.15-2.93-2.77-4.4-5.8-4.4-9.1s1.03-6,3.1-8.1c2.07-2.1,4.96-3.15,8.7-3.15,1.53,0,3.1,.33,4.7,1-2.53,1.67-3.8,4.23-3.8,7.7,0,2.33,.7,4.35,2.1,6.05,1.4,1.7,3.12,2.55,5.15,2.55s3.82-.42,5.35-1.25c1.53-.83,3.1-2.32,4.7-4.45,1.6-2.13,3-4.8,4.2-8,2.73-7.4,4.23-17.5,4.5-30.3-1.93,5.73-4.87,10.33-8.8,13.8-3.93,3.47-7.93,5.2-12,5.2-5.13,0-9.05-1.95-11.75-5.85-2.7-3.9-4.05-8.88-4.05-14.95,0-7.07,1.7-13.63,5.1-19.7,3.8-7,9.07-11.87,15.8-14.6,3.73-1.53,7.83-2.3,12.3-2.3Z"
style="fill: url(#textGradient)"
>
<animate
attributeName="opacity"
values="0.8;1;0.8"
dur="2s"
begin="2.2s"
repeatCount="indefinite"
/>
</path>
</g>
<!-- Brush-painted underline growing from left to right -->
<g>
<!-- Main brush stroke line - thinner than letters, slower -->
<path
d="M20,95 L580,95"
stroke="url(#textGradient)"
stroke-width="4"
fill="none"
stroke-linecap="round"
>
<!-- Growing from left to right like brush painting - slower -->
<animate
attributeName="stroke-dasharray"
values="0,560;560,0"
dur="5s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0;1;1"
dur="5s"
repeatCount="indefinite"
/>
</path>
<!-- Brush texture effect - slightly thicker stroke that follows -->
<path
d="M20,95 L580,95"
stroke="#4cc2f1"
stroke-width="5"
fill="none"
stroke-linecap="round"
opacity="0.3"
>
<animate
attributeName="stroke-dasharray"
values="0,560;560,0"
dur="5s"
begin="0.2s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0;0.3;0.3"
dur="5s"
begin="0.2s"
repeatCount="indefinite"
/>
</path>
<!-- Paint drip effect at the end - smaller for thinner brush -->
<circle
cx="580"
cy="95"
r="0"
fill="url(#textGradient)"
>
<animate
attributeName="r"
values="0;2;0"
dur="0.6s"
begin="4.7s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0;0.8;0"
dur="0.6s"
begin="4.7s"
repeatCount="indefinite"
/>
</circle>
</g>
</g>
</symbol>
</svg>
</body>
</html>