Edit in JSFiddle

<svg id="svg-morph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2315.16 1186.97" width="330.74" height="169.57">
  <path id="animated-path" d="M1.7,942.6c118.3-396.2,260.1-504.7,371-527.1c210.6-42.6,333.1,219.8,596.5,189.6c267.8-30.8,331-324,517.8-300.6c235.5,29.6,453.1,522.5,453.1,522.5" fill="none" stroke="#8d2847" stroke-width="10"/>
</svg>
body {
  margin: 0;
  padding: 0;
  height: 400vh;
}

#svg-morph {
  position: fixed;
}
const animatedPath = document.querySelector('#animated-path');

const interpolator = polymorph.interpolate(
	['M1.7,942.6c118.3-396.2,260.1-504.7,371-527.1c210.6-42.6,333.1,219.8,596.5,189.6c267.8-30.8,331-324,517.8-300.6c235.5,29.6,453.1,522.5,453.1,522.5',
  'M1.2,945.6C221.8,493,396.8,407.9,513.1,409.3c183.3,2.2,236.2,219.5,444.9,225.5c247.8,7.1,333.8-294.7,600.3-316.9c172.4-14.4,327.3,96,442.9,210.3'],
  {
   optimize: 'fill',
   precision: 2
});

function onScroll(event) {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollBottom = (document.documentElement.scrollHeight || document.body.scrollHeight) - document.documentElement.clientHeight;
  const scrolled = scrollTop / scrollBottom;
	
  const path = interpolator(scrolled);
  animatedPath.setAttributeNS(null, 'd', path);
}

window.addEventListener('scroll', onScroll);