<svg class="contenedor" height="250" width="560">
  <circle id="izq" cx="250" cy="125" r="50" fill="#fa7514"/>
  <circle id="der" cx="310" cy="125" r="50" fill="#fa7514"/>
  <rect id="rec" x="250" y="75" width="60" height="100" fill="#fa7514"/>
  <polygon id="nariz" points="280,110 270,130 290,130" fill="#2e294e"/>
  <polygon class="ojos" points="240,90 225,120 255,120" fill="#2e294e"/>
  <polygon class="ojos" points="320,90 305,120 335,120" fill="#2e294e"/>
  <polygon id="tallo" points="260,50 300,50 290,85 270,85" fill="#6f2f23"/>
  <path  id="boca" d="M225 135 H240 V145 H260 V135 H300 V145 H320 V135 H335 C 325,180 235,180 225,135 Z" fill="#2e294e"/>
</svg>

.contenedor {
  display: block;
  margin: 0 auto;
  background-color: #2e294e;
}

$(".contenedor").mousemove(function(event) {
  let posx = event.pageX - $(this).offset().left;
  let posy = event.pageY - $(this).offset().top;
  let movex = (posx - 280) / 280;
  let movey = (posy - 125) / 125;
  $('.ojos').attr("transform", "translate(" + movex * 15 + "," + movey * 5 + ")");
  $('#nariz').attr("transform", "translate(" + movex * 22 + "," + movey * 5 + ")");
  $('#boca').attr("transform", "translate(" + movex * 18 + "," + movey * 5 + ")");
  $('#tallo').attr("transform", "translate(" + movex * 18 + "," + movey * 5 + ")");
  if (movex > 0) {
    /*desplazar círculo izquierdo*/
    $('#izq').attr("transform", "translate(" + movex * 18 + ")");
    /*reducir y dezplazar rectangulo*/
    $('#rec').attr("transform", "translate(" + movex * 18 + ")");
    $('#rec').attr("width", 60 - (movex * 22));
  } else {
    /*desplazar círculo derecho*/
    $('#der').attr("transform", "translate(" + movex * 18 + ")");
    /*reducir rectángulo*/
    $('#rec').attr("width", 60 + (movex * 22));
  }
});