SVG Mesh Distortion using D3.js - is it possible?

Question

I'm trying to make a web mesh distortion script in javascript to allow me to warp SVG elements. D3.js was recommended to me but I can't figure out how to distort based on control points.

The effect I'm looking for is a simple version of "AI free distort".

Here is an example of the kind of svg element I am testing it with.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105"  height="500px" width="500px" id="svg8" >
    
  <g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
    <path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
    <path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
  </g>
  <path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
  <g fill="#FFF">
    <circle cx="36" cy="22" r="2"/>
    <circle cx="59" cy="22" r="2"/>
  </g>
</svg>

If anyone can help it would be most appreciated. Thank you.