<div style="text-align: center">
  <p style="width: 60%; margin: 30px auto;">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, qui iure consequuntur ducimus iste labore perferendis, laudantium ad explicabo ea numquam. Dolores nisi eveniet enim aliquid cupiditate fuga placeat! Ducimus sit eius harum fugit. Veritatis hic placeat veniam dignissimos! Voluptates atque eligendi accusamus dolorem, suscipit provident vitae ut ab deserunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere sint natus harum aliquid quaerat inventore rem! Fuga, repellendus corrupti laborum dolorem suscipit eligendi quis in? At voluptas itaque recusandae suscipit amet! Expedita nam consequatur obcaecati quisquam provident corporis distinctio consequuntur quas molestias excepturi, quam, laboriosam assumenda pariatur cupiditate explicabo ducimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, qui iure consequuntur ducimus iste labore perferendis, laudantium ad explicabo ea numquam. Dolores nisi eveniet enim aliquid cupiditate fuga placeat! Ducimus sit eius harum fugit. Veritatis hic placeat veniam dignissimos! Voluptates atque eligendi accusamus dolorem, suscipit provident vitae ut ab deserunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere sint natus harum aliquid quaerat inventore rem! Fuga, repellendus corrupti laborum dolorem suscipit eligendi quis in? At voluptas itaque recusandae suscipit amet! Expedita nam consequatur obcaecati quisquam provident corporis distinctio consequuntur quas molestias excepturi, quam, laboriosam assumenda pariatur cupiditate explicabo ducimus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, qui iure consequuntur ducimus iste labore perferendis, laudantium ad explicabo ea numquam. Dolores nisi eveniet enim aliquid cupiditate fuga placeat! Ducimus sit eius harum fugit. Veritatis hic placeat veniam dignissimos! Voluptates atque eligendi accusamus dolorem, suscipit provident vitae ut ab deserunt. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere sint natus harum aliquid quaerat inventore rem! Fuga, repellendus corrupti laborum dolorem suscipit eligendi quis in? At voluptas itaque recusandae suscipit amet! Expedita nam consequatur obcaecati quisquam provident corporis distinctio consequuntur quas molestias excepturi, quam, laboriosam assumenda pariatur cupiditate explicabo ducimus.
  </p>
</div>
<svg class="svg" viewBox="0 0 300 160" preserveAspectRatio="none">
  <path class="path" d="M0,0 300,0 300,130 Q150,130 0,130z"/>
</svg>

html,body{
/*  height: 1000px;  */
 margin: 0;
}

.path{
  stroke-width: 1;
  stroke: none;
  fill: lightblue;
/*   transition: 0.34s linear; */
}

let svg = document.querySelector(".svg");
let paths = document.querySelector(".path");
window.addEventListener("scroll", pathes);

let isPlaying = false;
let isMorphed = false;
const animDone = () => (isPlaying = false);

function pathes(e) {
  let svgRect = svg.getBoundingClientRect();
  let bottomOffset = window.innerHeight - (svgRect.top + svgRect.height);
  let y = e.pageYOffset || window.scrollY;

  if (y >= 20 && bottomOffset > 0) {
    if (!isPlaying && !isMorphed) {
      isPlaying = true;
      isMorphed = true;
      tween(paths, {
        d: "M0,0 300,0 300,130 Q150,160 0,130z"
      }, 340, false, animDone);
    }
  } else {
    if (!isPlaying && isMorphed) {
      isPlaying = true;
      isMorphed = false;
      tween(paths, {
        d: "M0,0 300,0 300,130 Q150,130 0,130z"
      }, 340, true, animDone);
    }
  }
}

function tween(el, props, duration = 1000, reverse = false, done) {
  el.style.transition = `${duration}ms linear`;

  requestAnimationFrame(() => {
    Object.entries(props)
      .forEach(([attr, val]) => el.setAttribute(attr, val));

    el.addEventListener("transitionend", done, false);
  });
}