mercredi 17 mai 2017

Random lion tooth






<div style="text-align:center"/>
<svg id="svgbras" xmlns="http://www.w3.org/2000/svg" width="400" height="400"></svg>
<script>
function myFunctionbras() {
for (var i = 0; i < 8; i++) {
  var svgbras = document.getElementById('svgbras');
  var x1 = 200;
  var y1 = 200;
  var x2 = 300;
  var y2 = 200;
  var dur = Math.floor(Math.random() * 9)+3;
  var angle1 = Math.floor(Math.random() * 360);
  var angle2 = Math.floor(Math.random() * 360);

  var line = document.createElementNS(svgbras.namespaceURI, 'line');
  line.setAttribute('x1', x1);
  line.setAttribute('y1', y1);
  line.setAttribute('x2', x2);
  line.setAttribute('y2', y2);
  line.setAttribute('stroke-width', 8);
  line.setAttribute('stroke-linecap', 'round');
  line.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));

  var animation = document.createElementNS(svgbras.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(svgbras.namespaceURI, 'animate');
  animation2.setAttribute('attributeName', 'stroke-width');
  animation2.setAttribute('values', '8;32;8');
  animation2.setAttribute('dur', dur);
  animation2.setAttribute('repeatCount', 'indefinite');

  line.appendChild(animation);
  line.appendChild(animation2);
  svgbras.appendChild(line);

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