Благодаря этой теме (довольно старая, поэтому я открываю новую) Анимация SVG, заполнение пути снизу вверх
Мне, наконец, удается сделать SVG-анимацию снизу вверх, как я хочу:
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="0" stop-color="#76b442">
<animate attributeName="offset" values="0;1" repeatCount="1" dur="1s" begin="0" fill="freeze"></animate>
<animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="0.1s" begin="0" fill="freeze"></animate>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="#76b442">
<animate attributeName="offset" values="0;1" repeatCount="1" dur="1s" begin="0" fill="freeze"></animate>
<animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="1s" begin="3s" fill="freeze"></animate>
</stop>
</linearGradient>
https://jsfiddle.net/8v5f3cgk/
Единственная проблема заключается в том, что я хочу, чтобы он зацикливался сверху вниз. И в неопределенном виде, как я мог достичь этого?
Большое спасибо