<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; */
}

// create function to interpolate between the two paths
const interpolator = polymorph.interpolate(
  [
    "M 300 130 C 300 130 251.6 130 150 130 C 48.4 130 0 130 0 130 L 0 0 L 300 0 L 300 130",
    "M 300 130 C 300 130 251.6 160 150 160 C 48.4 160 0 130 0 130 L 0 0 L 300 0 L 300 130"
  ],
  {
    precision: 2,
    optimize: "none"
  }
);

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(draw, 340, false, animDone);
    }
  } else {
    if (!isPlaying && isMorphed) {
      isPlaying = true;
      isMorphed = false;
      tween(draw, 340, true, animDone);
    }
  }
}

function draw(t) {
  // pass a number between 0 and 1. 0.5 is 50% in the middle.
  const d = interpolator(t);
  paths.setAttribute("d", d);
}

function tween(draw, duration = 1000, reverse = false, done) {
  let begin = 0;
  let progress = 0;
  let t = 0;

  requestAnimationFrame(loop);

  function loop(now) {
    begin = begin || now;
    progress = (now - begin) / duration;
    progress = Math.min(1, progress);
    
    t = reverse ? 1 - progress : progress;
    draw(t);

    if (progress < 1) {
      requestAnimationFrame(loop);
    } else {
      done && done();
    }
  }
}