jeudi 5 avril 2018

?


<svg id="svg471" width="400" height="400" onclick="function471()"></svg>
<script>
function function471() {
for (var i = 0; i < 10; i++) {
var x1 = Math.floor(400*Math.random());
var y1 = Math.floor(400*Math.random());
var x2 = Math.floor(400*Math.random());
var y2 = Math.floor(400*Math.random());
var x3 = Math.floor(400*Math.random());
var y3 = Math.floor(400*Math.random());
var x4 = Math.floor(400*Math.random());
var y4 = Math.floor(400*Math.random());

var path1 = document.createElementNS(svg471.namespaceURI, 'path');
    path1.setAttribute('d', 'm'+x1+' '+y1+'L'+x2+' '+y2+'L'+x3+' '+y3+'L'+x4+' '+y4+'z');
    path1.setAttribute('fill', 'none');
    path1.setAttribute('opacity', '0.4');
    path1.setAttribute('stroke-linejoin', 'round');
    path1.setAttribute('stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
    path1.setAttribute('stroke-width', '50');

var animation1 = document.createElementNS(svg471.namespaceURI, 'animateMotion');
    animation1.setAttribute('path', 'm'+x1+' -100L100 '+y1+'L100 100L-100 100z');
    animation1.setAttribute('begin', '0s');
    animation1.setAttribute('dur', '8s');
    animation1.setAttribute('repeatCount', 'indefinite');

var animation2 = document.createElementNS(svg471.namespaceURI, 'animate');
    animation2.setAttribute('attributeName', 'stroke-width');
    animation2.setAttribute('values', '50;2;50');
    animation2.setAttribute('begin', '0s');
    animation2.setAttribute('dur', '8s');
    animation2.setAttribute('repeatCount', 'indefinite');

path1.appendChild(animation1);
path1.appendChild(animation2);
svg471.appendChild(path1);
}}
function471()
</script>