Анимация кнопки с использованием пути GSAP и SVG ⇐ CSS

[Anonymous]

Добрый вечер.
Я пытался реализовать кнопку, которая использует путь SVG для определения ее формы и последующей анимации при наведении.
Я создал анимацию, и она отлично работает с SVG, но моя проблема заключается в том, как замаскировать кнопку с помощью созданного мной пути. Я пробовал использовать clip-path и webkit-mask, но безуспешно.
Это мой старт СВГ:

Код: Выделить всё

d="M28.306250000000002,6.300625 L28.306250000000002,6.300625 Q49.1875,6.300625,49.1875,27.181874999999998 L49.1875,23.005625000000006 Q49.1875,43.886875,28.306250000000002,43.886875 L21.881249999999998,43.886875 Q1,43.886875,1,23.005625000000002 L1,27.181875 Q1,6.300625,21.881249999999998,6.300625 Z">

Можно ли сделать SVG адаптивным на основе кнопки ниже? Я все еще новичок в мире интерфейсов и наверняка что-то упускаю из виду, возможно, что-то с viewBox.
Я поместил все в код, если кто-то захочет посмотреть на это и дать мне несколько советов< /p>
https://codepen.io/DavidMartinez76/pen/PwYJGMm
Заранее спасибо всем, кто ответит!!!

Подробнее здесь: https://stackoverflow.com/questions/793 ... d-svg-path