<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
	"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="500" height="500" style="fill:rgb(0,0,255)">

<defs>
<!-- Set up the various element to be used -->
	<radialGradient id="stars">
  		<stop offset="0" style="stop-color:white;"/>
		<stop offset="20%" style="stop-color: 	black;"/>
	</radialGradient>

<g id="cloud">
	<circle cx="50" cy="50" r="25" style="fill:white"/>
	<circle cx="30" cy="40" r="25" style="fill:white"/>
	<circle cx="70" cy="30" r="25" style="fill:white"/>
	<circle cx="100" cy="40" r="25" style="fill:white"/>
	<circle cx="90" cy="50" r="25" style="fill:white"/>
</g>

<g id="house">
	<rect x="0" y="0" width="50" height="50" style="fill:brown"/>
	<rect x="5" y="5" width="15" height="15" style="fill:white">
	<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
	</rect>	
	<rect x="30" y="5" width="15" height="15" style="fill:white">
	<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
	</rect>	
	<rect x="5" y="28" width="15" height="15" style="fill:white">
	<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
	</rect>	
	<rect x="30" y="28" width="15" height="22" style="fill:yellow">
	<animateColor attributeName="fill" from="white" to="yellow" dur="3s" begin="15s" fill="freeze"/>
	</rect>				
</g>

<g id="star">
	<circle cx="5" cy="5" r="20" style = "fill: url(#stars);"/>	
</g>

</defs>

<!-- Draw the background -->

<rect id="sky" x="0" y="0" width="500" height="400" style="fill:cyan"/>
<circle id="sun" cx="300" cy="100" r="50" style="fill:yellow"/>
<circle id="moon" cx="200" cy="100" r="50" style="fill:white; opacity:0"/>
<rect id="ground" x="0" y="400" width="500" height="100" style="fill:green"/>

<!-- Draw the clouds -->
<g id="cloudGroup">
	<use id="cloud1" xlink:href="#cloud" x="0" y="0"/>
	<use id="cloud2" xlink:href="#cloud" x="200" y="200"/>
	<use id="cloud3" xlink:href="#cloud" x="50" y="150"/>
</g>

<!-- Draw the houses -->
<use id="house1" xlink:href="#house" x="50" y="350" />
<use id="house1" xlink:href="#house" x="50" y="350" />
<use id="house1" xlink:href="#house" x="150" y="350" />
<use id="house1" xlink:href="#house" x="300" y="350" />
<use id="house1" xlink:href="#house" x="400" y="350" />

<!-- Draw the Stars -->
<g id="starsGroup" style="opacity:0;">
<use id="star1" xlink:href="#star" x="50" y="20" />
<use id="star2" xlink:href="#star" x="150" y="40" />
<use id="star3" xlink:href="#star" x="350" y="50" />
<use id="star4" xlink:href="#star" x="300" y="100" />
<use id="star5" xlink:href="#star" x="320" y="220" />
<use id="star6" xlink:href="#star" x="10" y="250" />
<use id="star7" xlink:href="#star" x="75" y="250" />
<use id="star8" xlink:href="#star" x="350" y="150" />
<use id="star9" xlink:href="#star" x="250" y="180" />
<use id="star10" xlink:href="#star" x="350" y="40" />
<use id="star11" xlink:href="#star" x="50" y="180" />
<use id="star12" xlink:href="#star" x="270" y="160" />
<use id="star13" xlink:href="#star" x="420" y="270" />
<use id="star14" xlink:href="#star" x="20" y="120" />
<use id="star15" xlink:href="#star" x="55" y="240" />
<use id="star16" xlink:href="#star" x="150" y="200" />
</g>

<!-- Animate the sunset -->
<animate id = "sunset" xlink:href="#sun" 
attributeName="cy" 
from="100" 
to="500" 
begin="00:00:00" 
dur="20s" 
fill="freeze"/>

<!-- Animate the clouds drifting -->
<animate id = "cloud1move" xlink:href="#cloud1" 
attributeName="x" 
from="0" 
to="500" 
begin="00:00:00" 
dur="20s" 
fill="freeze"/>

<animate id = "cloud2move" xlink:href="#cloud2" 
attributeName="x" 
from="200" 
to="300" 
begin="00:00:00" 
dur="20s" 
fill="freeze"/>

<animate id = "cloud3move" xlink:href="#cloud3" 
attributeName="x" 
from="50" 
to="0" 
begin="00:00:00" 
dur="20s" 
fill="freeze"/>

<!-- Animate the sky Darkening as the sun sets, first to orange, then to black -->
<animate id = "skyDarken" xlink:href="#sky" 
attributeName="fill" 
from="cyan" 
to="orange" 
begin="12" 
dur="3s" 
fill="freeze"/>

<animate id = "skyDarken2" xlink:href="#sky" 
attributeName="fill" 
from="orange" 
to="black" 
begin="15" 
dur="3s" 
fill="freeze"/>

<!-- As the sky darkens, fade the moon in -->
<animate id = "moonrise" xlink:href="#moon" 
attributeName="opacity" 
from="0" 
to="1" 
begin="15" 
dur="3s" 
fill="freeze"/>

<!-- fade the clouds out -->
<animate id = "cloudfade" xlink:href="#cloudGroup" 
attributeName="opacity" 
from="1" 
to="0" 
begin="15" 
dur="3s" 
fill="freeze"/>

<!-- fade the clouds out -->
<animate id = "starsFadeIn" xlink:href="#starsGroup" 
attributeName="opacity" 
from="0" 
to="1" 
begin="18" 
dur="3s" 
fill="freeze"/>

</svg>

