<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 + ")");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js