117 lines
5.8 KiB
XML
117 lines
5.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="100%" height="100%">
|
|
<defs>
|
|
<!-- Background Gradient: Dawn/Morning Sky -->
|
|
<linearGradient id="skyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#0d1b2a"/>
|
|
<stop offset="40%" stop-color="#1b263b"/>
|
|
<stop offset="75%" stop-color="#415a77"/>
|
|
<stop offset="100%" stop-color="#a3b18a"/>
|
|
</linearGradient>
|
|
|
|
<!-- Sun Glow -->
|
|
<radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#ffe5ec" stop-opacity="1"/>
|
|
<stop offset="30%" stop-color="#ffb703" stop-opacity="0.5"/>
|
|
<stop offset="100%" stop-color="#ffb703" stop-opacity="0"/>
|
|
</radialGradient>
|
|
|
|
<!-- Mountain Gradients (Back to Front) -->
|
|
<linearGradient id="mountainBack" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#485a6a"/>
|
|
<stop offset="100%" stop-color="#2a3439"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="mountainMid" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#374a43"/>
|
|
<stop offset="100%" stop-color="#1c2826"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="mountainFront" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#283618"/>
|
|
<stop offset="100%" stop-color="#060c05"/>
|
|
</linearGradient>
|
|
|
|
<!-- Mist Gradients -->
|
|
<linearGradient id="mistGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#ffffff" stop-opacity="0"/>
|
|
<stop offset="25%" stop-color="#e0e1dd" stop-opacity="0.4"/>
|
|
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.6"/>
|
|
<stop offset="75%" stop-color="#e0e1dd" stop-opacity="0.4"/>
|
|
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
|
</linearGradient>
|
|
|
|
<linearGradient id="mistSoft" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.5"/>
|
|
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
|
|
</linearGradient>
|
|
|
|
<!-- Soundwave Glow -->
|
|
<linearGradient id="soundGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#ffb703" stop-opacity="0.2"/>
|
|
<stop offset="50%" stop-color="#ffffff" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#ffb703" stop-opacity="0.2"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background Sky -->
|
|
<rect width="800" height="500" fill="url(#skyGrad)"/>
|
|
|
|
<!-- Morning Sun -->
|
|
<circle cx="400" cy="220" r="180" fill="url(#sunGlow)"/>
|
|
<circle cx="400" cy="220" r="45" fill="#fffef7" opacity="0.9"/>
|
|
|
|
<!-- Audio Waveform / Ambient Soundscape (Distant Sky Layer) -->
|
|
<path d="M 0 240 Q 100 180, 200 230 T 400 210 T 600 250 T 800 220 L 800 500 L 0 500 Z" fill="#ffffff" opacity="0.03"/>
|
|
<path d="M 0 210 Q 150 260, 300 200 T 600 220 T 800 190 L 800 500 L 0 500 Z" fill="#ffb703" opacity="0.03"/>
|
|
|
|
<!-- Distant Mountain Range -->
|
|
<polygon points="-50,380 150,180 380,320 600,140 850,350 850,500 -50,500" fill="url(#mountainBack)"/>
|
|
|
|
<!-- Deep Mist Layer 1 -->
|
|
<path d="M -50 300 Q 200 250, 450 320 T 850 280 L 850 420 L -50 420 Z" fill="url(#mistGrad)"/>
|
|
|
|
<!-- Mid-ground Mountain Range -->
|
|
<polygon points="-50,440 80,260 300,380 520,240 720,360 850,290 850,500 -50,500" fill="url(#mountainMid)"/>
|
|
|
|
<!-- Audio Waveform Integration (Wind/Melody lines cutting through mountains) -->
|
|
<path d="M -50 310 C 150 240, 250 400, 450 300 C 650 200, 700 350, 850 310" fill="none" stroke="url(#soundGrad)" stroke-width="2" opacity="0.6"/>
|
|
<path d="M -50 325 C 100 265, 280 370, 480 280 C 620 210, 740 330, 850 295" fill="none" stroke="url(#soundGrad)" stroke-width="1" stroke-dasharray="4,4" opacity="0.4"/>
|
|
|
|
<!-- Mid-ground Mist Layer 2 -->
|
|
<path d="M -50 340 Q 150 380, 400 320 T 850 350 L 850 500 -50 500" fill="url(#mistGrad)"/>
|
|
<ellipse cx="450" cy="340" rx="250" ry="30" fill="url(#mistSoft)"/>
|
|
<ellipse cx="150" cy="360" rx="180" ry="20" fill="url(#mistSoft)"/>
|
|
|
|
<!-- Foreground Foreground Ridge (Dark Pine Silhouettes) -->
|
|
<polygon points="-50,460 180,340 420,440 680,310 850,390 850,500 -50,500" fill="url(#mountainFront)"/>
|
|
|
|
<!-- Stylized Pine Trees (Trangles on Ridge) -->
|
|
<polygon points="165,350 180,330 195,350" fill="#060c05"/>
|
|
<polygon points="172,345 180,320 188,345" fill="#060c05"/>
|
|
<polygon points="110,390 120,370 130,390" fill="#0d1f10"/>
|
|
<polygon points="140,375 152,355 164,375" fill="#0d1f10"/>
|
|
<polygon points="665,320 680,295 695,320" fill="#060c05"/>
|
|
<polygon points="672,305 680,285 688,305" fill="#060c05"/>
|
|
<polygon points="635,340 648,320 660,340" fill="#0d1f10"/>
|
|
|
|
<!-- Foreground Low Mist Blanket -->
|
|
<path d="M -50 420 Q 200 390, 400 440 T 850 410 L 850 500 L -50 500 Z" fill="url(#mistGrad)" opacity="0.7"/>
|
|
|
|
<!-- Birds Taking Flight (Representing Birdsong / Awakening) -->
|
|
<g fill="#1b263b" opacity="0.85">
|
|
<!-- Bird 1 -->
|
|
<path d="M 280 150 Q 288 142, 295 148 Q 302 142, 310 150 Q 301 153, 295 149 Q 289 153, 280 150 Z" />
|
|
<!-- Bird 2 -->
|
|
<path d="M 315 135 Q 321 129, 327 133 Q 333 129, 339 135 Q 332 137, 327 134 Q 322 137, 315 135 Z" transform="rotate(-5, 327, 134) scale(0.8)"/>
|
|
<!-- Bird 3 -->
|
|
<path d="M 260 165 Q 265 160, 271 163 Q 277 160, 282 165 Q 276 167, 271 164 Q 266 167, 260 165 Z" transform="rotate(5, 271, 164) scale(0.7)"/>
|
|
<!-- Distant Birds -->
|
|
<path d="M 510 105 Q 514 100, 519 102 Q 524 100, 528 105 Q 523 106, 519 104 Q 515 106, 510 105 Z" opacity="0.5" scale="0.5"/>
|
|
<path d="M 535 98 Q 538 94, 542 96 Q 546 94, 550 98 Q 546 99, 542 97 Q 538 99, 535 98 Z" opacity="0.5" scale="0.4"/>
|
|
</g>
|
|
|
|
<!-- Elegant Radio/Audio Frame Overlay -->
|
|
<rect x="20" y="20" width="760" height="460" fill="none" stroke="#ffffff" stroke-width="1.5" stroke-opacity="0.2"/>
|
|
<rect x="25" y="25" width="750" height="450" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.1"/>
|
|
</svg>
|