Gyretur

<div style="text-align:center"/>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
<script>
function myFunction16() {
for (var i = 0; i < 10; i++) {
  var svg = document.getElementById('svg');
  var x = Math.random() * 500;
  var y = Math.random() * 500;
  var r = Math.floor(Math.random() * 80) + 10 ;
  var dur = r-9 ;
  var circle = document.createElementNS(svg.namespaceURI, 'circle');
  circle.setAttribute('cx', x);
  circle.setAttribute('cy', y);
  circle.setAttribute('opacity', 0.5);
  circle.setAttribute('r', r);
  circle.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));

  var animation = document.createElementNS(svg.namespaceURI, 'animateTransform');
  animation.setAttribute('attributeName', 'transform');
  animation.setAttribute('attributeType', 'xml');
  animation.setAttribute('type', 'rotate');
  animation.setAttribute('values', '0 250 250; 360 250 250');
  animation.setAttribute('dur', dur);
  animation.setAttribute('repeatCount', 'indefinite');

  circle.appendChild(animation);
  svg.appendChild(circle);

}}
</script>
<br/>
<button onclick="myFunction16()">Click me</button>
</div>