Passage

<svg width="400" height="400" id="svgFrame01" onclick="myF01()">
<rect x="0" y="0"  width="400" height="400" fill="#f9f9f9" stroke-width="0.5" stroke="grey"/>
</svg>

<script>
function myF01 () {

for (var i = 0; i < 10; 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(svgFrame01.namespaceURI, 'g');
    g1.setAttribute('transform', 'translate(-200 -200)');

var path1 = document.createElementNS(svgFrame01.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(svgFrame01.namespaceURI, 'animateMotion');
    animation1.setAttribute('path', 'M-200 '+cy+'L'+x1+' '+y1+'L'+x2+' '+y2+'L600 '+y3+'');
    animation1.setAttribute('begin', '0s');
    animation1.setAttribute('dur', '8s');
    animation1.setAttribute('repeatCount', 'indefinite');

    g1.appendChild(path1);
    g1.appendChild(animation1);
    svgFrame01.appendChild(g1);

}}
myF01()


</script>