125 lines
5.7 KiB
XML
125 lines
5.7 KiB
XML
|
<svg width="1200" height="200" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<defs>
|
||
|
|
<!-- Primary brand gradient -->
|
||
|
|
<linearGradient id="brandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366F1;stop-opacity:1" />
|
||
|
|
<stop offset="30%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||
|
|
<stop offset="60%" style="stop-color:#A855F7;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#D946EF;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Accent gradient -->
|
||
|
|
<linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#06B6D4;stop-opacity:1" />
|
||
|
|
<stop offset="50%" style="stop-color:#3B82F6;stop-opacity:1" />
|
||
|
|
<stop offset="100%" style="stop-color:#6366F1;stop-opacity:1" />
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Subtle mesh gradient background -->
|
||
|
|
<radialGradient id="meshGradient1" cx="20%" cy="30%" r="60%" fx="20%" fy="30%">
|
||
|
|
<stop offset="0%" style="stop-color:#818CF8;stop-opacity:0.15" />
|
||
|
|
<stop offset="100%" style="stop-color:#818CF8;stop-opacity:0" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="meshGradient2" cx="80%" cy="70%" r="50%" fx="80%" fy="70%">
|
||
|
|
<stop offset="0%" style="stop-color:#C084FC;stop-opacity:0.12" />
|
||
|
|
<stop offset="100%" style="stop-color:#C084FC;stop-opacity:0" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<radialGradient id="meshGradient3" cx="50%" cy="20%" r="40%" fx="50%" fy="20%">
|
||
|
|
<stop offset="0%" style="stop-color:#22D3EE;stop-opacity:0.1" />
|
||
|
|
<stop offset="100%" style="stop-color:#22D3EE;stop-opacity:0" />
|
||
|
|
</radialGradient>
|
||
|
|
|
||
|
|
<!-- Glow filter -->
|
||
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Soft shadow -->
|
||
|
|
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
|
||
|
|
<feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="#6366F1" flood-opacity="0.25"/>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Wave pattern -->
|
||
|
|
<pattern id="wavePattern" patternUnits="userSpaceOnUse" width="100" height="20" patternTransform="rotate(-5)">
|
||
|
|
<path d="M0 10 Q25 0 50 10 T100 10" stroke="url(#brandGradient)" stroke-width="0.5" fill="none" opacity="0.3"/>
|
||
|
|
</pattern>
|
||
|
|
|
||
|
|
<!-- Dot pattern -->
|
||
|
|
<pattern id="dotPattern" patternUnits="userSpaceOnUse" width="30" height="30">
|
||
|
|
<circle cx="15" cy="15" r="1" fill="#6366F1" opacity="0.15"/>
|
||
|
|
</pattern>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.header-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
.sub-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.header-text { fill: #F1F5F9; }
|
||
|
|
.sub-text { fill: #94A3B8; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Background layers -->
|
||
|
|
<rect width="1200" height="200" fill="#FAFBFC"/>
|
||
|
|
<rect width="1200" height="200" fill="url(#dotPattern)"/>
|
||
|
|
<rect width="1200" height="200" fill="url(#meshGradient1)"/>
|
||
|
|
<rect width="1200" height="200" fill="url(#meshGradient2)"/>
|
||
|
|
<rect width="1200" height="200" fill="url(#meshGradient3)"/>
|
||
|
|
|
||
|
|
<!-- Decorative wave lines -->
|
||
|
|
<rect x="0" y="60" width="1200" height="80" fill="url(#wavePattern)" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- Decorative circles -->
|
||
|
|
<circle cx="100" cy="100" r="80" fill="none" stroke="url(#brandGradient)" stroke-width="1" opacity="0.2"/>
|
||
|
|
<circle cx="100" cy="100" r="60" fill="none" stroke="url(#accentGradient)" stroke-width="0.5" opacity="0.3"/>
|
||
|
|
<circle cx="100" cy="100" r="40" fill="none" stroke="url(#brandGradient)" stroke-width="0.5" opacity="0.4"/>
|
||
|
|
|
||
|
|
<circle cx="1100" cy="100" r="70" fill="none" stroke="url(#brandGradient)" stroke-width="1" opacity="0.2"/>
|
||
|
|
<circle cx="1100" cy="100" r="50" fill="none" stroke="url(#accentGradient)" stroke-width="0.5" opacity="0.3"/>
|
||
|
|
<circle cx="1100" cy="100" r="30" fill="none" stroke="url(#brandGradient)" stroke-width="0.5" opacity="0.4"/>
|
||
|
|
|
||
|
|
<!-- Floating shapes -->
|
||
|
|
<g opacity="0.6">
|
||
|
|
<rect x="200" y="30" width="12" height="12" rx="2" fill="url(#brandGradient)" transform="rotate(15 206 36)"/>
|
||
|
|
<rect x="950" y="150" width="10" height="10" rx="2" fill="url(#accentGradient)" transform="rotate(-20 955 155)"/>
|
||
|
|
<circle cx="300" cy="160" r="5" fill="#A855F7" opacity="0.5"/>
|
||
|
|
<circle cx="850" cy="40" r="4" fill="#06B6D4" opacity="0.6"/>
|
||
|
|
<circle cx="1000" cy="80" r="3" fill="#8B5CF6" opacity="0.5"/>
|
||
|
|
<circle cx="180" cy="70" r="3" fill="#3B82F6" opacity="0.5"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Central decorative element -->
|
||
|
|
<g transform="translate(600, 100)" filter="url(#softShadow)">
|
||
|
|
<!-- Outer ring -->
|
||
|
|
<circle cx="0" cy="0" r="45" fill="none" stroke="url(#brandGradient)" stroke-width="2" stroke-dasharray="8 4" opacity="0.4"/>
|
||
|
|
|
||
|
|
<!-- Inner hexagon shape -->
|
||
|
|
<path d="M0,-30 L26,-15 L26,15 L0,30 L-26,15 L-26,-15 Z"
|
||
|
|
fill="none" stroke="url(#accentGradient)" stroke-width="1.5" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- Center dot -->
|
||
|
|
<circle cx="0" cy="0" r="8" fill="url(#brandGradient)" filter="url(#glow)"/>
|
||
|
|
<circle cx="0" cy="0" r="4" fill="#FFFFFF"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Connecting lines -->
|
||
|
|
<g stroke="url(#brandGradient)" stroke-width="1" opacity="0.2">
|
||
|
|
<line x1="170" y1="100" x2="555" y2="100"/>
|
||
|
|
<line x1="645" y1="100" x2="1030" y2="100"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Gradient accent line at bottom -->
|
||
|
|
<rect x="0" y="195" width="1200" height="5" fill="url(#brandGradient)" opacity="0.8"/>
|
||
|
|
|
||
|
|
<!-- Corner accents -->
|
||
|
|
<path d="M0,0 L50,0 L50,5 L5,5 L5,50 L0,50 Z" fill="url(#brandGradient)" opacity="0.3"/>
|
||
|
|
<path d="M1200,0 L1150,0 L1150,5 L1195,5 L1195,50 L1200,50 Z" fill="url(#brandGradient)" opacity="0.3"/>
|
||
|
|
</svg>
|