Nouvelles variations

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

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

  circle.appendChild(animation);
  svg33.appendChild(circle);

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