<svg width="100%" height="100%"
	xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
	 onload="startup(evt)"
>
<script>
<![CDATA[
	var svgDocument;
		balloon=null;
		count=0
		running=true
		xlow=-200
		xhigh=100
		x=xlow
		incr=5
		dir=1
		xdir=1
		ydir=1
		xspeed=.7
		yspeed=.4
		xcur=50
		ycur=50
		ylow=-25
		yhigh=100
		numlines=35
		rightedge=null
		Hi=new Array()
		Up=new Array()
		bottomedge=null
		svgns = 'http://www.w3.org/2000/svg';
		xlinkns = 'http://www.w3.org/1999/xlink';
function startup(evt) {
	O=evt.target
	O.setAttribute("onclick","running=!running;animate()")
	svgDocument = O.ownerDocument;
	balloon = svgDocument.getElementById("balloon");
	path=svgDocument.getElementById("Q")
	A=getDisplaySize()
	rightedge=A.width
	bottomedge=A.height - 40
	sky=svgDocument.getElementById("sky")
	sky.setAttribute("cy",50)
	sky.setAttribute("cx",rightedge/2)
	sky.setAttribute("r",rightedge/1.45)
	draw("peaks2",7,90,30)
	draw("peaks",10,80,25)
	draw("mountains",15,55,22)
	draw("foothills",22,35,15)
	
	moredraw();
}
function getDisplaySize()
{
//function due to G. Wade Johnson <svg-developers.yahoogroups.com>
//Date: Mon, 12 Dec 2005 20:57:49 -0600
//Subject: Re: [svg-developers] Screen extents
    var extents = null;
    try{
        var view = document.documentElement.viewport;
        extents = {width: view.width,height: view.height};
    }
    catch(e){
        extents = {width: window.innerWidth, height: window.innerHeight};
    }
    return extents;
}
P=new Array()
offset=50
function draw(id,humps,hi,up){
	IDS[IDS.length]=id
	Hi[id]=hi
	Up[id]=up
	var peaks=3*humps
	P[id]=new Array;
	t=svgDocument.getElementById(id)
	for (i=0;i<peaks;i++){
		P[id][i]= {x: Math.floor(Math.random()*(rightedge+2*offset)-offset),
				y: Math.floor(Math.random()*hi)+up};
	}
	P[id].sort(compare)
	s=render(P[id],0)
	t.setAttribute("d",s)
}
function compare(x,y){
	if (x.x<y.x) return -1
	else return 1
}
function render(Arr,lo){
	
	var low=Math.floor(bottomedge*.9)
	var s="M "+(-offset)+" "+(low)+" "
	s+=(7-offset)+" "+(low - Arr[0].y)+" "
	for (i=1;i<Arr.length;i++){
		if ((i)%3==0) s+="C "+Arr[i].x+" "+(low - Arr[i].y)+" "
		else 
		s+=Arr[i].x+" "+(low - Arr[i].y)+" "
	}
	s+="L "+(rightedge+offset)+" "+(low )+" Q "+(rightedge/2)+" "+(low)+" "+(-offset)+" "+(low)+" z"
	return s
}
function moredraw(){
	for (j=0;j<numlines;j++) another(100+j*10)
	Pa = svgDocument.createElementNS(svgns,"path");
	Pa.setAttribute("d", "M 194 340 C 185 360 215 360 206 340"); 
	Pa.setAttribute("stroke", "#440")
	Pa.setAttribute("stroke-width", "3")
	Pa.setAttribute("fill", "#551")
	balloon.appendChild(Pa);
	animate()
}
var xlinkns = "http://www.w3.org/1999/xlink";
function another(x){
	Pa = svgDocument.createElementNS(svgns,"path");
	Pa.setAttribute("id", "P"+count); count++
	Pa.setAttribute("d", "M 100 0 C 200 200 300 200 100 300"); 
	Pa.setAttribute("stroke", color(16,16,12))
	Pa.setAttribute("stroke-width", "5")
	Pa.setAttribute("fill", "none")
	balloon.appendChild(Pa);
}
function animate(){
	if (!running) return
	x+=incr*dir
	if ((x<xlow+incr)||(x>xhigh+incr))dir=-dir
	onestep(x)
	window.setTimeout("animate()",10)
}
IDS=new Array
mea=0
function onestep(x){
	mea++
	balloon.setAttribute("transform","translate("+xcur+","+ycur+")")
	for (i=0;i<count;i++){
		Pa = svgDocument.getElementById("P"+i);
		Pa.setAttribute("d", "M 200 20 C "+((i*18)+x)+" 100 "+(220- x/2)+" 250 200 340 "); 
	}
	adj=0
	for (id in IDS){
		for (j=0;j<P[IDS[id]].length;j++){
			P[IDS[id]][j].x-=(adj*adj/4+1)/2
		}
		adj++
		if(P[IDS[id]][3].x<0){
			st=rightedge+offset
			for (k=0;k<3;k++){
				newx=st+Math.ceil(80*Math.random()/P[IDS[id]].length)
				Q={x: newx,
					y: Math.floor(Math.random()*Hi[IDS[id]]+Up[IDS[id]])}
					st=newx
				P[IDS[id]].push(Q);
				R=P[IDS[id]].shift()
			}
		}
		s=render(P[IDS[id]],R.y)
		t=svgDocument.getElementById(IDS[id])
		t.setAttribute("d",s)
	}
	xcur=xcur+xspeed*xdir
	ycur=ycur+yspeed*ydir
	if((xcur<xlow+150)||(xcur>rightedge/1.5)) xdir=-xdir
	if((ycur<ylow)||(ycur>yhigh)) ydir=-ydir
	if (Math.floor(xcur)%10==0)recolorone(color(16,12,8))
	if (Math.floor(xcur)%20==1)recolorone(color(16,16,0))
	if (Math.floor(xcur)%30==2)recolorone("#da0")
}
first=true
function recolorone(c){
	r=Math.floor(Math.random()*count)
	Pa = svgDocument.getElementById("P"+r);
	Pa.setAttribute("stroke",c); 
}
function color(xr,xg,xb){
	r=Math.floor(Math.random()*xr)
	R=r.toString(16)
	g=Math.floor(Math.random()*xg)
	G=g.toString(16)
	b=Math.floor(Math.random()*xb)
	B=b.toString(16)
	return "#"+R+B+G
}
	//]]>
</script>
<defs>
<path id="Q" stroke="black" stroke-width="3"/>
<linearGradient id="backsky" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0" stop-color="#888"/>
	<stop offset=".5" stop-color="#0ff"/>
	<stop offset=".9"  stop-color="#ec7"/>
	
	
</linearGradient> 
<radialGradient id="sky" cx="500" cy="300" r="500" gradientUnits="userSpaceOnUse">
	<stop  offset="0" stop-color="#0ff" stop-opacity="1"/>
	<stop  offset=".2" stop-color="#0ff" stop-opacity=".6"/>
	<stop  offset=".71" stop-color="#000" stop-opacity="0"/>
	<stop  offset=".80" stop-color="#8ff" stop-opacity="1"/>
</radialGradient>
<linearGradient id="peak2" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0" stop-color="#eff"/>
	<stop offset=".2" stop-color="#9cd"/>
	<stop offset=".4" stop-color="#88b"/>
	<stop offset=".9" stop-color="#9a9"/>
</linearGradient> 
<linearGradient id="peak" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0" stop-color="#ddc"/>
	<stop offset=".2" stop-color="#998"/>
	<stop offset=".4" stop-color="#a8b"/>
	<stop offset=".9" stop-color="#aa6"/>
</linearGradient> 
<linearGradient id="mount" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0" stop-color="#589"/>
	<stop offset=".2" stop-color="#869"/>
	<stop offset=".6" stop-color="#898"/>
</linearGradient> 

<linearGradient id="foot" x1="0%" y1="0%" x2="0%" y2="100%">
	<stop offset="0" stop-color="#b87"/>
	<stop offset=".1" stop-color="#b63"/>
	<stop offset=".70" stop-color="#c86"/>
	<stop offset=".90"  stop-color="#bc7"/>
</linearGradient> 
</defs>
<rect  height="100%" width="100%" opacity="1" fill="url(#backsky)"/>

<path id="peaks2" d="M 0 500 400 400 800 500 z" fill="url(#peak2)" />
<path id="peaks" d="M 0 500 400 400 800 500 z" fill="url(#peak)" />
<path id="mountains" d="M 0 500 400 400 800 500 z" fill="url(#mount)" />

<path id="foothills" d="M 0 500 400 400 800 500 z" fill="url(#foot)" stroke="none"/>
<rect  height="100%" width="100%" opacity="1" fill="url(#sky)"/>
<g id="balloon" opacity="0.7">
</g>
</svg>