Moving Eyes with JavaScript

image/svg+xml image/svg+xml

I have tried to make an eye which moves with the mouse using JavaScript. This code uses the mouses' location relative to the centre of the eye and the edge of the page to work out how far to move the iris.
First I made a simple eye with inkscape containing the layer containing an iris. Then I opened the saved image with a text editor and copied it into the html where. Finally I inserted the JavaScript which does the magic.
To make it simpler, I have used classes. To use this in your own code, first import the 'MovingEye' class by inserting <script src="https://raw.githubusercontent.com/avt613/Moving-Eye/master/MouseMoved.js"></script> in the header of the html.
Then initiate the eye by running Eye = new MovingEye('eyeID', 'irisID', 20); in the JavaScript, where 'eyeID' is the ID of the svg/outer eye which contains the iris, `irisID` is the ID of the iris which will move and the last parameter is the maximum percentage the iris can move in the outer eye. (I would recommend keeping that at 20.)
Then set the eye to move when the mouse moves by running 
ActivateEye(Eye);

For an example, here is the code for the two eyes on this page:
<script>
  LeftEye = new MovingEye('SVGRoot', 'layer1', 20);
  RightEye = new MovingEye('SVGRoot1', 'layer1', 20);
  ActivateEye(LeftEye);
  ActivateEye(RightEye);
</script>
To understand how this code works, please look at MouseMoved.js.