Как правильно анимировать svg?

Здравствуйте! Есть примерно следующая svg анимация - codepen. Нужно реализовать подобную анимацию в js (чтобы она проигрывалась при скролле страницы). Ну, и чтобы кривая перестроилась в конечном счете, не возвращаясь в исходное положение после проигрыша анимации, как сейчас.

Идей, как это можно реализовать совсем нет, надеюсь на вашу помощь.

UPD: атрибут fill="freeze" в теге анимации помог решить проблему с перестройкой кривой, но вопрос с проигрыванием анимации при скролле все еще остается открытым.