Максим

https://jsfiddle.net/qwajboh0/v

Как сделать анимацию svg элемента, чтобы произвольно менялась форма «лепёшки»?
https://codepen.io/topicstarter/pen/QRWWoM
Здесь я совместил smil + css

Если это будет статично в смысле без добавления новых блоков то можно сделать
А если блоки будут добавляться то дизайнеру оторвите ноги что бы ходить не смог на работу и руки что бы ими такую заморочку не рисовал больше, даже по удалёнке или не смог фрилансить

https://pcvector.net/310-animirovannaya-poiskovaya...
https://nisnom.com/kollektsiya-form-poiska-dlya-sa...

.jupiterx-footer { position:relative; z-index:100;}- этого будет достаточно

Для начала надо понять что это не лепёшка а форма которая имеет аттрибуты которые можно анимировать в smil
Для использования этой не хитрой техники нужно сохранить несколько состояний элемента в поле values="" где их перечислить через ;

https://codepen.io/topicstarter/pen/QRWWoM

https://codepen.io/topicstarter/pen/YMmWRW дальше нету исходных данных , вот так добавьте ваш html а то не ясно что должно быть menu.slideToggle();

$(кнопка).on("click", function(){
  $("блок который надо показать").toggleClass("show");
})

в css пишем

.show{
  display: block;
}

https://codepen.io/topicstarter/pen/RdNRXo

не submenu: hover
а dropdown:hover submenu

А лого у вас это что ? изображение или текст какой то ?

Я только для canvas не знаю как текст оформлять , задал вопрос, в общем три примера: css svg canvas.