<svg id="motionPath" viewBox="-20 0 557 190">
  <path id="path" fill="none" d="M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74"/>
</svg>

body {
  display: flex;
  align-items: center;
  justify-content:center;
  height: 100vh;
}

#motionPath {
  overflow: visible;
  height: 100%;
  max-width: 100%;
}

#motionPath path {
  stroke-width: 2;
  stroke: gray;
}

#motionPath .astronaut {
  visibility: hidden;
}

gsap.registerPlugin(MotionPathPlugin);

MotionPathHelper.editPath("#path", {
  selected: true,
  draggable: true,
  handleSize: 7,
  onPress: () => console.log("pressed"),
  onRelease: () => {
    console.log("released")
    // get the new path data
    console.log(this.path.getAttribute('d'))
  },
  onUpdate: () => console.log("updated"),
  onDeleteAnchor: () => console.log("deleted anchor")
});