Я нашел библиотеку warp.js которая позволяет гнуть svg файлы. Но я так и не понял как это сделать в документаций есть только два примера и общее описание функций.
https://github.com/benjamminf/warpjs
Кто нибудь может мне объяснить по какому принципу код работает
И как в
const svg = document.getElementById('svg-element')
const warp = new Warp(svg)
warp.interpolate(4)
warp.transform(([ x, y ]) => [ x, y + 4 * Math.sin(x / 16) ])
установить свои значения
особенно мне не понятно что находится внутри X и Y и как я должен ориентироваться что бы исказить свой svg файл как мне нужно.
Я не очень хорош в геометрии поэтому можете объяснить как можно подробнее.
Я просто хочу создать массив опорных точек с параметрами
например
arr = [
[x=0,y=0,r=10,p=10, n[x=10,y=10]],
[x=10,y=10,r=10,p=10, n[x=10,y=10]]
]
где
x=положение по вертикали,
y=положение по горизонтали,
r=радиус воздействия
p=жесткость воздействия
n=направление движения по которому идет воздействие
Если установлена другая статична опорная точка то она будет удерживать часть фигуры на своем месте.
Примерно как в марионеточной деформаций(Puppet Warp)
