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>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate