Blooming Squares

<div style="text-align:center"/>

<svg id="svgbloom" xmlns="http://www.w3.org/2000/svg" width="400" height="400"></svg>

<script>

function myFunctionBloom() {

for (var i = 0; i < 8; i++) {

  var svgbloom = document.getElementById('svgbloom');

  var x1 = 200;

  var y1 = 200;

  var x2 = 100;

  var y2 = 100;

  var dur = Math.floor(Math.random() * 9)+3;

  var angle1 = Math.floor(Math.random() * 360);

  var angle2 = Math.floor(Math.random() * 360);

  var rect = document.createElementNS(svgbloom.namespaceURI, 'rect');

  rect.setAttribute('x', x1);

  rect.setAttribute('y', y1);

  rect.setAttribute('width', x2);

  rect.setAttribute('height', y2);

  rect.setAttribute('fill', 'none');

  rect.setAttribute('stroke-width', 2);

  rect.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));

  var animation = document.createElementNS(svgbloom.namespaceURI, 'animateTransform');

  animation.setAttribute('attributeName', 'transform');

  animation.setAttribute('attributeType', 'xml');

  animation.setAttribute('type', 'rotate');

  animation.setAttribute('values', ''+angle1+' 200 200; '+angle2+' 200 200; '+angle1+' 200 200');

  animation.setAttribute('dur', dur);

  animation.setAttribute('repeatCount', 'indefinite');

  var animation2 = document.createElementNS(svgbloom.namespaceURI, 'animate');

  animation2.setAttribute('attributeName', 'width');

  animation2.setAttribute('values', '150;0;150');

  animation2.setAttribute('dur', dur);

  animation2.setAttribute('repeatCount', 'indefinite');

  var animation3 = document.createElementNS(svgbloom.namespaceURI, 'animate');

  animation3.setAttribute('attributeName', 'height');

  animation3.setAttribute('values', '150;0;150');

  animation3.setAttribute('dur', dur);

  animation3.setAttribute('repeatCount', 'indefinite');

  rect.appendChild(animation);

  rect.appendChild(animation2);

  rect.appendChild(animation3);

  svgbloom.appendChild(rect);

}}

</script>

<br/>

<button onclick="myFunctionloom()">Click me</button>

</div>

<br />