<h1>点击页面任意地方运行/暂停曲线重绘</h1>
<svg id="msvg" widt="800" height="400" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <path id="p1" d="M0 100 H400" fill="none" stroke="red" stroke-width="4" stroke-dasharray="4" stroke-linejoin="round">
        <animate attributeName="stroke-dashoffset" from="0" to="-360" dur="10s" repeatCount="indefinite" />
    </path>
</svg>

<script>
    var timeID, go = false; // timeID : 定时器标识、go : 动画开关

    // 页面点击事件
    document.onclick = () => {
        go = !go; // go开关取反
        draw(); // 执行draw 函数
    };
        
    function draw() {
        var tt = 31;  // 路径节点总数
        var str = ''; // 路径字符串
        // 遍历节点、生成动态路径
        Array.from({length: tt}).forEach((_,k) => {
            var x = (k + 1) * (380 / tt); // 节点X坐标
            // 节点Y坐标 ：节点序列号被2整除定在中央，否则随机
            var y = k % 2 === 0 ? 100 : Math.floor(Math.random() * 200);
            // 拼接路径字串 ：开始时是M指令，其余L指令
            str += k === 0 ? `M0 100 H${x}` : ` L${x} ${y}`;
        });
        var path = `${str}L400 100`; // 路径终点
        p1.setAttribute('d', path);  // 给path d属性赋值
        // setTimeout定时器递归调用本函数 ：根据 go 开关运行或取消动画
        go ? timeID = setTimeout(draw, 200) : cancelTimeout(timeID);
    }
</script>