Разобрать на точки?

Question

[js_123]

Здравствуйте. Есть ли возможность разобрать svg на точки, кмежду которых буду линии. Написал код и хочу анимировать линию ниже по принуипу скрипта. Не могу понять как.

<svg width="1440" height="768" viewBox="0 0 1440 768" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-83.6143 -168.119C-83.6143 -168.119 -28.2399 30.8053 74.4593 88.0896C221.086 169.876 364.03 -134.373 489.568 -22.8989C541.227 22.9737 522.397 86.2632 573.454 132.805C668.648 219.579 808.738 68.6733 902.337 157.164C984.353 234.705 886.122 360.221 967.307 438.631C1076.34 543.937 1234.26 326.531 1354.83 418.414C1480.33 514.051 1274.03 778.862 1427.47 815.613C1487.58 830.013 1584.35 794.881 1584.35 794.881" stroke="#979F79" stroke-width="2"/>
</svg>

Не могу плнять, как . Спасибо заранее!
cкрипт
линия

Comments

[Евгений Залецкий]

Тебе ещё нужно добавить точки ниже?

[js_123]

Женя Залецкий, Не совсем. Я хочу анимировать svg линию, так как работает мой скрипт. Типо волна

[Максим]

js_123, а если в векторном редакторе это сделать ?

[js_123]

Много Чего, нарисовать кривую точками и соединить их линиями? В итоге менять коорды точек, и линии подтянутся сами?

[js_123]

Много Чего, у меня кривая безье

[RAX7]

js_123, пройдись по path с помощью метода getPointAtLength и получишь координаты точек
https://codepen.io/realjameal/pen/gpzZGw

[js_123]

RAX7, интересно. Если я получу определённые точки, менять их на проотвоположные значения для анимации волны?

[js_123]

RAX7

[RAX7]

js_123, собираешь все точки в массив, из массива собираешь polyline и заменяешь им исходный path. Для анимации изменяешь точки в массиве и перерисовываешь polyline

[js_123]

RAX7, Спасибо. Если я правильно понял, нужно изменить точки в масиве на противоположные значения? Или как правильно менять?

[RAX7]

js_123, да откуда же я знаю, как их "правильно менять". Как должна выглядеть анимация, так и меняй координаты точек.

[js_123]

RAX7, Если это кривая, я могу менять коорды и получать другую линию?

[js_123]

RAX7, и разве polyline позволит рисовать плавные углы?

[RAX7]

js_123, при небольшом расстоянии между точками линия будет выглядеть достаточно плавной. Возможно лучше работать с кривой Безье. https://developer.mozilla.org/ru/docs/Web/SVG/Tuto...

[js_123]

RAX7, думаю да, моя исходная линия - кривая Безье

[Ankhena]

Что-то я запуталась в вопросах, вроде код в этом вопросе = коду из ответа оттуда Возможно ли создать волну?