<div class="opt_1">
  <label>step</label>
  <input type="range" min="0" max="100" step="1" value="0" class="step">
</div>
<div class="opt_2">
  <label>fact</label>
  <input type="range" min="0" max="100" step="1" value="50" class="factor">
</div>

<svg width="580" height="400" id="morph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
  
  <path id="path"
    d="M366.5,74.5c1.19,58.5-.19,314.24-.19,314.24V678.5H987V74H670.89Z" transform="translate(-365.81 -73.5)" fill="#ffff00"/>
</svg>

const paths = {
  p1:
"M366.5,74.5c1.19,58.5-.19,314.24-.19,314.24V678.5H987V74H670.89Z",
  p2:
"M366.5,74.5c43,68,289,295,289,295l-289.19,309,317.19-279L987,678.5l-270.5-308L987,74,682.5,335.5Z",
  p3:
    "M1037.5,403.5c-79.07-14.86-332-37-332-37l-35-359-16,358-352,28,351.21,15.83L682.5,751.5l20-343.21Z"
};


const interpolators = [
  polymorph.interpolate([paths.p1, paths.p2], {
    optimize: "none",
    precision: 2
  }),
  polymorph.interpolate([paths.p2, paths.p3], {
    optimize: "none",
    precision: 2
  })
];

const morphPathEl = document.getElementById("path");
const stepEl = document.querySelector(".step");
const factorEl = document.querySelector(".factor");

stepEl.addEventListener("input", onStepChange);
factorEl.addEventListener("input", onFactorChange);

let step = stepEl.value / (stepEl.max - stepEl.min);
let factor = factorEl.value / (stepEl.max - stepEl.min);

function onStepChange(e) {
  step = parseInt(e.target.value, 10) / (stepEl.max - stepEl.min);
  const intp = step < factor ? interpolators[0] : interpolators[1];
  
  let s;
  if (step < factor) {
    s = step / (factor || 0.0001);
  } else {
    s = (step - factor) / (1 - factor || 0.0001);
  }

  morphPathEl.setAttribute("d", intp(s));
}

function onFactorChange(e) {
  factor = parseInt(e.target.value, 10) / (stepEl.max - stepEl.min);
  const intp = step < factor ? interpolators[0] : interpolators[1];

  let s;
  if (step < factor) {
    s = step / (factor || 0.0001);
  } else {
    s = (step - factor) / (1 - factor || 0.0001);
  }
  
  morphPathEl.setAttribute("d", intp(s));
}