Как постепенно увеличить скорость отрисовки SVG?

Question

[Иван Соловьев]

Здравствуйте. Нужна помощь в JS. На сайте SVG линия рисуется по скроллу, т.е на сколько пользователь проскролил на столько отрисовывается линия (stroke). Но линия имеет петли, повороты, и в определенных местах, нужно ускорить отрисовку линии, так как она не успевает за скроллом, к примеру когда переменная draw_1 меньше 6000px (длину линии в данный момент можно узнать).
Если увеличить скорость всей линии то в начале отрисовки она перегонит скролл.

Пример: https://codepen.io/Slolov/pen/XzxLWY

Сейчас так, но это просто добавляет к линии кусок (неплавно).

var draw_1 = pathLength - drawLength;
   if (draw_1 < 6000) { 
         draw_1 = draw_1 * 10
   }
   path.style.strokeDashoffset = draw_1;

Answer 1

[Rsa97]

Создайте массив опорных точек, который будет определять процент отрисовки линии в зависимости от процента скролла и рассчитывайте drawLength исходя из него.