Détours

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" id="svgCourbes"></svg>

<script>
function multicourbes() {
for (var i = 0; i < 200; i++) {
var x1 = Math.floor(200*Math.random());
var x2 = Math.floor(200*Math.random())+200;
var y1 = Math.floor(400*Math.random());
var y2 = Math.floor(400*Math.random());

var g1 = document.createElementNS(svgCourbes.namespaceURI, 'g');

var path1 = document.createElementNS(svgCourbes.namespaceURI, 'path');
    path1.setAttribute('d', 'm'+x1+','+y1+'C'+x1+','+y1+' 0,200 200,200C400,200 '+x2+','+y2+' '+x2+','+y2+'');
    path1.setAttribute('fill', 'none');
    path1.setAttribute('stroke', 'black');
    path1.setAttribute('stroke-width', '1');
    path1.setAttribute('stroke-dasharray', '1000');
    path1.setAttribute('opacity', '0.5');

var anim1 = document.createElementNS(svgCourbes.namespaceURI, 'animate');
    anim1.setAttribute('attributename', 'stroke-dashoffset');
    anim1.setAttribute('begin', '0s');
    anim1.setAttribute('repeatcount', 'indefinite');
    anim1.setAttribute('dur', '4s');
    anim1.setAttribute('values', '0;1000;0');

    g1.appendChild(path1);
    g1.appendChild(anim1);
    svgCourbes.appendChild(g1);
}}
multicourbes()
</script>