Максим

Вот так :

<defs>
  <linearGradient id="linear" gradientUnits="userSpaceOnUse">
   <stop style="stop-color:#000000;" offset="0"/>
   <stop style="stop-color:#000000;stop-opacity:0;" offset="1"/>
  </linearGradient>
 </defs>

и потом эту конструкцию ставим на fill у rect path etc...
разумеется что stop-color должен быть разный в hex rgba xls

А вы в линию напишите в html все элементы и всё

https://www.jqueryscript.net/slider/jQuery-Waterwh...

Можно обернуть в тег a сам ul
Можно на js повесить click на ul
смотря что вам религия позволяет ...

это не SVG а шляпа какая то ...
тогда уж просто ваш png выложите и всё

Из вашего примера же делается медиа запрос в котором говорится что первое меню flex block а как нужно показать другое т.ь при меньшем разрешение то скрываем первое и.е display: none и показываем второе т.е display:block,flex,grid etc
Но щас проще манипулировать одним это проще

https://codepen.io/topicstarter/pen/KEMqZj - примерно так, манипулировать при медиа запросах можно как угодно ...и делать что угодно ... в общем смотрите и если что то не ясно пишите спрашивайте - постараюсь развёрнуто ответить

https://codepen.io/topicstarter/pen/drPpdv - если надо адаптировать то у .items удалить фиксированый размер и сами уже подстраиваете как должны выглядеть ваши поля ввода

https://cssauthor.com/email-newsletter-templates-psd/

https://codepen.io/topicstarter/pen/qgwqJR так ??

background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255,0.8)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(rgb(255,255,255,0.8), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgb(255,255,255,0.8), rgba(255,255,255,0));
background-image: linear-gradient(rgb(255,255,255,0.8), rgba(255,255,255,0));

Источник : https://autoprefixer.github.io/ru/