125 lines
5.9 KiB
XML
125 lines
5.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" width="100%" height="100%">
|
|
<defs>
|
|
<!-- Background Ambient Glow -->
|
|
<radialGradient id="hBgGlow" cx="20%" cy="50%" r="60%">
|
|
<stop offset="0%" stop-color="#9333ea" stop-opacity="0.35"/>
|
|
<stop offset="100%" stop-color="#09090b" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<!-- Chrome & Neon Gradients -->
|
|
<linearGradient id="hChromeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff"/>
|
|
<stop offset="40%" stop-color="#f5d0fe"/>
|
|
<stop offset="50%" stop-color="#a855f7"/>
|
|
<stop offset="85%" stop-color="#581c87"/>
|
|
<stop offset="100%" stop-color="#3b0764"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="hZoneGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff"/>
|
|
<stop offset="40%" stop-color="#fbcfe8"/>
|
|
<stop offset="50%" stop-color="#ec4899"/>
|
|
<stop offset="85%" stop-color="#9d174d"/>
|
|
<stop offset="100%" stop-color="#500724"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="hGlowBorder" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#ec4899"/>
|
|
<stop offset="50%" stop-color="#a855f7"/>
|
|
<stop offset="100%" stop-color="#6366f1"/>
|
|
</linearGradient>
|
|
|
|
<filter id="hGlow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur stdDeviation="6" result="b1"/>
|
|
<feGaussianBlur stdDeviation="14" result="b2"/>
|
|
<feMerge>
|
|
<feMergeNode in="b2"/>
|
|
<feMergeNode in="b1"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Outfit:wght@800;900&display=swap');
|
|
.h-drip-font {
|
|
font-family: 'Outfit', 'Montserrat', -apple-system, sans-serif;
|
|
font-weight: 900;
|
|
font-style: italic;
|
|
text-transform: uppercase;
|
|
}
|
|
.h-tagline-font {
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-weight: 800;
|
|
letter-spacing: 0.25em;
|
|
text-transform: uppercase;
|
|
}
|
|
</style>
|
|
|
|
<!-- Ambient Glow -->
|
|
<rect x="0" y="0" width="1200" height="400" fill="url(#hBgGlow)"/>
|
|
|
|
<!-- Left: Glowing "D" Sneaker Emblem -->
|
|
<g transform="translate(40, -40) scale(0.96)">
|
|
<!-- Halo Arc -->
|
|
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
|
|
fill="none" stroke="url(#hGlowBorder)" stroke-width="12" stroke-linecap="round" filter="url(#hGlow)" opacity="0.9"/>
|
|
<path d="M 230 70 C 340 70 410 140 410 250 C 410 320 375 380 320 415"
|
|
fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
|
|
|
|
<!-- Top Droplet Arc -->
|
|
<path d="M 140 135 C 160 110 200 100 230 100 C 270 100 300 120 320 150 C 290 140 260 140 230 145 C 190 150 160 170 140 195 Z"
|
|
fill="url(#hGlowBorder)" filter="url(#hGlow)"/>
|
|
|
|
<!-- Main "D" -->
|
|
<g filter="url(#hGlow)">
|
|
<path d="M 145 130 L 240 130 C 330 130 380 180 380 260 C 380 340 320 390 240 390 L 165 390 C 160 410 155 435 150 455 C 146 470 135 470 135 450 C 135 425 140 405 140 390 L 130 390 C 120 390 115 380 115 370 L 115 150 C 115 135 125 130 145 130 Z"
|
|
fill="url(#hChromeGrad)" stroke="url(#hGlowBorder)" stroke-width="7"/>
|
|
|
|
<!-- Drips -->
|
|
<path d="M 185 390 C 185 430 175 450 175 465 C 175 475 185 478 188 468 C 195 445 200 415 200 390 Z" fill="#c084fc"/>
|
|
<circle cx="182" cy="466" r="6" fill="#f0abfc"/>
|
|
<path d="M 245 390 C 245 440 235 470 235 490 C 235 498 245 500 248 490 C 258 460 265 420 265 390 Z" fill="#c084fc"/>
|
|
<circle cx="242" cy="490" r="7" fill="#f0abfc"/>
|
|
|
|
<!-- Inner Cutout -->
|
|
<path d="M 175 180 L 230 180 C 285 180 315 210 315 260 C 315 310 285 340 230 340 L 175 340 Z" fill="#09090b" stroke="url(#hGlowBorder)" stroke-width="5"/>
|
|
</g>
|
|
|
|
<!-- Sneaker Silhouette inside D -->
|
|
<g filter="url(#hGlow)" transform="translate(145, 175) scale(0.48)">
|
|
<path d="M 30 290 C 80 290 120 295 180 295 C 240 295 300 290 340 285 C 370 280 395 260 405 235 C 410 220 405 210 390 210 C 365 210 340 225 310 230 C 250 240 180 240 120 235 C 70 230 40 235 25 255 C 15 270 18 290 30 290 Z"
|
|
fill="#c084fc" stroke="#ffffff" stroke-width="4"/>
|
|
<path d="M 70 240 L 110 140 C 120 115 140 95 170 90 L 220 85 C 235 85 245 95 245 110 L 245 140 L 280 160 C 310 180 340 195 380 205 L 360 235 C 300 235 240 235 180 230 L 70 240 Z"
|
|
fill="url(#hChromeGrad)" stroke="#f0abfc" stroke-width="5"/>
|
|
<line x1="175" y1="135" x2="210" y2="150" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
|
|
<line x1="195" y1="155" x2="235" y2="170" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
|
|
<line x1="220" y1="175" x2="260" y2="190" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Right: DRIP ZONE Typography & Tagline -->
|
|
<g transform="translate(480, 0)">
|
|
<!-- Wordmark -->
|
|
<g filter="url(#hGlow)">
|
|
<text x="0" y="215" class="h-drip-font" font-size="140" fill="url(#hChromeGrad)" stroke="#9333ea" stroke-width="7">DRIP</text>
|
|
<text x="360" y="215" class="h-drip-font" font-size="140" fill="url(#hZoneGrad)" stroke="#ec4899" stroke-width="7">ZONE</text>
|
|
</g>
|
|
|
|
<!-- Droplet Accents -->
|
|
<g fill="#ec4899" filter="url(#hGlow)" transform="translate(0, 50)">
|
|
<path d="M 50 175 C 50 195 42 210 42 220 C 42 225 48 227 51 222 C 56 210 59 195 59 175 Z"/>
|
|
<path d="M 210 175 C 210 205 200 230 200 245 C 200 252 207 254 210 246 C 218 230 222 205 222 175 Z"/>
|
|
<path d="M 420 175 C 420 200 412 225 412 240 C 412 247 419 248 422 242 C 428 225 432 200 432 175 Z"/>
|
|
<path d="M 610 175 C 610 210 600 245 600 260 C 600 268 608 270 611 260 C 620 240 625 210 625 175 Z"/>
|
|
</g>
|
|
|
|
<!-- Tagline Subtitle -->
|
|
<g transform="translate(0, 310)">
|
|
<text x="0" y="0" class="h-tagline-font" font-size="20" fill="#ffffff" letter-spacing="0.28em">
|
|
ROPA URBANA Y ZAPATILLAS DEPORTIVAS
|
|
</text>
|
|
</g>
|
|
</g>
|
|
</svg>
|