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