| <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> |
