Manipulating SVG Anchors with mouse-movement

Question

I'm wondering about the following challenge:

Is it possible to manipulate anchor points of a rather simple svg-shape when moving the mouse?

This is my SVG Shape:

<svg width="696" height="473" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient y2="1.16365" x2="0.68085" y1="0" x1="0" id="paint0_linear">
   <stop stop-color="#F04B8D"/>
   <stop stop-color="#FF985F" offset="1"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <path id="svg_1" fill="url(#paint0_linear)" d="m69.993,15l626.007,-15l0,38.5l-70.063,420l-587.4409,14.5l-38.4961,0l0.00009,-40l69.99291,-418z"/>
  <path id="svg_2" fill="#000000" d="m69.993,15l626.007,-15l0,38.5l-70.063,420l-587.4409,14.5l-38.4961,0l0.00009,-40l69.99291,-418z"/>
 </g>
</svg>

The goal is to capture the offsetX and offsetY of the mouseposition somehow applied to each of the outer anchors of the shape and when moving the cursor on the screen the shape should be slightly skewed/tilted.

Any idea on how to make something like this happen? I don't even know what to google for here.

Thanks, Matt