SVG code for the image above
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800" version="1.1">
<defs>
<!--This is the template for the main sky rectangle-->
<linearGradient id="sunrise_sky" x2="0%" y2="100%">
<stop offset="0%" stop-color="deepskyblue"></stop>
<stop offset="60%" stop-color="lightskyblue"></stop>
<stop offset="100%" stop-color="lightblue"></stop>
</linearGradient>
<!--This is the main body of the sea-->
<linearGradient id="sea" x2="0%" y2="100%">
<stop offset="0%" stop-color="cyan"></stop>
<stop offset="100%" stop-color="dodgerblue"></stop>
</linearGradient>
<!--This is the sky above the horizon, showing the colours of the dawn-->
<linearGradient id="orange-yellow" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(255, 174, 66, 0)"></stop>
<stop offset="100%" stop-color="rgba(255, 174, 66, 1)"></stop>
</linearGradient>
<!--This is the sea reflecting the colour of the sky-->
<linearGradient id="shadow_on_sea" x2="0%" y2="100%">
<stop offset="0%" stop-color="rgba(255, 174, 66, 0.9)"></stop>
<stop offset="100%" stop-color="rgba(255, 174, 66, 0)"></stop>
</linearGradient>
<!--This is a pattern unit for the brick wall-->
<pattern id="brick-wall" width="110" height="50" patternUnits="userSpaceOnUse">
<polygon points="0,0 0,20 50,20 50,0" fill="firebrick" ></polygon>
<polygon points="50,0 50,20 55,20 55,0" fill="darkslategray"></polygon>
<polygon points="55,0 55,20 105,20 105,0" fill="firebrick" ></polygon>
<polygon points="105,0 105,20 110,20 110,0" fill="darkslategray"></polygon>
<polygon points="0,20 0,25 110,25 110,20" fill="darkslategray"></polygon>
<polygon points="0,25 0,45 22,45 22,25" fill="firebrick"></polygon>
<polygon points="22,45 27,45 27,25 22,25" fill="darkslategray"></polygon>
<polygon points="27,25 27,45 75,45 75,25" fill="firebrick"></polygon>
<polygon points="27,25 27,45 75,45 75,25" fill="firebrick"></polygon>
<polygon points="75,25 75,45 80,45 80,25" fill="darkslategray"></polygon>
<polygon points="80,25 80,45 110,45 110,25" fill="firebrick"></polygon>
<polygon points="0,45 0,50 110,50 110,45" fill="darkslategray"></polygon>
</pattern>
</defs>
<!--####################
Building up the image
########################-->
<!--This is the main body of the sky-->
<rect x="0" y="0" width="800" height="500" fill="url(#sunrise_sky)"></rect>
<rect x="0" y="100" width="800" height="400" fill="url(#orange-yellow)"></rect>
<circle cx="400" cy="500" r="70" fill="yellow"></circle>
<rect x="0" y="500" width="800" height="300" fill="url(#sea)"></rect>
<rect x="0" y="500" width="800" height="100" fill="url(#shadow_on_sea)"></rect>
<!--This is building the red brick wall-->
<rect x="0" y="560" width="300" height="240" fill="url(#brick-wall)"></rect>
<rect x="500" y="560" width="300" height="240" fill="url(#brick-wall)"></rect>
<!--This is building the gate: the rect is the body of the gate and the 5 circle tags
are the five circles at the top of the gate-->
<rect x="300" y="560" width="200" height="240" stroke-width="6" stroke="#444444" fill="none"></rect>
<circle cx="320" cy="580" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="360" cy="580" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="400" cy="580" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="440" cy="580" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="480" cy="580" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<!--These are the row of five circles at the bottom of the gate-->
<circle cx="320" cy="780" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="360" cy="780" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="400" cy="780" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="440" cy="780" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="480" cy="780" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
<!--These are the lines that form the bars above and below the concentric circles-->
<line x1="300" y1="760" x2 ="500" y2="760" stroke-width="6" stroke="#444444"></line>
<line x1="300" y1="600" x2 ="500" y2="600" stroke-width="6" stroke="#444444"></line>
<!--These lines form the X on the gate-->
<line x1="300" y1="600" x2="500" y2="760" stroke-width="6" stroke="#444444"></line>
<line x1="300" y1="760" x2="500" y2="600" stroke-width="6" stroke="#444444"></line>
<!--These are the concentric circles that form the rings of the gate-->
<circle cx="400" cy="680" r="80" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="400" cy="680" r="60" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="400" cy="680" r="40" stroke-width="6" stroke="#444444" fill="none"></circle>
<circle cx="400" cy="680" r="20" stroke-width="6" stroke="#444444" fill="none"></circle>
</svg>