<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
<button id="cta">See how</button>

<svg id="shape1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2060.3 664">
  <path id="small" d="M0,558.3H2060.3" fill="red" fill-opacity="0" stroke="#ab7860" />
  <path id="large" d="M2060.2,62.3C1196-64.1,1048.4,283.4,942.1,405.2,850.5,510.3,690.1,701.1,0,697.8" fill="red" fill-opacity="0" stroke="#ab7860" />
</svg>

body {
  font-size: 16px;
  padding: 12%;
  font-family: 'Montserrat';
  background-color: #FFF2E4;
  overflow: visible;
}

p {
  font-size: 1.25rem;
  line-height: 142.5%;
  margin-bottom: 20px;
  max-width: 500px;
}

button {
  background: #2461FF;
  font-weight: 500;
  border: none;
  margin-top: 30px;
  color: white;
  font-family: 'Montserrat';
  text-transform: uppercase;
  padding: .6em 4em;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 1px 4px 6px #DACBBC;
}

#large {
  visibility: hidden;
}

svg {
  position: absolute;
  width: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}
#shape1 {
  width: 100%;
  min-height: 700px;
}

clickElement = document.getElementById("cta");
small = document.getElementById("small");
large = document.getElementById("large");

gsap.to(small, 1, {ease: Elastic.easeOut.config(1, 0.3)});

clickElement.addEventListener('mouseover', function() {
   gsap.to(small, 1, {morphSVG: "#large", ease: Power4.easeOut})
});

clickElement.addEventListener('mouseout', function() {
   gsap.to(small, 1, {morphSVG: "#small", ease: Power4.easeOut})
});