Animar el relleno de ruta SVG bottom-top

Tengo un SVG con varias rutas de las que estoy tratando de animar. Mi objective es tener una animación que rellene el color lentamente de abajo hacia arriba con diferentes colores en cada ruta.

He intentado jugar con lineargradient pero no pude encontrar la forma de usarlo con las rutas.

Creé el siguiente SVG:

https://jsfiddle.net/812x1tqu/

    .st0{fill:#0000FF;stroke:#000000;stroke-miterlimit:10;} .st1{fill:#FF00FF;stroke:#000000;stroke-miterlimit:10;}       

Entonces, el azul se llenaría lentamente de abajo hacia arriba, y luego el rosa también comenzaría de abajo hacia arriba.

** EDITAR: Encontré el siguiente ejemplo, pero como mencioné anteriormente, el mío tiene rutas, por lo que es necesario un trabajo que, si es posible

https://jsfiddle.net/ppy2ggpL/

              

Gracias.

Para los interesados, he encontrado la solución (no estoy seguro de si esa es la forma más limpia de hacerlo o no, pero nunca menos).

https://jsfiddle.net/812x1tqu/1/

                             

** NOTA: La ruta SVG se dañó un poco (y no tenía ganas de limpiarla) pero el código de animación será el mismo independientemente.