Анимация svg по атрибуту d path

#css #css3 #html5 #svg #анимация

У меня есть следующий эффект, сделанный с помощью svg анимации.

Код svg + путь анимации из исходников:

Волна идет снизу. Моя задача разместить ее сверху. И вроде все хорошо, с помощью
illustrator отразил фигуру по вертикали для изменения отправных точек движения анимации.
Однако сам путь движения изменить не могу, так как при загрузке data-morph-shape в
illustrator, не отражаются точки переходов, а отражается только итог: прямоугольник
меню. Подскажите пожалуйста как изменить path из расчета изменения положения svg файла?



    

    





    

Ответы

Ответ 1

just do it :)




Ответ 2

Патч волны лучше нарисовать самому в векторном редакторе, тогда не
придется ничего подгонять и не придется ломать голову, почему анимация не работает. 




* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}








Теперь рисуем финальное положение волны




* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}








Анимация атрибута d патча волны   




* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}