
<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;
var svgDocument;
var xmlns="http://www.w3.org/2000/svg"
function startup(evt) {
	O=evt.target
	svgDocument=O.ownerDocument
	O.setAttribute("onmousedown","running=!running;repoint()")
	RG=svgDocument.getElementById("gradient1");
	repoint()
}
running=true
x=65
xincr=.15
function repoint(){
	if (!running) return
	RG.setAttributeNS(null, 'cx', 100-x)
	RG.setAttributeNS(null, 'fx', 60*Math.cos(x))
	RG.setAttributeNS(null, 'fy', 30*Math.sin(x))
	x=x+xincr
	if ((x<0)||(x>300))xincr=-xincr
	window.setTimeout("repoint()", 10)
}
//]]>
</script>
<radialGradient id="gradient1" cx="0" cy="80" r="280" fx="150" fy="80" gradientUnits="userSpaceOnUse">
	<stop  offset=".00" style="stop-color:#441155"/>
	<stop  offset=".13" style="stop-color:#442266"/>
	<stop  offset=".15" style="stop-color:#5599bb"/>
	<stop  offset="0.25" style="stop-color:#ffffff"/>
	<stop  offset="0.7" style="stop-color:#ffddcc"/>
	<stop  offset="1" style="stop-color:#ffaaaa"/>
</radialGradient>

<g style="fill:url(#gradient1)" stroke-width="2" stroke="salmon"  transform="translate(100,20) scale(0.4)">
<ellipse transform="translate(100 200) rotate(20)" rx="250" ry="150"/>
<ellipse transform="translate(600 200) rotate(-30)" rx="250" ry="150"/>
<ellipse transform="translate(100 500) rotate(-30)" rx="250" ry="150"/>
<ellipse transform="translate(600 500) rotate(10)" rx="250" ry="150"/>
</g><text x="140" y="35" font-size="24">Click to start/stop</text>
</svg>