Как сделать анимированную трансформацию svg при hover?

Question

[NezinQ]

У меня есть несколько патчев от https://www.blobmaker.app/ ,при ховере у меня меняется форма этих свг.

.basic--bubble:hover  #bubble{
  d: path("...");
}

Как при изменении сделать такую же плавную трансформацию?

Comments

[RAX7]

.basic--bubble #bubble {
  transition: d 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

[NezinQ]

RAX7, не помогло(

Answer 1

[Ivan Bogachev]

Для начала нужно определиться с двумя вещами:

1. Safari не очень дружит с морфингом SVG из CSS. Это относится не только к clip-path, но и к любому изменению контуров в самих SVG. Поэтому вариант делать это на CSS - такой себе вариант.
   
2. Для того, чтобы морфинг работал, нам нужно, чтобы контуры в SVG имели одинаковую структуру. Это первое правило морфинга. Почему это так, и в чем смысл морфинга в целом - можно почитать тут. Если вы делаете капли в blobmaker.app, то вам нужно иметь кляксы, сделанные с одним положением левого ползунка, который меняет количество точек. Правый двигать можно, рандомизировать можно, но количество точек должно быть постоянным.
   

Ну а дальше весь вопрос будет в том, с помощью чего организовать конечный расчет промежуточных значений для наших кривых. Можно взять любую библиотеку для интерполяций значений, например anime.js: