Используйте функцию плавности : https://easings.net/ru
В каждом браузере есть такая возможность ..открыть инструменты разработчика а hide/show имеют настройки в том числе easing
Это только дописать в самом SVG надо вот это : preserveAspectRatio="none" ну и разумеется что svg это обычное изображение ну и указать ему размер в vw vh
Можно в SVG но я чуток не в том состоянии
Наложить маску ...цвета в маске SVG отличаются прозрачностью ....к примеру #fff полностью прозрачный а #000 не прозрачный ...и потому надо искать промежуточные варианты
Абсолютным позиционированием
К примеру имеем Родительский Блок с изображением он имеет относительное позиционирование,
И имеем вложенный блок который расположен абсолютно т.е top:0; left:0; и имеет ширину и высоту в 100% внутри содержимое можно располагать как угодно
https://codepen.io/topicstarter/pen/KEMqZj - примерно так, манипулировать при медиа запросах можно как угодно ...и делать что угодно ... в общем смотрите и если что то не ясно пишите спрашивайте - постараюсь развёрнуто ответить
https://codepen.io/topicstarter/pen/drPpdv - если надо адаптировать то у .items удалить фиксированый размер и сами уже подстраиваете как должны выглядеть ваши поля ввода