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

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;

Comments

[Максим Тимофеев]

нет кода - нет ответа. Как реализованы петли и повороты?

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

Drakonoved, https://codepen.io/Slolov/pen/XzxLWY

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

Максим Тимофеев, https://codepen.io/Slolov/pen/XzxLWY

[Максим Тимофеев]

Иван Соловьев, Мне кажется надо все иначе сделать. Произвольные каракули - это не красиво. Надо заготовить path для красивых каракулей, скрыть их через clipPath (обычным прямоугольником) и меняя высоту это прямоугольника рисовать линию (показывать скорее а не рисовать). Это проще и красивее.
При этом path сделать так, что бы из него получился loop. Что бы можно было добавить на определенных offset скрола. Можно заготовить несколько path (прорисовать короткие сегменты) и подставлять рандомно, что бы линия получалась разная каждый раз разная.

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

Максим Тимофеев, Спасибо. Буду пробовать.

Answer 1

[Иван]

https://learn.javascript.ru/settimeout-setinterval