Animate a Button using GSAP and SVG path – Blancer.com Tutorials and projects

Good evening.

I’ve been trying to implement a button that uses a SVG path to define his shape and the subsequent animation on Hover.

I’ve created the animation and it works perfectly on the svg but my issue is how to mask the button with the path I created, I tried using clip-path and webkit-mask without succeding.

This is my starting svg:

<svg class="btnMain_svg" stroke-width="1" width="100%" height="100%" viewBox="0 0 50 50" id="svg-draw" >
    <path class="btnMain_path" 
      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">
    </path>
  </svg>

Is it possible to make the svg responsive based on the button below? I’m still new to the front-end world and i’m surely overlooking something, probably something with the viewBox.
I’ve put everything in a codepen if someone wants to look at it and give me some tips

https://codepen.io/DavidMartinez76/pen/PwYJGMm

Thank in advance to anyone who replies!!