Files
Church-Music/legacy-site/frontend/public/gradient-backdrop.svg

33 lines
1.6 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#00d4ff;stop-opacity:1" />
<stop offset="25%" style="stop-color:#00a8ff;stop-opacity:1" />
<stop offset="50%" style="stop-color:#6e5ff0;stop-opacity:1" />
<stop offset="75%" style="stop-color:#a855f7;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
</linearGradient>
<!-- Subtle overlay patterns -->
<radialGradient id="overlay1" cx="20%" cy="20%" r="40%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0" />
</radialGradient>
<radialGradient id="overlay2" cx="80%" cy="80%" r="40%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.08" />
<stop offset="100%" style="stop-color:#ffffff;stop-opacity:0" />
</radialGradient>
</defs>
<!-- Main gradient background -->
<rect width="100%" height="100%" fill="url(#grad1)"/>
<!-- Subtle overlay effects -->
<rect width="100%" height="100%" fill="url(#overlay1)"/>
<rect width="100%" height="100%" fill="url(#overlay2)"/>
<!-- Subtle geometric shapes for depth -->
<circle cx="15%" cy="18%" r="150" fill="rgba(255,255,255,0.03)"/>
<circle cx="85%" cy="82%" r="200" fill="rgba(255,255,255,0.03)"/>
<path d="M 0 700 Q 400 600 800 700 T 1600 700 L 1920 1080 L 0 1080 Z" fill="rgba(0,0,0,0.05)"/>
</svg>