nothing: Loose stripes

<div style="text-align:center"/>
<svg id="svgbloom" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
<script>
function myFunctionBloom() {
for (var i = 0; i < 4; i++) {
var svgbloom = document.getElementById('svgbloom');
var x01 = Math.floor(Math.random() * 300);
var x02 = Math.floor(Math.random() * 300);
var x03 = Math.floor(Math.random() * 300);
var x04 = Math.floor(Math.random() * 300);
var x05 = Math.floor(Math.random() * 300);
var x06 = Math.floor(Math.random() * 300);
var x07 = Math.floor(Math.random() * 300);
var x08 = Math.floor(Math.random() * 300);
var x09 = Math.floor(Math.random() * 300);
var x10 = Math.floor(Math.random() * 300);
var x11 = Math.floor(Math.random() * 300);
var x12 = Math.floor(Math.random() * 300);
var x13 = Math.floor(Math.random() * 300);
var x14 = Math.floor(Math.random() * 300);

var dur = Math.floor(Math.random() * 24)+12;
var thick = Math.floor(Math.random() * 18)+2;
var angle1 = Math.floor(Math.random() * 360);
var angle2 = Math.floor(Math.random() * 360);

var path = document.createElementNS(svgbloom.namespaceURI, 'path');
path.setAttribute('d', 'm'+x01+','+x02+'c'+x03+','+x04+' '+x05+',-'+x06+' '+x07+',-'+x08+'c'+x09+','+x10+' '+x11+','+x12+' '+x13+','+x14+'z');
path.setAttribute('fill', 'none');
path.setAttribute('stroke-width', thick);
path.setAttribute('stroke-dasharray', 20);
path.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', 'stroke-dashoffset');
animation2.setAttribute('values', '0;1000');
animation2.setAttribute('dur', dur);
animation2.setAttribute('repeatCount', 'indefinite');

path.appendChild(animation);
path.appendChild(animation2);
svgbloom.appendChild(path);

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

samedi 3 juin 2017

Loose stripes