problem description

svg creates rain effect. When calling raindrop function with timer setInterval, raindrop animation will not run. Calling raindrop function alone or several times can run animation and solve

related codes

<svg width="100%" height="100%" id="box">
    <defs>
        <linearGradient id="rainLinear" x1="0" y1="0" x2="0" y2="1">
            <stop offSet="0" stop-color="white"></stop>
            <stop offSet="1" stop-color="blue"></stop>
        </linearGradient>
    </defs>
    <path id="rainPath" d="M 10 10 10 500" stroke="red"></path>
    <rect x="100" y="0" width="5" height="20" fill="url(-sharprainLinear)">
        <animateMotion path="M 10 10 10 500" dur="5s">
        </animateMotion>
    </rect>

</svg>
<script>
    var SVG_NS = "http://www.w3.org/2000/svg"
    var XLINK_NS = "http://www.w3.org/1999/xlink"
    var box = document.querySelector("-sharpbox")
    let idNum = 0
    // 
    function randomNum(min, max) {
        return parseInt(min + (max - min) * Math.random())
    }
    // 
    function createRain() {
        // 
        let rain = document.createElementNS(SVG_NS, "rect")
        let rainAnimate = document.createElementNS(SVG_NS, "animateMotion")
        let x = randomNum(1, 1000)
        let time = randomNum(1, 10)
        // id
        let id = idNum
        idNumPP

        // 
        box.appendChild(rain)
        rain.appendChild(rainAnimate)

        // 
        rain.setAttribute("x", x)
        rain.setAttribute("y", 0)
        rain.setAttribute("width", 5)
        rain.setAttribute("height", 20)
        rain.setAttribute("fill", "url(-sharprainLinear)")
        rain.setAttribute("id", "a" + id)

        // 
        rainAnimate.setAttribute("path", "M 10 10 10 500")
        rainAnimate.setAttribute("begin", 0)
        rainAnimate.setAttribute("dur", time + "s")

        // 
        setTimeout(() => {
            box.removeChild(document.querySelector("-sharpa" + id))
        }, time * 1000 - 200);
    }
    // 
    setInterval(() => {
        createRain()
    }, 500)
    //
    createRain()
</script>