Могу ли я создать морф из нескольких одинаковых svg файлов?

Question

[zeni1agent]

Я создал svg файл с помощью adobe illustrator и сохранил его.
После я его деформировал изменив расположение точек, угол линий и сохранил. И так три раза
И мне нужно создать морф используя уже готовые svg файлы которые я создал ранние
Потому-что вручную прописывать все координаты маски цвета и градиенты слишком долго.
Мой код

Я хочу создать для примера ползунок "step" и "fact"
Ползунок step должен деформировать "frame_1" так чтобы при достижении 70 он полностью деформировался на "frame_2"
а по достижению 100 со "frame_2" становился "frame_3"
Пример

А ползунок "fact" должен изменять "frame_1" на "frame_3" и создавать комбинацию с ползунком "step"
Пример вначале "step" изменили с 0 до 50 а после ползунок "fact" был изменен с 0 до 100

Мне нужно что бы точки повторяли траекторию прошлого "frame" а не двигались к ближайшей точке
Примерно как здесь но с контролем с помощью ползунка

Могу ли я как то это сделать?
Какие модули лучше подойдут для этого что бы они не конфликтовали со всеми эффектами adobe illustrator такими как маска градиент текстура и так далее?

Comments

[Froggyweb]

гугли svg animate

[zeni1agent]

Froggyweb, При попытке искать svg animate. Я натыкаюсь на простые анимаций такие как увеличить, повернуть, изменить цвет и так далее. Или постепенное прорисовка контуров. Это не то что мне нужно. Мне нужно менять именно координаты и угол ключевых точек в svg файле. и контролировать саму деформацию при помощи ползунка.

[Froggyweb]

zeni1agent, У меня другой гугл например https://maxwellito.github.io/vivus/
есть масса библиотек тот же GSAP
про анимацию в том числе SVG есть классные материалы у
Yuri Artyukh

[zeni1agent]

Froggyweb, Но в демо https://maxwellito.github.io/vivus/ только прорисовка контура.
GSAP Я не уверен подойдет ли он мне ведь он работает лишь с определенной версткой как здесь

<svg class="hamburger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <line class="line-one" x1="25" y1="42" x2="75" y2="42" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
  <line class="line-two" x1="25" y1="50" x2="75" y2="50" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
  <line class="line-three" x1="25" y1="58" x2="75" y2="58" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4"/>
</svg>

Но у меня

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#ffffff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_2" d="m202.5,52.453125" opacity="0.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
  <path stroke="#000" id="svg_3" d="m281.573542,155.638068l137.661758,-89.932222c-30.558752,37.068633 -80.529223,86.49018 -109.911507,117.676474l105.970337,121.794116l-137.08823,-99.323299c-45.696077,32.774433 -85.509814,66.725334 -137.08823,98.323299c33.112672,-37.414676 87.989981,-90.711673 110.514442,-123.420482c-57.754717,-57.813638 -63.744843,-72.686201 -104.440782,-114.617518c41.264668,24.343028 103.117521,66.333072 134.382212,89.499632z" stroke-width="1.5" fill="#ffff00"/>
 </g>
</svg>

И как он будет взаимодействовать с svg файлами сделанными в illustrator я не знаю.

Yuri Artyukh видео уроки о том как создавать svg с нуля а мне нужно работать уже с существующем svg файлом

[Froggyweb]

zeni1agent, вот тут и ползунок есть и бегемот в звезду превращается,
https://greensock.com/svg-tips/
блин уже все разжевано , осталось только в рот положить.
attributeName="d"
dur="6000ms"
repeatCount="indefinite" бла бла бла в свг - это не то и другая опера

[zeni1agent]

Froggyweb, gsap поддерживает смешивание вместе два морфа?
Потому-что у меня он просто перескакивает с одного морфа на другой.
И точки крепятся к ближайшим доступным.

[Froggyweb]

zeni1agent, https://codepen.io/GreenSock/pen/rOjeRq

[zeni1agent]

Froggyweb, Я как раз и использовал в предыдущем ответе код из https://codepen.io/GreenSock/pen/rOjeRq.
Но так и не понял поддерживает ли gsap двойные(смешанные, промежуточные) морфы или нет.