JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <svg id="rig" viewBox="-105 197 400 400">
    <g class="movable">
      <path  d="M96.4,338.1v-5.6c20.1-1.1,36.1-17.8,36.1-38.2c0-21.1-17.1-38.3-38.3-38.3c-21.1,0-38.3,17.1-38.3,38.3
                c0,20.4,16,37.1,36.1,38.2v5.6c-22.6,1.7-40.5,29.6-40.5,63.9c0,35.3,19.1,64,42.7,64s42.7-28.7,42.7-64
                C137,367.7,119,339.7,96.4,338.1z"/>
      <circle id="left-arm" cx="76.1" cy="345.6" r="1.3"/>
      <circle id="right-arm" cx="112.3" cy="345.6" r="1.3"/>
      <circle id="left-leg" cx="83.6" cy="462.6" r="1.3"/>
      <circle id="right-leg" cx="105" cy="462.6" r="1.3"/>
    </g>
    <g class="movable">
      <circle id="right-foot" cx="146.1" cy="518.5" r="1.3"/>
      <ellipse class="st0" cx="158.3" cy="526.9" rx="20.2" ry="12.3"/>
    </g>
    <g class="movable">
      <circle id="left-foot" cx="44.4" cy="518.5" r="1.3"/>
      <ellipse class="st0" cx="32.2" cy="526.9" rx="20.2" ry="12.3"/>
    </g>
    <g class="movable">
      <circle id="right-hand" cx="166.2" cy="404.5" r="1.3"/>
      <circle class="st0" cx="166.2" cy="415.6" r="12.3"/>
    </g>
    <g class="movable">
      <circle id="left-hand" cx="24.2" cy="404.6" r="1.3"/>
      <circle class="st0" cx="24.2" cy="415.6" r="12.3"/>
    </g>
  </svg>


</div>

CSS

div {
  max-width: 300px;
  position: relative;
  overflow: hidden;
}

svg {
  width: 100%;
}

JavaScript

import PlainDraggable from "https://cdn.skypack.dev/plain-draggable@2.5.14";
import leaderLineNew from "https://cdn.skypack.dev/leader-line-new@1.1.9";
var pt1 = document.getElementById('300-50');
var pt2 = document.getElementById('50-50');

var leftArm = document.getElementById('left-arm');
var leftHand = document.getElementById('left-hand');
var rightArm = document.getElementById('right-arm');
var rightHand = document.getElementById('right-hand');

var leftLeg = document.getElementById('left-leg');
var leftFoot = document.getElementById('left-foot');
var rightLeg = document.getElementById('right-leg');
var rightFoot = document.getElementById('right-foot');

var characterLeftArm = new leaderLineNew(leftArm, leftHand, {
  endPlug: 'behind'
});

var characterRightArm = new leaderLineNew(rightArm, rightHand, {
  endPlug: 'behind'
});

var characterLeftLeg = new leaderLineNew(leftLeg, leftFoot, {
  endPlug: 'behind'
});

var characterRightLeg = new leaderLineNew(rightLeg, rightFoot, {
  endPlug: 'behind'
});


function fixline(){
  characterLeftArm.position();
  characterRightArm.position();
  characterLeftLeg.position();
  characterRightLeg.position();
}

var elements = document.querySelectorAll(".movable")
for(let i = 0; i < elements.length; i++){
  var draggable = new PlainDraggable(elements[i], {onMove: fixline});
}