jeudi 15 juin 2017

Tentants tentacules




<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 />