<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     height="4in" width="4in" viewBox="0 0 100 100"
     id="svgmain"
     onload="init(evt)">

   <title> Example showing a bouncing ball with shadow </title>

   <desc> Picture of a bouncing blue ball </desc>

   <script type="text/ecmascript"><![CDATA[

     // This script is needed since most browsers don't
     // understand the animation elements of SVG standard.
     // In this case the ball should animate according to:
     //    <animateMotion path="m0,10 v70 z"
     //       dur="5s" fill="freeze" repeatCount="indefinite" />
     // (which moves the ball vertically from y=10 to y=80 then back.)
     // And the shadow according to:
     //    <animateMotion path="m50,0 l-50,30 z"
     //       dur="5s" fill="freeze" repeatCount="indefinite" />
     // (which moves the shadow from x=50,y=0 to x=-50,y=30 and then back.)

      var delay = 10;        // milliseconds
      var dir = 1;           // either 1 (bounce up) or -1 (bounce down)
      var longest;           // Max num of steps taken in one complete cycle
      var cycle = 0;         // 0..longest..0
      var timeout = null;
      var svgDoc = null;

      var ballXmin = 0, ballYmin = 10;
      var ballXmax = 0, ballYmax=80;
      var shadowXmin = 50, shadowYmin = 0;
      var shadowXmax = -50, shadowYmax = 30;
      var ballX, ballY, shadowX, shadowY;
      var ballXdelta, ballYdelta, shadowXdelta, shadowYdelta;

      function init ( evt )
      {
//         svgDoc = document.getElementById( "svgmain" );
         svgDoc = evt.target.ownerDocument;
         ballX = ballXmin;  ballY = ballYmin;
         shadowX = shadowXmin;  shadowY = shadowYmin;

         // To calculate the deltas you need to know the longest motion,
         // in our case it is 80 (this could be calculated).
         longest = 80.0;

         ballXdelta = (ballXmax - ballXmin) / longest;
         ballYdelta = (ballYmax - ballYmin) / longest;;
         shadowXdelta = (shadowXmax - shadowXmin) / longest;
         shadowYdelta = (shadowYmax - shadowYmin) / longest;

         timeout = setTimeout( "window.draw()", delay );
      }

      function draw()
      {
         var ballNode = svgDoc.getElementById( "ball" );
         var shadowNode = svgDoc.getElementById( "shadow" );
         var x,y;
         if ( cycle >= longest || cycle < 0 )
            dir = dir * -1;  // Reverse direction
         cycle += dir;

         // The ball only moves in the Y direction:
         y = ballYmin + Math.round( ballYdelta * cycle );
         ballNode.setAttribute( "cy", y );

        // The shadow moves in both directions:
        x = shadowXmin + Math.round( shadowXdelta * cycle );
        y = shadowYmin + Math.round( shadowYdelta * cycle );
        shadowNode.setAttribute( "cx", x );
        shadowNode.setAttribute( "cy", y );

        // Now repeat:
        timeout = setTimeout( "window.draw()", delay );
      }

   ]]></script>

   <style type="text/css"><![CDATA[
      .Label { font-size:.5em; font-family:Arial; fill:black; }
   ]]></style>

   <defs>
      <radialGradient id="sphereHighlight" gradientUnits="objectBoundingBox"
       fx="30%" fy="30%">
         <stop offset="0%"   style="stop-color:#FFFFFF"/>
         <stop offset="40%"  style="stop-color:#0000AA"/>
         <stop offset="100%" style="stop-color:#000077"/>
      </radialGradient>

      <filter id="blurryShadow" filterUnits="userSpaceOnUse"
              x="0" y="0" width="100%" height="100%">
         <feGaussianBlur stdDeviation="8" />
      </filter>
   </defs>

   <!-- Draw containg frame -->
   <rect fill="lightGray" stroke="black" stroke-width="4"
         x="0" y="0" width="100" height="100"/>

   <!-- Draw sphere with highlight, and animate it -->
   <circle id="ball" cx="50" cy="0" r="10"
           style="fill:url(#sphereHighlight)">
   </circle>

   <!-- Draw shadow -->
   <circle id="shadow"  cx="50" cy="50" r="6"
           style="fill:black" filter="url(#blurryShadow)">
   </circle>

   <!-- Draw image label -->
   <text id="label"  x="10" y="95" class="Label">Bouncing Ball</text>
</svg>

