<svg width="800" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
      <radialGradient id="degrade" cx="50%" cy="50%" r="100%" y2="0%" spreadMethod="pad" gradientUnits="objectBoundingBox" fx="40%" fy="40%" >
        <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1."/>
        <stop offset="100%" style="stop-opacity:.0"/>
      </radialGradient>
      </defs>
      <ellipse cx="550" cy="300" rx="122" ry="122" style="fill:#CCCCFF;"/>
      <ellipse cx="550" cy="300" rx="122" ry="122" style="fill:#CCCCFF; fill:url(#degrade)"/>
      <ellipse cx="150" cy="300" rx="122" ry="122" style="fill:#CCCCFF; fill:url(#degrade)"/>
<rect id="r_0_0" x="10" y="10" width="30" height="10" style="fill:#CCCCFF;stroke:#000099">
</rect>
<rect id="r_1_0" x="50" y="10" width="30" height="10" style="fill:#CCCCFF;stroke:#000099">
</rect>
<script>
<![CDATA[
var U = 2;
var V = 1;


function moveRect(k) {
    var r;
    for(var i = 0; i < U; i++) {
        for(var j = 0; j < V; j++) {
            r = document.getElementById('r_' + i + '_' + j);
            r.setAttribute('x', parseInt(r.getAttribute('x')) + 20);
            //console.info(r.getAttribute('x'));
        }
    }
    if(k < 50)
        setTimeout('moveRect(' + (k+1) + ')', 200);
}
moveRect(0);
//]]>
</script>
</svg>