01: <svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
02:       <defs>
03:       <radialGradient id="degrade" cx="50%" cy="50%" r="100%" y2="0%" spreadMethod="pad" gradientUnits="objectBoundingBox" fx="40%" fy="40%" >
04:         <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1."/>
05:         <stop offset="100%" style="stop-opacity:.0"/>
06:       </radialGradient>
07:       </defs>
08:       <ellipse cx="550" cy="300" rx="122" ry="122" style="fill:#CCCCFF;"/>
09:       <ellipse cx="550" cy="300" rx="122" ry="122" style="fill:#CCCCFF; fill:url(#degrade)"/>
10:       <ellipse cx="150" cy="300" rx="122" ry="122" style="fill:#CCCCFF; fill:url(#degrade)"/>
11: <rect id="r_0_0" x="10" y="10" width="30" height="10" style="fill:#CCCCFF;stroke:#000099">
12: </rect>
13: <rect id="r_1_0" x="50" y="10" width="30" height="10" style="fill:#CCCCFF;stroke:#000099">
14: </rect>
15: <script>
16: <![CDATA[
17: var U = 2;
18: var V = 1;
19: 
20: 
21: function moveRect(k) {
22:     var r;
23:     for(var i = 0; i < U; i++) {
24:         for(var j = 0; j < V; j++) {
25:             r = document.getElementById('r_' + i + '_' + j);
26:             r.setAttribute('x', parseInt(r.getAttribute('x')) + 20);
27:             //console.info(r.getAttribute('x'));
28:         }
29:     }
30:     if(k < 50)
31:         setTimeout('moveRect(' + (k+1) + ')', 200);
32: }
33: moveRect(0);
34: //]]>
35: </script>
36: </svg>