samedi 3 mars 2018
fragments
<svg width="400" height="400" id="svgFrame0">
<rect x="0" y="0" width="400" height="400" fill="#f9f9f9" stroke-width="0.5" stroke="grey"/>
</svg>
<script>
function myF() {
for (var i = 0; i < 80; i++) {
var cx = Math.floor(400*Math.random());
var cy = Math.floor(400*Math.random());
var r = Math.floor(18*Math.random())+2;
var x1 = Math.floor(400*Math.random());
var x2 = Math.floor(400*Math.random());
var x3 = Math.floor(400*Math.random());
var x4 = Math.floor(400*Math.random());
var y1 = Math.floor(400*Math.random());
var y2 = Math.floor(400*Math.random());
var y3 = Math.floor(400*Math.random());
var y4 = Math.floor(400*Math.random());
var randomString0 = new Array ();
randomString0[0] = "#a000ac";
randomString0[1] = "#6c00d0";
randomString0[2] = "#0001fe";
randomString0[3] = "#0093dd";
randomString0[4] = "#5adb04";
randomString0[5] = "#d5fe00";
randomString0[6] = "#ffff00";
randomString0[7] = "#ffdd00";
randomString0[8] = "#fe9900";
randomString0[9] = "#fe5900";
randomString0[10] = "#fe0000";
randomString0[11] = "#dd127b";
var chaud = Math.floor(12*Math.random());
var g1 = document.createElementNS(svgFrame0.namespaceURI, 'g');
g1.setAttribute('transform', 'translate(-200 -200)');
var path1 = document.createElementNS(svgFrame0.namespaceURI, 'path');
path1.setAttribute('d', 'M'+cx+' '+cy+'L'+x1+' '+y1+'L'+x2+' '+y2+'L'+x3+' '+y3+'Z');
path1.setAttribute('fill', randomString0[chaud]);
path1.setAttribute('opacity', '0.2');
var animation1 = document.createElementNS(svgFrame0.namespaceURI, 'animateMotion');
animation1.setAttribute('path', 'M'+cx+' '+cy+'L'+x1+' '+y1+'L'+x2+' '+y2+'L'+x3+' '+y3+'Z');
animation1.setAttribute('begin', '0s');
animation1.setAttribute('dur', '96s');
animation1.setAttribute('repeatCount', 'indefinite');
g1.appendChild(path1);
g1.appendChild(animation1);
svgFrame0.appendChild(g1);
}}
myF()
</script>
-
Animation attribute (width, opacity, etc.) <animate attributeName="?" begin="0s" dur="6s" repeatCount...
-
Generate