Joom's Sunset with SVG

SVG Code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
   width="500" height="300" viewBox="-50 -50 950 550">

<!-- Display sun -->
<g>
   <defs>
      <linearGradient id="SunGradient">
         <stop offset="5%" stop-color="#F60" />
         <stop offset="95%" stop-color="#FF6" />
      </linearGradient>
   </defs>

   <g transform="translate(400, 150) scale(1.1 1.1)">
      <ellipse fill="url(#SunGradient)" stroke="white" stroke-width="1"  
         cx="centerX" cy="0" rx="50" ry="50"/>
   </g>

 </g>

<!-- Display light shading-->
<defs>
   <linearGradient id="light" x1="0%" y1="0%" x2="50%" y2="100%"
      spreadMethod="pad" gradientUnits="objectBoundingBox">

      <stop offset="5%" style="stop-color:gold;stop-opacity:.47"/>

      <stop offset="12%" style="stop-color:gold;stop-opacity:.45"/>

      <stop offset="28%" style="stop-color:gold;stop-opacity:.4"/>

      <stop offset="45%" style="stop-color:gold;stop-opacity:.25"/>
      <stop offset="60%" style="stop-color:gold;stop-opacity:.175"/>

      <stop offset="75%" style="stop-color:gold;stop-opacity:.075"/>

      <stop offset="88%" style="stop-color:gold;stop-opacity:.025"/>
		           </linearGradient>	
</defs>

<rect x="-50" y="-80" width="1000" height="600" fill="url(#light)"/>

 <!-- boat -->
<defs>
   <linearGradient id="ultraviolet" x1="0%" y1="0%" x2="100%" y2="17.7778%"

      spreadMethod="pad" gradientUnits="objectBoundingBox">
      <stop offset="0%" style="stop-color:rgb(255,64,255);stop-opacity:0.5"/>
      <stop offset="50%" style="stop-color:rgb(64,64,255);stop-opacity:.7"/>
      <stop offset="100%" style="stop-color:rgb(64,255,255);stop-opacity:.7"/>
   </linearGradient>
</defs>

 <g transform="translate(550 335) scale(1.2 1.2)">
   <polygon points="0,0 50,30 150,30 165,0"
      fill="url(#ultraviolet)" stroke="none" stroke-width="1"/>
   <rect x="145" y="-15" width="10" height="15" fill="rgb(192,192,255)"/>
   <polygon points="165,-15 165 -75 65, -15"
      fill="url(#ultraviolet)" stroke="none" stroke-width="1"/>
 </g>

 <!-- water -->
<defs>
   <linearGradient id="OceanGradient" x1="0%" y1="0%" x2="100%" y2="0%"
      spreadMethod="pad" gradientUnits="objectBoundingBox">

      <stop offset="5%" stop-color="aqua" stop-opacity=".65"/>
      <stop offset="35%" stop-color="aqua" stop-opacity=".3"/>
      <stop offset="45%" stop-color="aqua" stop-opacity=".2"/>
   </linearGradient> 
</defs>

<g transform="translate(-80, 430) scale(1.5 1.5)">
   <path d="M0 50
      C 0 0 300 100 300 50
      C 300 0 600 100 600 50"
      style="fill:none;stroke:url(#OceanGradient);stroke-width:200"/>
</g>

<!-- curtain-->
<defs>
   <circle id="curtain" r="100" cx="0" cy="0"
      fill="darkseagreen" stroke="goldenrod" stroke-width="1"/>
</defs>
 

<g transform="translate(-110 -50) scale(1.5 3)">
   <use xlink:href="#curtain"/>
</g>

<g transform="translate(-110 530) scale(2 3.5)">
   <use xlink:href="#curtain"/>
</g>

<g transform="translate(950 -50) scale(1.5 3)">
   <use xlink:href="#curtain"/>
</g>

<g transform="translate(950 530) scale(2 3.5)">
   <use xlink:href="#curtain"/>
</g>

<!-- birds-->
<g transform="translate(700 100) scale(0.115 0.115)">
   <path d="M 0 0
      C -75 -100 225 -100 300 0
      C 375 -100 675 -100 600 0"
      fill="none" stroke="black" stroke-width="10"/>
</g>

<g transform="translate(630 80) scale(0.115 0.115)">
   <path d="M 0 0
      C -75 -100 225 -100 300 0
      C 375 -100 675 -100 600 0"
      fill="none" stroke="black" stroke-width="10"/>
</g>

<g transform="translate(730 70) scale(0.075 0.075)">
   <path d="M 0 0
      C -75 -100 225 -100 300 0
      C 375 -100 675 -100 600 0"
      fill="none" stroke="black" stroke-width="10"/>
</g>

<g transform="translate(650 50) scale(0.045 0.045)">
   <path d="M 0 0
      C -75 -100 225 -100 300 0
      C 375 -100 675 -100 600 0"
      fill="none" stroke="black" stroke-width="10"/>
</g>
</svg>