<div style="text-align:center"/>
<svg id="svgtenta" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
<script>
function myFunctionTenta() {
var svgtenta = document.getElementById('svgtenta');
var x01 = 250;
var x02 = 250;
var x03 = Math.floor(Math.random() * 500);
var x04 = Math.floor(Math.random() * 500);
var x05 = Math.floor(Math.random() * 500);
var x06 = Math.floor(Math.random() * 500);
var x07 = Math.floor(Math.random() * 500);
var x08 = Math.floor(Math.random() * 500);
var x09 = Math.floor(Math.random() * 500);
var x10 = Math.floor(Math.random() * 500);
var x11 = Math.floor(Math.random() * 500);
var x12 = Math.floor(Math.random() * 500);
var x13 = Math.floor(Math.random() * 500);
var x14 = Math.floor(Math.random() * 500);
var col = '#'+Math.round(0xFFFFFF * Math.random()).toString(16);
var angle1 = 360;
var angle2 = Math.floor(Math.random() * 360);
var angle3 = Math.floor(Math.random() * 360);
var angle4 = Math.floor(Math.random() * 360);
var dur = Math.floor(Math.random() * 3)+9;
var thick = Math.floor(Math.random() * 1)+1;
var line1 = document.createElementNS(svgtenta.namespaceURI, 'line');
line1.setAttribute('x1', x01);
line1.setAttribute('y1', x02);
line1.setAttribute('x2', x03);
line1.setAttribute('y2', x04);
line1.setAttribute('id', 'line1');
line1.setAttribute('fill', 'none');
line1.setAttribute('stroke-linecap', 'round');
line1.setAttribute('stroke-width', thick);
line1.setAttributeNS(null, 'stroke', col);
var line2 = document.createElementNS(svgtenta.namespaceURI, 'line');
line2.setAttribute('x1', x03);
line2.setAttribute('y1', x04);
line2.setAttribute('x2', x05);
line2.setAttribute('y2', x06);
line2.setAttribute('id', 'line2');
line2.setAttribute('fill', 'none');
line2.setAttribute('stroke-linecap', 'round');
line2.setAttribute('stroke-width', thick);
line2.setAttributeNS(null, 'stroke', col);
var line3 = document.createElementNS(svgtenta.namespaceURI, 'line');
line3.setAttribute('x1', x05);
line3.setAttribute('y1', x06);
line3.setAttribute('x2', x07);
line3.setAttribute('y2', x08);
line3.setAttribute('id', 'line3');
line3.setAttribute('fill', 'none');
line3.setAttribute('stroke-linecap', 'round');
line3.setAttribute('stroke-width', thick);
line3.setAttributeNS(null, 'stroke', col);
var line4 = document.createElementNS(svgtenta.namespaceURI, 'line');
line4.setAttribute('x1', x07);
line4.setAttribute('y1', x08);
line4.setAttribute('x2', x09);
line4.setAttribute('y2', x10);
line4.setAttribute('id', 'line4');
line4.setAttribute('fill', 'none');
line4.setAttribute('stroke-linecap', 'round');
line4.setAttribute('stroke-width', thick);
line4.setAttributeNS(null, 'stroke', col);
var animation1 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation1.setAttribute('attributeName', 'transform');
animation1.setAttribute('attributeType', 'xml');
animation1.setAttribute('type', 'rotate');
animation1.setAttribute('values', '0 '+x01+' '+x02+'; '+angle1+' '+x01+' '+x02+'');
animation1.setAttribute('dur', dur);
animation1.setAttribute('repeatCount', 'indefinite');
var animation2 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation2.setAttribute('attributeName', 'transform');
animation2.setAttribute('attributeType', 'xml');
animation2.setAttribute('type', 'rotate');
animation2.setAttribute('values', '0 '+x03+' '+x04+'; '+angle2+' '+x03+' '+x04+'; 0 '+x03+' '+x04+'');
animation2.setAttribute('dur', dur);
animation2.setAttribute('repeatCount', 'indefinite');
var animation3 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation3.setAttribute('attributeName', 'transform');
animation3.setAttribute('attributeType', 'xml');
animation3.setAttribute('type', 'rotate');
animation3.setAttribute('values', '0 '+x05+' '+x06+'; '+angle3+' '+x05+' '+x06+'; 0 '+x05+' '+x06+'');
animation3.setAttribute('dur', dur);
animation3.setAttribute('repeatCount', 'indefinite');
var animation4 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation4.setAttribute('attributeName', 'transform');
animation4.setAttribute('attributeType', 'xml');
animation4.setAttribute('type', 'rotate');
animation4.setAttribute('values', '0 '+x07+' '+x08+'; '+angle4+' '+x07+' '+x08+'; 0 '+x07+' '+x08+'');
animation4.setAttribute('dur', dur);
animation4.setAttribute('repeatCount', 'indefinite');
var g1 = document.createElementNS(svgtenta.namespaceURI, 'g');
var g2 = document.createElementNS(svgtenta.namespaceURI, 'g');
var g3 = document.createElementNS(svgtenta.namespaceURI, 'g');
var g4 = document.createElementNS(svgtenta.namespaceURI, 'g');
g4.appendChild(line4);
g4.appendChild(animation4);
g3.appendChild(line3);
g3.appendChild(animation3);
g3.appendChild(g4);
g2.appendChild(line2);
g2.appendChild(animation2);
g2.appendChild(g3);
g1.appendChild(line1);
g1.appendChild(animation1);
g1.appendChild(g2);
svgtenta.appendChild(g1);
}
</script>
<br/>
<button onclick="myFunctionTenta()">Click me</button>
</div>
<br />
<svg id="svgtenta" xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>
<script>
function myFunctionTenta() {
var svgtenta = document.getElementById('svgtenta');
var x01 = 250;
var x02 = 250;
var x03 = Math.floor(Math.random() * 500);
var x04 = Math.floor(Math.random() * 500);
var x05 = Math.floor(Math.random() * 500);
var x06 = Math.floor(Math.random() * 500);
var x07 = Math.floor(Math.random() * 500);
var x08 = Math.floor(Math.random() * 500);
var x09 = Math.floor(Math.random() * 500);
var x10 = Math.floor(Math.random() * 500);
var x11 = Math.floor(Math.random() * 500);
var x12 = Math.floor(Math.random() * 500);
var x13 = Math.floor(Math.random() * 500);
var x14 = Math.floor(Math.random() * 500);
var col = '#'+Math.round(0xFFFFFF * Math.random()).toString(16);
var angle1 = 360;
var angle2 = Math.floor(Math.random() * 360);
var angle3 = Math.floor(Math.random() * 360);
var angle4 = Math.floor(Math.random() * 360);
var dur = Math.floor(Math.random() * 3)+9;
var thick = Math.floor(Math.random() * 1)+1;
var line1 = document.createElementNS(svgtenta.namespaceURI, 'line');
line1.setAttribute('x1', x01);
line1.setAttribute('y1', x02);
line1.setAttribute('x2', x03);
line1.setAttribute('y2', x04);
line1.setAttribute('id', 'line1');
line1.setAttribute('fill', 'none');
line1.setAttribute('stroke-linecap', 'round');
line1.setAttribute('stroke-width', thick);
line1.setAttributeNS(null, 'stroke', col);
var line2 = document.createElementNS(svgtenta.namespaceURI, 'line');
line2.setAttribute('x1', x03);
line2.setAttribute('y1', x04);
line2.setAttribute('x2', x05);
line2.setAttribute('y2', x06);
line2.setAttribute('id', 'line2');
line2.setAttribute('fill', 'none');
line2.setAttribute('stroke-linecap', 'round');
line2.setAttribute('stroke-width', thick);
line2.setAttributeNS(null, 'stroke', col);
var line3 = document.createElementNS(svgtenta.namespaceURI, 'line');
line3.setAttribute('x1', x05);
line3.setAttribute('y1', x06);
line3.setAttribute('x2', x07);
line3.setAttribute('y2', x08);
line3.setAttribute('id', 'line3');
line3.setAttribute('fill', 'none');
line3.setAttribute('stroke-linecap', 'round');
line3.setAttribute('stroke-width', thick);
line3.setAttributeNS(null, 'stroke', col);
var line4 = document.createElementNS(svgtenta.namespaceURI, 'line');
line4.setAttribute('x1', x07);
line4.setAttribute('y1', x08);
line4.setAttribute('x2', x09);
line4.setAttribute('y2', x10);
line4.setAttribute('id', 'line4');
line4.setAttribute('fill', 'none');
line4.setAttribute('stroke-linecap', 'round');
line4.setAttribute('stroke-width', thick);
line4.setAttributeNS(null, 'stroke', col);
var animation1 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation1.setAttribute('attributeName', 'transform');
animation1.setAttribute('attributeType', 'xml');
animation1.setAttribute('type', 'rotate');
animation1.setAttribute('values', '0 '+x01+' '+x02+'; '+angle1+' '+x01+' '+x02+'');
animation1.setAttribute('dur', dur);
animation1.setAttribute('repeatCount', 'indefinite');
var animation2 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation2.setAttribute('attributeName', 'transform');
animation2.setAttribute('attributeType', 'xml');
animation2.setAttribute('type', 'rotate');
animation2.setAttribute('values', '0 '+x03+' '+x04+'; '+angle2+' '+x03+' '+x04+'; 0 '+x03+' '+x04+'');
animation2.setAttribute('dur', dur);
animation2.setAttribute('repeatCount', 'indefinite');
var animation3 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation3.setAttribute('attributeName', 'transform');
animation3.setAttribute('attributeType', 'xml');
animation3.setAttribute('type', 'rotate');
animation3.setAttribute('values', '0 '+x05+' '+x06+'; '+angle3+' '+x05+' '+x06+'; 0 '+x05+' '+x06+'');
animation3.setAttribute('dur', dur);
animation3.setAttribute('repeatCount', 'indefinite');
var animation4 = document.createElementNS(svgtenta.namespaceURI, 'animateTransform');
animation4.setAttribute('attributeName', 'transform');
animation4.setAttribute('attributeType', 'xml');
animation4.setAttribute('type', 'rotate');
animation4.setAttribute('values', '0 '+x07+' '+x08+'; '+angle4+' '+x07+' '+x08+'; 0 '+x07+' '+x08+'');
animation4.setAttribute('dur', dur);
animation4.setAttribute('repeatCount', 'indefinite');
var g1 = document.createElementNS(svgtenta.namespaceURI, 'g');
var g2 = document.createElementNS(svgtenta.namespaceURI, 'g');
var g3 = document.createElementNS(svgtenta.namespaceURI, 'g');
var g4 = document.createElementNS(svgtenta.namespaceURI, 'g');
g4.appendChild(line4);
g4.appendChild(animation4);
g3.appendChild(line3);
g3.appendChild(animation3);
g3.appendChild(g4);
g2.appendChild(line2);
g2.appendChild(animation2);
g2.appendChild(g3);
g1.appendChild(line1);
g1.appendChild(animation1);
g1.appendChild(g2);
svgtenta.appendChild(g1);
}
</script>
<br/>
<button onclick="myFunctionTenta()">Click me</button>
</div>
<br />