<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 108 108"
   height="80vh"
   width="90vw"
   id="jacob"
   version="1.1">
  <metadata
     id="metadata875">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs873" />
  <g
     style="display:inline"
     id="ears">
    <path
       id="path1016"
       d="m 77.832696,45.987501 c 0,0 1.668797,-3.337594 2.736827,-2.603324 1.06803,0.734271 2.269564,1.06803 0.467263,6.408181 -1.802301,5.340151 -2.736827,10.480046 -2.736827,10.480046 z"
       style="fill:#f6edd8;fill-opacity:1;stroke:#000000;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path1018"
       d="m 29.370829,47.589546 -0.467264,-4.272121 c 0,0 -3.671353,-3.070586 -2.269564,3.404346 1.40179,6.474933 4.138617,8.944753 4.138617,8.944753 l -1.869053,-12.082091 -0.06675,-0.267008 -0.200255,0.200256"
       style="fill:#f6edd8;fill-opacity:1;stroke:#000000;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
  <g
     style="display:inline"
     id="face">
    <path
       id="face-shape"
       d="M 56.967737,8.2709445 C 22.446141,8.5550729 29.123157,46.628274 28.270772,58.277536 27.418387,69.926799 39.184103,93.42704 55.973287,93.793582 62.782093,93.942232 86.026767,68.472492 78.84562,48.333044 78.336612,46.905536 90.068691,14.805897 56.967737,8.2709445 Z"
       style="fill:#f6edd8;fill-opacity:1;stroke:#000000;stroke-width:0.40000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
  <g
     style="display:inline"
     id="mouth">
    <path
       id="lips"
       d="m 57.273116,67.147848 c 0,0 -0.600767,1.001278 -2.069309,0.934526 -1.468541,-0.06675 -2.202812,-1.06803 -2.202812,-1.06803 0,0 -8.540625,1.302008 -10.213038,0.534015 -1.672413,-0.767993 7.771114,9.564784 11.281068,9.078256 6.74194,-0.934527 11.898728,-7.800855 10.813805,-8.010226 z"
       style="fill:#ffd5d5;stroke:#000000;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="mouth-space"
       d="m 44.857265,68.749893 6.074422,0.06675 c 0,0 2.937083,2.136059 5.073143,1.935803 2.13606,-0.200255 5.874166,-1.401788 5.874166,-1.401788 l 2.336315,-0.267008 c 0,0 -8.810575,6.638297 -11.481323,4.872887 z"
       style="display:inline;fill:#000000;stroke:#000000;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="teeth"
       d="m 46.392559,69.083652 c 0,0 0.600767,1.935804 2.336316,2.269563 1.735549,0.33376 1.535293,1.869053 2.870331,1.869053 1.335037,0 2.937082,-0.267008 2.937082,-0.267008 0,0 2.670076,1.068031 3.471098,0 0.801023,-1.06803 1.535294,-0.801022 2.46982,-1.201533 0.934526,-0.400512 1.535293,-1.468542 1.535293,-1.468542 l 1.134782,-0.600766 -0.133503,-0.467263 -2.403068,-0.133504 c 0,0 -2.736827,1.201533 -5.406903,0.934526 -2.670075,-0.267008 -4.27212,-1.201533 -4.27212,-1.201533 z"
       style="display:inline;fill:#ffffff;stroke:#000000;stroke-width:0.1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
  <g
     style="display:inline"
     id="hair">
    <path
       id="path959"
       d="M 55.326584,1.5189758 C 34.819199,3.2973198 27.648742,19.605634 25.712685,37.536389 c -0.426192,4.830182 3.695518,8.38158 3.695518,8.38158 0,0 4.544919,-24.150081 12.642578,-30.542969 1.795857,-1.417782 3.549973,-2.393474 5.203125,-3.078125 1.964454,-0.355907 4.06707,-0.245922 5.167969,1.373047 2.415091,3.551605 6.819386,8.664782 12.501953,7.24414 3.256942,-0.814235 5.668753,-1.065552 7.138672,-0.759765 0.03705,0.01691 0.06829,0.03388 0.105469,0.05078 0.471082,0.214128 0.908139,0.470929 1.324219,0.751953 0.153624,0.229046 0.238281,0.496486 0.238281,0.810547 0,1.906844 2.477497,4.067332 3.558593,3.742188 3.449311,6.952496 2.408204,17.283203 2.408204,17.283203 l 2.820312,1.972656 c 0,0 2.294408,-4.814246 2.152344,-11.775391 C 84.532297,26.246625 76.125379,0.32727844 55.326584,1.5189758 Z"
       style="fill:#312c29;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="mustache"
       d="m 54.647242,64.958791 c -1.97771,0.05204 -2.914519,-1.197035 -2.914519,-1.197035 -2.099713,1.161773 -6.148167,2.040245 -9.836504,2.18589 0,0 9.055829,1.925665 10.096729,1.092945 1.040899,-0.83272 2.602249,-1.24908 2.602249,-1.24908 l 2.0818,0.31227 c 0,0 1.56135,0.260225 3.070654,0.62454 1.509305,0.364315 7.130164,-0.260225 7.910839,0.572495 0.780675,0.83272 0.260225,2.446114 0.31227,2.237935 0.05205,-0.20818 2.0818,-3.43497 -1.821574,-4.007465 -3.903375,-0.572495 -6.453579,-1.97771 -6.453579,-1.97771 0,0 -3.070655,1.35317 -5.048365,1.405215 z"
       style="display:inline;fill:#754b23;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:1" />
    <path
       id="beard"
       d="m 41.115544,66.780366 c 0,0 0.265199,12.396743 -2.70634,13.323518 -2.989136,0.932263 -9.264008,-14.364418 -9.264008,-15.457363 0,-1.092945 1.0409,5.776994 3.018609,9.940594 1.97771,4.163599 10.304909,17.955522 22.119122,19.100512 C 65.0421,94.730366 74.892744,74.84734 74.892744,74.84734 c 0,0 -4.423824,5.204499 -5.776994,3.382924 -1.35317,-1.821574 -1.717485,-3.851329 -1.717485,-3.851329 0,0 -2.185889,13.427608 -7.026074,13.375563 -4.840184,-0.05204 -3.747239,-7.650614 -3.747239,-7.650614 0,0 -0.260225,0.468405 -1.45726,0.41636 -1.197035,-0.05205 -2.029755,-0.52045 -2.029755,-0.52045 0,0 0.20818,8.327199 -3.643149,7.858794 -3.85133,-0.468405 -9.159919,-0.62454 -8.379244,-21.078222 z"
       style="fill:#754b23;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="eyebrow2"
       d="m 61.745492,40.046583 c 0,0 1.735549,2.670075 4.672632,1.201534 2.937082,-1.468541 7.008947,-1.935805 7.743218,-0.267008 0.734271,1.668798 0.534015,-0.400511 0.534015,-0.400511 0,0 0.801023,-4.806135 -12.949865,-0.534015 z"
       style="fill:#000000;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
    <path
       id="eyebrow1"
       d="m 34.71098,38.578041 c 0,0 6.675187,-1.668796 9.211759,-0.267007 2.536572,1.40179 3.604602,3.53785 4.071865,3.404346 0.467263,-0.133504 1.001278,-2.736827 1.001278,-2.736827 0,0 -5.540406,-4.739384 -14.284902,-0.400512 z"
       style="fill:#000000;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
  <g
     style="display:inline"
     id="glasses">
    <path
       id="path881"
       d="m 39.228516,37.330078 c -1.346835,0.03873 -4.46703,0.352039 -7.873047,2.228516 -1.58853,0.875169 -3.96875,0.554687 -3.96875,0.554687 l -0.476563,3.253907 c 0,0 2.460515,0.08032 2.857422,2.779296 0.396908,2.698973 3.969939,10.557473 9.447266,10.875 5.477327,0.317526 7.460637,-0.713982 9.207031,-2.61914 1.746394,-1.905157 2.411023,-2.747934 3.8125,-7.302735 0.137563,-0.447082 -0.05832,-2.777571 -0.216797,-3.478515 0.250192,-0.764059 1.049531,-1.761718 3.548828,-1.761719 2.640116,0 3.414642,0.906492 3.640625,1.541016 l 0.0918,0.603515 c -0.140872,2.222662 -0.357996,4.517347 0.22461,6.695313 0.867778,1.703269 2.141757,3.243797 3.716796,4.345703 2.838279,1.942881 6.572519,2.21518 9.824219,1.30664 4.106223,-1.238981 6.988313,-5.106557 7.892578,-9.18164 0.328393,-1.144277 -0.188323,-4.525061 1.560547,-4.404297 0.04318,-0.7359 0.25,-2.212891 0.25,-2.212891 C 79.769818,40.12513 77.544636,38.773152 75.25,38.349609 69.678419,37.355237 63.862887,38.143695 60.570312,39.726562 c 0,0 -3.097629,1.417969 -5.320312,1.417969 -1.473038,0 -2.357046,-0.272471 -3.324219,-0.554687 -3.33256,-3.500516 -11.996094,-3.25586 -11.996093,-3.25586 0,0 -0.252228,-0.01685 -0.701172,-0.0039 z m 1.482422,1.0625 c 1.008393,-0.0012 1.679687,0.05469 1.679687,0.05469 0,0 8.969733,0.554168 8.414063,8.730468 -0.437703,6.44048 -6.748279,8.732286 -10.558594,8.494141 -6.577747,-0.411109 -9.075245,-6.8677 -8.810547,-12.779297 0.178609,-3.988923 6.250209,-4.496279 9.275391,-4.5 z m 31.921874,0.855469 c 8.185737,0.1454 7.717883,5.815274 7.142579,7.65625 -0.613659,1.963708 -1.130835,9.061709 -10.001953,8.898437 -10.002638,-0.184098 -9.083354,-8.161168 -8.837891,-11.597656 0.245464,-3.436489 1.472915,-4.787424 9.941406,-4.910156 0.625165,-0.04219 1.210144,-0.05658 1.755859,-0.04687 z"
       style="fill:#570e0e;fill-opacity:1;stroke:#000000;stroke-width:0.177;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
  <g
     id="nose">
    <path
       id="path989"
       d="m 51.532454,53.864223 c -0.33376,0 -3.804858,1.935805 -3.804858,3.871609 0,2.536572 -0.06675,4.472376 2.46982,4.472376 2.622932,0 1.869053,1.468542 4.60588,1.802301 2.736827,0.333759 3.337594,-0.667519 4.472376,-1.735549 1.134782,-1.06803 2.603324,-0.534015 2.603324,-0.534015 0,0 2.723093,-2.316615 -0.06675,-5.406902 -4.338873,-4.806136 -3.270843,-7.0757 -3.270843,-7.0757 v 0"
       style="fill:none;stroke:#000000;stroke-width:0.30000001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path991"
       d="m 59.475929,61.140178 c 0,0 1.335037,-1.802301 0.934525,-3.003835 -0.400511,-1.201534 1.668797,2.670076 1.06803,2.937083 -0.600767,0.267008 -2.002555,0.06675 -2.002555,0.06675 z"
       style="display:inline;fill:#000000;fill-opacity:0.43283584;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path993"
       d="m 58.14089,44.385455 v 3.003835 c 0,0 0.844616,-0.619729 1.001278,-2.002556 0.156663,-1.382828 -1.001278,-1.001279 -1.001278,-1.001279 z"
       style="display:inline;fill:#000000;fill-opacity:0.43283584;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path1013"
       d="m 48.795627,60.606163 c 0,0 0.600766,0.934526 1.668797,0.06675 1.06803,-0.867775 0.400511,1.001278 0.400511,1.001278 0,0 -1.268286,0.934527 -2.069308,-1.06803 z"
       style="fill:#000000;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:0.43137255;stroke-miterlimit:4;stroke-dasharray:none" />
  </g>
  <g
     id="eyes">
    <path
       id="path1021"
       d="m 70.156229,45.25323 2.603324,2.336316 0.934526,-0.267008 c 0,0 -0.734271,-1.535293 -3.53785,-2.069308 z"
       style="fill:#000000;fill-opacity:0.43137255;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="path1023"
       d="m 63.8148,48.45732 c 0,0 0.801023,2.002557 2.536572,2.870331 1.735549,0.867775 -2.002557,0.267008 -2.603324,-1.668797 -0.600767,-1.935804 0.06675,-1.201534 0.06675,-1.201534 z"
       style="fill:#000000;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:0.43137255" />
    <path
       id="path1027"
       d="m 35.378498,47.322538 c 0,0 8.878,0.667519 10.480046,0.06675 1.602045,-0.600767 1.602045,-2.336316 1.602045,-2.336316 0,0 1.201534,2.803579 -3.87161,3.003835 -5.073143,0.200256 -8.210481,-0.734271 -8.210481,-0.734271 z"
       style="fill:#000000;stroke:#000000;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;fill-opacity:0.43137255" />
    <path
       id="left-eye"
       d="m 72.759553,47.456042 c 0,0 -8.316939,1.776983 -8.878001,-0.467263 -0.400511,-1.602045 0.333759,-1.869053 0.333759,-1.869053 0,0 5.073144,-3.404346 8.9,2.336316 z"
       style="fill:#ffffff;stroke:#000000;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <ellipse
       ry="1.768925"
       rx="2.0693083"
       cy="46.054253"
       cx="68.152397"
       id="left-pupil"
       style="display:inline;fill:#000000;fill-opacity:1;stroke:#000006;stroke-width:0.2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <path
       id="right-eye"
       d="m 36.446528,46.588268 c 0,0 1.935805,-3.137339 5.940918,-3.137339 4.005113,0 4.939639,0.534011 5.073143,1.602043 0.133504,1.068032 -0.867775,2.870333 -11.014061,1.535296 z"
       style="display:inline;fill:#ffffff;stroke:#000000;stroke-width:0.2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <ellipse
       ry="1.768925"
       rx="2.0693083"
       cy="45.353359"
       cx="42.654457"
       id="right-pupil"
       style="display:inline;fill:#000000;fill-opacity:1;stroke:#f6edd8;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>
<h1>I'm Fascinated By Your Mouse.</h1>
@import url('https://fonts.googleapis.com/css?family=Calistoga&display=swap');

body {
  background: linear-gradient(45deg, lime, purple 70%);
  height: 100vh;
  max-width: 100vw;
  text-align: center;
}

h1 {
  font-family: 'Calistoga', cursive;
  font-size: 4rem;
  color: white;
  text-shadow: 1px 4px 4px #000000;
}

@media only screen and (max-width: 1000px) {
  #jacob {
    height: 70vh;
  }
  
  h1 {
    font-size: 2rem;
  }
}
// the SVG
const jacob = document.getElementById('jacob')
// the blacks of the eyes
let rightEye = document.getElementById('right-pupil')
let leftEye = document.getElementById('left-pupil')
// the whites of the eyes
const reBB = document.getElementById('right-eye').getBoundingClientRect()
const leBB = document.getElementById('left-eye').getBoundingClientRect()
// event listener if mouse moves in the SVG
jacob.addEventListener('mousemove', e => {
  let x = e.clientX
  let y = e.clientY
 // should probably be a switch statement, but I find it easier to debug with if statements 
  if (x < reBB.left) {
    rightEye.setAttribute('cx', '40');
    leftEye.setAttribute('cx', '66');
  } else if (x < leBB.right) {
    rightEye.setAttribute('cx', '42.654457')
    leftEye.setAttribute('cx', '68.152397')
  } else {
    rightEye.setAttribute('cx', '45')
    leftEye.setAttribute('cx', '70')
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.