mardi 6 juin 2017

Loose Haircut





<div style="text-align:center"/>
<svg id="svgbloom" xmlns="http://www.w3.org/2000/svg" width="500" height="500">

<image xlink:href="data:image/png;base64,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" width="241" height="299" x="120" y="200"/>
</svg>

<script>
function myFunctionBloom() {
for (var i = 0; i < 100; i++) {
  var svgbloom = document.getElementById('svgbloom');
  var x01 = Math.floor(Math.random() * 250)+140;
  var x02 = Math.floor(Math.random() * 100)+230;
  var x03 = Math.floor(Math.random() * 200);
  var x04 = Math.floor(Math.random() * 100);
  var x05 = Math.floor(Math.random() * 100);
  var x06 = Math.floor(Math.random() * 100);
  var x07 = Math.floor(Math.random() * 100);
  var x08 = Math.floor(Math.random() * 100);
  var x09 = Math.floor(Math.random() * 100);
  var x10 = Math.floor(Math.random() * 100);
  var x11 = Math.floor(Math.random() * 100);
  var x12 = Math.floor(Math.random() * 100);
  var x13 = Math.floor(Math.random() * 100);
  var x14 = Math.floor(Math.random() * 100);

  var thick = Math.floor(Math.random() * 2)+2;

  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+'');
  path.setAttribute('fill', 'none');
  path.setAttribute('stroke-width', thick);
  path.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));


  svgbloom.appendChild(path);

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