Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div id="app">
  <div class="info">
    <p>MouseX: {{ mouseX }}</p>
    <p>Face/Bubble Animation Progress: {{ animationProgress }}</p>
  </div>
  <div class="container-main" @mousemove = "coordinates">
    <div class="container-person">
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-bowie-portrait" viewBox="0 0 588.93921 587.16564" height="587.16565mm" width="588.93921mm" ><defs id="defs2"><linearGradient id="linearGradient991"><stop offset="0" id="stop987" stop-color="#84a6b9"/><stop offset="1" id="stop989" stop-color="#84a6b9" stop-opacity="0"/></linearGradient><linearGradient id="linearGradient3907"><stop id="stop3903" offset="0" stop-color="#bf6700"/><stop id="stop3905" offset="1" stop-color="#bf6700" stop-opacity="0"/></linearGradient><filter id="filter5088" x="-0.40198693" width="1.8039739" y="-0.23929034" height="1.4785807" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="7.3522691" id="feGaussianBlur5090"/></filter><filter
       style="color-interpolation-filters:sRGB"
       id="filter13721"
       x="-0.35095251"
       width="1.701905"
       y="-0.18096858"
       height="1.3619372">
      <feGaussianBlur
         stdDeviation="1.4622311"
         id="feGaussianBlur13723" />
    </filter><filter
       style="color-interpolation-filters:sRGB"
       id="filter13800"
       x="-0.1788"
       width="1.3576"
       y="-0.1788"
       height="1.3576">
      <feGaussianBlur
         stdDeviation="4.0648011"
         id="feGaussianBlur13802" />
    </filter><filter id="filter31264" x="-0.25" width="1.5" y="-0.25" height="1.5" color-interpolation-filters="sRGB"><feGaussianBlur id="feGaussianBlur31238" result="result9" in="SourceGraphic" stdDeviation="1"/><feTurbulence id="feTurbulence31240" baseFrequency="0.015" numOctaves="5" type="fractalNoise" result="result7"/><feComposite id="feComposite31242" in="result9" operator="out" result="result6" in2="result7"/><feGaussianBlur id="feGaussianBlur31244" stdDeviation="2" result="result11"/><feDisplacementMap id="feDisplacementMap31246" result="result4" scale="100" yChannelSelector="G" in2="result11" in="result7"/><feComposite id="feComposite31248" in="result9" operator="in" result="result2" in2="result4"/><feComposite id="feComposite31250" in2="SourceGraphic" operator="in" result="fbSourceGraphic"/><feBlend id="feBlend31252" in2="fbSourceGraphic" mode="multiply" result="fbSourceGraphic"/><feGaussianBlur id="feGaussianBlur31254" stdDeviation="0.5" result="result13"/><feSpecularLighting id="feSpecularLighting31258" result="result12" surfaceScale="15" specularExponent="5" in="result13"><feDistantLight id="feDistantLight31256" azimuth="225" elevation="35"/></feSpecularLighting><feComposite id="feComposite31260" operator="in" result="result2" in="result12" in2="fbSourceGraphic"/><feComposite id="feComposite31262" in2="result2" k3="1" k2="1" operator="arithmetic" result="result4" in="fbSourceGraphic"/></filter><radialGradient gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.76414 .15851 -.07578 1.32139 -573.23338 -121.00727)" r="6.5876875" fy="209.58878" fx="333.84448" cy="209.58878" cx="333.84448" id="radialGradient3909" xlink:href="#linearGradient3907"/><radialGradient xlink:href="#linearGradient991" id="radialGradient993" cx="267.91028" cy="241.07281" fx="267.91028" fy="241.07281" r="6.076169" gradientTransform="matrix(.01729 1.2345 -1.83204 .02566 702.39204 -129.41331)" gradientUnits="userSpaceOnUse"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.4298 .37103 -.61432 -.71163 475.7775 404.3602)"/><linearGradient id="linearGradient1050"><stop offset="0" id="stop1046" stop-color="#7b0e00"/><stop offset="1" id="stop1048" stop-color="#ff429b"/></linearGradient><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.50966 .13674 -.2264 -.84384 398.79161 415.54728)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.51109 -.13127 .21735 -.84622 318.4035 454.92165)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7-5" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.38032 -.36579 .60564 -.6297 238.33195 440.22622)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7-5-6" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.13433 -.5103 .8449 -.22242 157.20053 375.76616)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7-5-6-7" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.18803 -.49304 .81633 .31133 127.42988 261.21366)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7-5-6-7-1" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.39704 -.34757 .57547 .65739 150.63978 173.37475)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7-5-6-7-1-0" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.51876 -.0966 .15996 .85892 222.08942 92.144082)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-2-7-5-6-7-1-0-5" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.49948 .1702 -.28179 .827 321.0774 98.322897)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.56544 .05167 -.08555 -.9362 380.86201 490.44244)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.54272 -.16688 .27631 -.89858 314.28593 460.06735)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6-2" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.30906 -.47631 .78864 -.51172 154.14023 450.22172)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6-2-3" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.03837 -.5665 .93796 -.06352 108.06971 356.44394)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6-2-3-5" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.27217 -.49831 .82507 .45063 101.87622 231.10303)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6-2-3-5-3" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.48631 -.29307 .48524 .8052 146.38623 121.88685)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6-2-3-5-3-5" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.56737 .0219 -.03627 .9394 256.90493 69.212222)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-5-6-2-3-5-3-5-8" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.48792 .32967 -.5287 .83404 374.41761 71.912149)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-3" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.17678 .53958 -.89338 -.2927 529.34083 295.39083)"/><linearGradient xlink:href="#linearGradient1050" id="linearGradient1052-4-3-5-4-9-3-1" x1="448.31567" y1="234.22971" x2="557.02979" y2="234.22971" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.13766 .55086 -.91206 .22793 520.67404 173.00384)"/></defs><path id="rect-bg" fill="#a8a8a8" stroke-width="1.75555682"  d="M0 -1.4210855e-14H588.93921V587.16565H0z"/><g id="whirl-all" opacity="0"><ellipse id="whirl-circle" cx="304.67249" cy="292.07727" rx="234.63812" ry="233.10495" fill="#420400"/><path d="m 563.49923,356.5834 c 27.35657,17.44782 -61.6776,168.51752 -70.12259,173.98332 -9.96784,11.47436 -19.61467,-20.79493 -21.96036,-21.89984 -3.32832,-21.45269 -50.61483,5.51064 -55.4917,-7.9353 48.46437,-45.9571 102.81776,-147.62697 147.57468,-144.14818 z" fill="url(#linearGradient1052-4-3-5-4-9-5-6-2-3-5-3-5-8)"/><path id="whirl-part-8" d="m 552.98108,204.5679 c 31.30825,0.39055 30.35504,167.17096 25.96029,175.82424 -2.74796,14.27475 -26.47146,-6.97834 -28.96602,-6.69559 -13.19642,-15.6758 -39.57281,29.8327 -50.17344,21.4068 18.13549,-61.45559 14.13048,-170.90779 53.17919,-190.53548 z" fill="url(#linearGradient1052-4-3-5-4-9-5-6-2-3-5-3-5)"/><path id="whirl-part-7" d="m 468.17423,72.544071 c 26.3862,-16.856065 117.12161,123.085699 118.19694,132.731259 5.53712,13.44098 -25.95843,8.69454 -27.88855,10.29998 -19.63462,-5.86161 -16.7078,46.65668 -30.19361,45.43094 C 509.72124,199.67989 446.30386,110.38231 468.17424,72.544044 Z" fill="url(#linearGradient1052-4-3-5-4-9-5-6-2-3-5-3)"/><path id="whirl-part-6" d="m 354.87322,26.225675 c 14.28573,-27.8617311 163.20825,47.229516 169.0008,55.016668 11.55943,8.814718 -18.03194,20.598137 -18.88912,22.957797 -19.91124,4.83935 9.09954,48.71546 -3.16419,54.45745 C 454.86162,115.06254 355.06776,69.929309 354.87321,26.225648 Z" fill="url(#linearGradient1052-4-3-5-4-9-5-6-2-3-5)"/><path d="M 211.27352,47.686453 C 208.34269,16.513249 374.28423,-0.22043228 383.35466,3.2321721 397.84029,4.4512761 379.22205,30.294244 379.76769,32.744767 365.57925,47.52873 413.62764,68.93181 406.37306,80.365999 343.34115,68.848009 234.93039,84.434212 211.2735,47.686435 Z" fill="url(#linearGradient1052-4-3-5-4-9-5-6-2-3)"/><path d="M 94.138336,130.24987 C 76.415302,104.43801 213.26661,9.1052917 222.87115,7.7102415 c 13.24968,-5.9804312 9.55179,25.6553595 11.22044,27.5311015 -5.20633,19.81846 47.18581,15.149165 46.4086,28.668245 -60.67592,20.594116 -147.8182,86.942022 -186.361875,66.340292 z" fill="url(#linearGradient1052-4-3-5-4-9-5-6-2)"/><path d="M 62.902093,253.21383 C 32.744249,244.79585 76.497724,83.854111 82.967422,76.619715 89.28921,63.529482 106.75882,90.162361 109.24233,90.529741 117.97032,109.06887 155.14947,71.860665 163.23062,82.726401 129.92047,137.46322 105.68182,244.2729 62.902078,253.21385 Z" fill="url(#linearGradient1052-4-3-5-4-9-5-6)"/><path d="m 69.764089,394.5243 c -31.095696,3.66274 -51.725108,-161.83964 -48.48664,-170.98872 0.878284,-14.51027 27.151723,3.49539 29.588745,2.89231 15.113373,13.83703 35.381201,-34.70114 46.982731,-27.71732 -10.03328,63.28522 8.096745,171.29967 -28.084839,195.81376 z" fill="url(#linearGradient1052-4-3-5-4-9-5)"/><path d="M 166.95333,507.36425 C 143.79459,528.43629 30.718581,405.83765 28.028976,396.51246 20.30042,384.20032 52.145094,383.55689 53.776188,381.64839 c 20.342737,2.45979 8.584286,-48.8089 22.083292,-49.87939 28.66277,57.30733 106.25645,134.60571 91.09385,175.59525 z" fill="url(#linearGradient1052-4-3-5-4-9)"/><path d="m 317.92611,542.95096 c -8.96792,29.99891 -169.08287,-16.68958 -176.19776,-23.29044 -12.97247,-6.56006 13.97533,-23.53985 14.38801,-26.01624 18.69561,-8.38759 -17.82667,-46.24077 -6.815,-54.12192 54.11868,34.30528 160.46738,60.49256 168.62475,103.4286 z" fill="url(#linearGradient1052-4-3-5-4-9-3)"/><path d="m 473.53319,495.12175 c 8.38194,30.16789 -152.00845,75.90117 -161.54555,74.10212 -14.47361,1.35437 -0.70424,-27.36674 -1.67347,-29.68263 11.35913,-17.05426 -39.71051,-29.6492 -34.58588,-42.18346 64.07522,0.22258 168.03868,-34.23632 197.8049,-2.23603 z" fill="url(#linearGradient1052-4-3-5-4-9-3-1)"/></g><g id="bowie-pierrot"><path id="neck" d="m 204.55608,440.6733 c 45.20444,-7.00292 40.06835,-78.33486 43.9846,-109.47252 50.05811,50.66817 77.16199,37.90306 115.69816,-0.63312 -7.88328,66.98841 -9.52809,91.41018 33.7291,112.40282 -15.91521,99.67771 -208.10729,86.52453 -193.41186,-2.29718 z" fill="#fff" stroke="#9292c6" stroke-width="1.17"/><path id="hat" d="m 215.23065,279.6537 c -23.61576,-42.60651 -10.65804,-74.59121 23.08099,-96.39711 17.63594,-40.27117 29.63323,-73.66464 65.16987,-79.42578 41.87358,-3.35142 52.082,38.51094 68.22471,83.15947 33.24915,17.88444 45.49456,78.57844 9.50395,95.37883 -23.64667,-24.63431 -52.26686,-61.09274 -74.67381,-79.76521 -29.36082,28.46854 -47.90982,36.9073 -91.30571,77.0498 z" fill="#fffefb" stroke="#9292c6" stroke-width="1"/><path id="hair" d="m 215.23065,279.6537 c -0.83234,-52.8794 30.71704,-81.49513 79.46989,-83.23645 19.45242,-0.69479 36.77486,-0.26963 61.05264,11.61747 35.81294,20.72327 34.12544,78.66954 18.32903,82.82005 -35.39272,54.98075 -112.10943,79.41815 -158.85156,-11.20107 z" fill="#ffd336" stroke="#bf1f00" stroke-width="1"  /><path id="forehead" d="m 238.2955,230.82512 c 22.77624,-37.60481 71.48415,-15.74517 65.92766,-17.22959 34.52084,-9.66131 54.99942,0.66263 62.88281,22.08098 -33.37749,170.84512 -160.83116,137.26623 -128.81047,-4.85139 z" fill="#fff0bb" stroke-width="1.17019403"  />
  <g
     transform="translate(140,164)"
     id="bubble-blow" opacity="0">
    <circle
       style="opacity:0.25;fill:#b178ff;"
       cx="30.119976"
       cy="158.27106"
       r="27.280544" />
    <path
       style="fill:#ffffff;fill-opacity:1;filter:url(#filter13721)"
       d="M 20.859558,140.50618 C 12.630597,140.02726 5.427814,166.5539 13.678011,162.4288 37.108133,144.51716 29.818762,134.4156 20.859558,140.50618 Z"/>
    <circle
       r="10.553344"
       style="opacity:0.25;fill:#ffe9ac;fill-opacity:1;filter:url(#filter13800)"
       cx="30.119976"
       cy="158.27106" />
    <circle
       r="27.280544"
       transform="matrix(0.81209454,0,0,0.81209454,5.4585255,29.538813)"
       cy="157.20039"
       cx="29.049318"
       style="opacity:0.25;fill:#ffe9ac;fill-opacity:1;filter:url(#filter13800-7)" />
  </g>
  <path
     opacity="0"
     style="fill:#ffffff;stroke:#9292c6;stroke-width:1.1;"
     d="m 301.70307,219.46413 c -26.03907,0.081 -52.21238,3.54329 -63.40699,11.36003 -18.28572,37.10096 -2.22489,22.76118 -14.91847,65.12109 -17.76295,-33.91071 -12.17038,2.52058 -2.7156,13.57695 5.37861,6.5951 5.39879,25.16156 14.59549,26.47539 3.92977,12.58571 4.89434,34.04421 11.20087,39.03431 9.06193,8.9349 15.58702,16.77887 24.77833,24.43832 9.05436,10.1598 21.84818,10.52234 36.65773,10.52234 17.90549,-3.36473 26.95874,-18.34565 37.67624,-27.15389 8.3376,-6.56188 15.55954,-26.61021 17.65059,-43.10746 17.43837,1.11604 4.95295,-2.42617 31.56657,-49.89566 4.08651,-20.38374 -14.69877,-6.22688 -20.70521,1.01854 2.76971,-26.20233 -0.22553,-45.99108 -11.8799,-63.47261 -11.69641,-5.08523 -36.03873,-7.99343 -60.49965,-7.91735 z"
     id="face-overlay" />
  <path
     id="lips-2"
     opacity="0"
     d="m 175.09042,311.30549 c 7.93146,5.66026 -7.43383,-13.74647 27.69859,19.66215 -8.64171,3.07654 -14.29927,5.50784 -19.55545,6.20889 -6.45195,0.86053 -11.53616,-0.63168 -11.44928,-3.6233 -2.84475,-10.62624 10.70908,-10.98867 12.14198,-9.44819 -9.8713,-5.63948 -10.39003,-10.90346 -8.83584,-12.79955 z"
     style="fill:#bf1f00"/>
  <path id="eye-rect-left" fill="#fff0e1" stroke-width="1.0583334" d="M245.33652 275.76508H286.27763300000004V296.235636H245.33652z"/><g id="eye-left" transform="translate(0 73.965767)" ><ellipse ry="4.96" rx="6.02" cy="211.42079" cx="264.71463" id="path9852" fill="url(#radialGradient993)" stroke="#002047" stroke-width=".79756838"/><circle r="2.6317945" cy="210.76285" cx="264.71463" id="path38062" stroke-width="1.0583334"/><circle r="1.5352135" cy="211.20149" cx="266.90784" id="path3806-92" fill="#fff" stroke-width=".61736119"/></g><path id="eye-rect-right" fill="#fff0e1" stroke-width="1.1"  d="M313.4946 277.44742H354.435716V297.917978H313.4946z"/><g id="eye-right" transform="translate(0 73.965767)" ><path id="path4818" d="m 329.27793,208.23363 c -3.61136,7.65196 5.51652,10.22667 9.42914,6.73861 3.50165,-3.14387 2.41054,-9.91533 -9.42914,-6.73861 z" fill="url(#radialGradient3909)" stroke="#8d1700" stroke-width="1.2" /><path id="path4820" d="m 331.31448,208.91248 c -3.48815,8.75967 11.71167,5.95993 5.77025,-0.33943 -1.11662,-1.18389 -4.80854,-1.07532 -5.77025,0.33943 z" stroke-width="1.17019403" /><ellipse cx="337.36316" cy="210.54353" rx="1.3707263" ry="1.3158972" id="path3806-9-5" fill="#fff" stroke-width=".4409723"/></g><path d="m 301.70253,219.4649 c -26.03907,0.081 -52.21238,3.54329 -63.40699,11.36003 -18.28572,37.10096 -2.22489,22.76118 -14.91847,65.12109 -17.76295,-33.91071 -12.17038,2.52058 -2.7156,13.57695 5.37861,6.5951 5.39879,25.16157 14.59549,26.47539 3.92977,12.58571 4.89434,34.04421 11.20087,39.03431 9.06193,8.9349 15.58702,16.77887 24.77833,24.43832 9.05436,10.15981 21.84818,10.52234 36.65773,10.52234 17.90549,-3.36473 26.95874,-18.34565 37.67624,-27.15389 8.3376,-6.56188 15.55954,-26.61021 17.65059,-43.10746 17.43837,1.11604 4.95295,-2.42617 31.56657,-49.89566 4.08651,-20.38374 -14.69877,-6.22688 -20.70521,1.01854 2.76971,-26.20233 -0.22553,-45.99108 -11.8799,-63.47261 -11.69641,-5.08523 -36.03873,-7.99343 -60.49965,-7.91735 z m 31.88229,61.41993 c 5.64354,-0.0334 9.85637,3.51861 15.52049,7.35417 -9.09193,7.17283 -18.06731,4.50453 -32.64141,0.23978 7.47662,-5.25062 12.73149,-7.56794 17.12092,-7.59395 z m -67.77675,0.36806 c 10.47993,-0.0631 12.94186,4.13344 16.81395,7.46621 -11.73033,-0.62594 -5.28312,5.16443 -21.36096,3.84007 -2.26307,-0.18641 -9.09313,-4.87891 -9.57151,-4.82451 -0.0143,0.0156 0.47511,-0.27766 -0.0289,0.0243 -0.013,0.008 0.0115,-0.0223 0.0289,-0.0243 0.2942,-0.32238 3.55411,-5.46713 7.41144,-5.97586 2.55053,-0.33639 4.76636,-0.49423 6.70708,-0.50591 z" id="face" fill="#fff" stroke="#9292c6" stroke-width="1.1" opacity="1"/>
  <path d="m 365.42589,312.23993 c 2.81378,-4.13162 4.51383,-6.24998 5.3974,-6.92698 2.71882,-1.72513 -2.15259,6.54594 -4.93591,16.6967 0.6734,6.69097 -18.34647,21.75431 -14.86213,11.83125 5.26828,-6.77555 13.18075,-17.72195 14.4006,-21.60098 z" id="blush-small-right" opacity=".46400003" fill="#fe96ff"/><path id="eyeshade-left" d="m 282.62219,288.71888 c -0.23421,0.11294 18.57976,-7.52296 -5.27008,-14.57148 -11.4926,-3.39649 -20.27801,-6.77918 -34.96735,7.71257 -1.69098,1.66823 4.66984,6.07516 8.64675,6.38882 8.33371,-15.03515 31.61457,-1.79315 31.59068,0.47009 z" opacity=".5" fill="#ffc363"/><path transform="matrix(.4179 .45695 -.45695 .4179 272.48197 -46.127453)" id="temple-blush-left" d="m 286.09125,334.5168 c -10.73223,-1.19912 38.08913,87.7018 57.1616,73.16079 24.04867,-18.33489 -35.73516,-74.4486 -57.1616,-73.16079 z" opacity=".4" fill="#90f" filter="url(#filter5088)"/><path transform="matrix(.50309 .36103 -.36103 .50309 340.58795 -47.903963)" id="temple-blush-right" d="m 286.09125,334.5168 c -10.73223,-1.19912 53.59695,91.3622 72.66942,76.82119 24.04867,-18.33489 -51.24298,-78.109 -72.66942,-76.82119 z" opacity=".4" fill="#90f" filter="url(#filter5088)"/><path id="blush-left" d="m 345.73643,404.65116 c -10.73223,-1.19912 14.26086,86.63402 33.33333,72.09302 24.04867,-18.33489 -11.90689,-73.38083 -33.33333,-72.09302 z" transform="matrix(.61923 0 0 .61923 14.29021 44.867987)" opacity=".4" fill="#ff3840" stroke-width="1.88976383"   filter="url(#filter5088)"/><path id="eyelid-line-left" d="m 249.343,285.59366 c 6.33977,-10.33874 26.10155,-9.36852 32.92436,-2.5457" fill="none" stroke="#9292c6" stroke-width="1.17"  /><path id="eyeshade-right" d="m 308.29465,276.44474 c -1.78228,0.48188 0.53371,14.1399 2.6763,16.28248 28.81347,-26.76429 34.89565,-0.0565 45.46109,-3.90901 23.00809,-13.50683 -32.99561,-18.61118 -48.13739,-12.37347 z" opacity=".5" fill="#ffc464"/><path id="eyelid-line-right" d="m 319.09513,282.02968 c 14.01616,-5.17559 18.647,-5.27541 29.86952,2.20627" fill="none" stroke="#9292c6" stroke-width="1.17"/><path id="blush-right" d="m 573.6434,406.20154 c -18.97302,-5.97416 -45.19037,63.33675 -43.41085,65.11628 19.13472,19.13471 49.05154,-45.37386 43.41085,-65.11628 z" transform="matrix(.61923 0 0 .61923 14.29021 44.867987)" opacity=".4" fill="#ff3840" filter="url(#filter5088)"/><path id="lips" d="m 270.89658,357.21263 c 6.37711,-2.22782 12.27463,-5.09111 22.06271,-9.67365 0.92613,1.10069 3.83556,3.89418 5.60054,5.60053 2.67679,-2.01906 4.40559,-3.498 6.95824,-5.60053 2.28638,1.58724 8.60182,3.40781 21.21415,10.86165 -13.9598,12.23942 -31.99325,21.19874 -55.83564,-1.188 z" fill="#bf1f00" stroke="#bf1f00" stroke-width="1.17019403"/><path id="teeth" d="m 279.72166,357.38234 c 12.25341,-3.67976 14.83296,-2.51169 18.32904,-0.50913 12.11164,-4.01346 13.91383,-1.30837 20.70501,1.69713 -8.32628,0.88543 -25.411,3.19677 -39.03405,-1.188 z" fill="#fff" stroke="#bf1f00" stroke-width="1.17"/><path d="m 316.47328,378.81529 c -5.57255,-6.34869 -30.90808,-3.31346 -29.60768,2.41246 13.21783,-1.93902 26.3634,-0.093 29.60768,-2.41246 z" id="chin-shade" opacity=".5" fill="#ffc363"/><path id="chin-line" d="m 295.84442,378.42678 c 3.45118,-0.98222 8.30131,-1.26491 11.5405,-0.33942" opacity=".43999999" fill="none" stroke="#bf1f00" stroke-width="1.17019403"  /><path id="cheekline-right" d="m 365.42589,312.23993 c -1.52921,8.19644 -10.81737,16.22607 -14.40064,21.60097" opacity=".43999999" fill="none" stroke="#bf1f00" stroke-width="1.17"/><path d="m 229.6411,310.22631 c -2.21782,3.46822 4.45445,16.63502 5.81456,18.67518 2.9255,4.38826 4.72774,-0.5638 8.33991,3.04839 0.65607,0.65606 6.14056,6.88614 7.13368,5.89303 2.45528,-1.84868 -2.32637,-10.4955 -9.60237,-14.79309 -4.48674,-2.65011 -4.35472,-8.55887 -11.68578,-12.82351 z" id="blush-small-left" opacity=".46400003" fill="#fe96ff"/><path id="cheekline-left" d="m 232.93998,312.71995 c 3.51908,7.25089 11.35616,12.11402 15.6007,18.48083" opacity=".44" fill="none" stroke="#bf1f00" stroke-width="1.17"/><path id="eyebrow-left" d="m 242.06038,281.75857 c 3.19543,-4.30486 6.79797,-8.79923 11.2805,-11.0405 11.51706,-7.53443 22.46214,7.79755 39.36176,0.72004 1.82882,3.21667 -4.19117,7.8375 -5.28023,7.44033 -34.26593,-12.49636 -33.58255,-3.00379 -45.36203,2.88013 z" fill="#e5d390"/><path id="eyebrow-right" d="m 307.82332,278.39842 c -1.0759,-1.37261 -3.84297,-2.44617 -3.12014,-6.00027 35.21109,1.44984 45.48258,-8.12274 52.80236,6.96031 -3.36585,-5.38528 -40.94194,-8.05863 -49.68222,-0.96004 z" fill="#e5d390"/><circle r="2.1600964" cy="307.19971" cx="246.62059" id="mole" stroke-width="1.17019403"  /><g id="lines-face" transform="translate(0 73.965767)" fill="none" stroke="#bf1f00" stroke-width="1.17" opacity=".44"><path d="m 293.80786,201.4451 c -0.13138,1.63258 -1.95305,4.10868 -2.20627,4.41254" id="path4826"/><path d="m 313.49459,203.48166 c -1.73124,1.75221 -1.69683,3.73162 -2.03655,6.10967" id="path4828" /><path d="m 307.21521,207.04563 c 0.90681,5.61359 4.44838,9.54822 2.71541,15.61362" id="path4830"/><path d="m 294.65643,211.7976 c -4.31194,3.25322 -2.34611,7.9371 -2.88512,11.71021" id="path4832"/><path d="m 290.24389,234.36946 c -0.86111,1.94448 -1.52743,3.20614 -1.52743,5.43082" id="path4834"/><path d="m 312.13689,237.76372 c 0.53774,1.20987 0.83465,2.27859 1.01828,3.56398" id="path4836"/><path d="m 289.2256,245.90996 c 1.75863,0.86481 3.69066,1.66059 5.60054,2.20627" id="path4838"/><path d="m 307.72434,247.60709 c -0.9061,1.07625 -2.55294,1.79618 -3.39426,2.03656" id="path4840"/><path d="m 281.92794,247.60709 c -1.5996,3.36374 1.88768,6.53076 4.07312,7.46738" id="path4842"/><path d="m 291.26216,253.20763 c -6.26015,-4.76057 8.10449,-2.31558 0,0 z" id="path4846"/><path d="m 307.89406,253.54705 c -2.21452,-2.06759 6.63679,-4.60023 2.37598,-0.33942 -0.80206,0.80206 -1.14981,0.68975 -2.37598,0.33942 z" id="path4848"/><path d="m 296.01414,256.09275 c 1.35334,0.42349 2.28797,0.83599 3.56397,1.01828" id="path4850"/><path d="m 305.34836,255.24418 c -0.68651,1.51108 -1.89625,1.72203 -3.05483,1.86685" id="path4852"/><path d="m 309.25176,256.26246 c 2.28597,0.83439 4.04119,1.10146 5.77026,-0.33942" id="path4854"/><path d="m 317.05857,246.58881 c 1.42796,1.48888 1.54063,3.09349 1.01828,4.92169" id="path4860"/><path d="m 287.69819,214.17359 c 0.1228,1.79179 -0.51521,2.60631 -1.69713,3.39426" id="path4862"/><path d="m 325.0351,221.47125 c 2.33901,1.86675 4.78783,4.00551 7.63708,4.41255" id="path4864"/><path d="m 312.3066,213.83416 c 0.0203,1.42848 0.74722,2.71541 2.71542,2.71541" id="path4866"/><path d="m 265.80518,223.84724 c 2.36688,0.27539 5.08356,-0.57739 6.4491,-1.3577" id="path4868" /><path d="m 302.12381,264.4087 c 0.11671,1.44045 0.48803,2.56764 0.67885,3.9034" id="path4870"/><path d="m 297.37184,271.02751 c 1.31717,1.15503 2.27132,1.26639 3.73369,0.84857" id="path4872"/><path d="m 335.97497,220.99339 c -9.30839,0.62326 -10.97878,-2.12225 -16.16776,-3.1532" id="path4894"/></g><g id="lines-ears" transform="translate(0 73.965767)" fill="none" stroke="#bf1f00" stroke-width="1.17019403"  ><path d="m 223.37688,221.9804 c 1.80351,13.26639 7.38394,19.90381 10.52222,30.8878" id="path4790" opacity=".43999999"/><path d="m 376.11877,229.7872 c -7.01086,8.82976 -11.87993,14.99212 -11.87993,26.81469" id="path4792" opacity=".43999999"/><path d="m 391.39296,211.7976 c -5.00713,0.45189 -6.91456,6.46843 -9.16452,9.84337" id="path4794" opacity=".44"/><path d="m 374.42164,238.95172 c -0.10559,3.23983 -1.60821,5.46714 -2.71542,7.12795" id="path4796" opacity=".43999999"/><path d="m 382.56787,226.73237 c -0.75464,2.46985 -1.01828,5.58629 -1.01828,7.46737" id="path4798" opacity=".44"/><path d="m 371.70622,250.49221 c -4.14249,-0.31565 -3.85592,3.57101 -4.07311,5.0914" id="path4806" opacity=".43999999"/><path d="m 217.33928,219.0733 c 0.18254,3.25126 1.54027,4.7889 4.08018,6.24028" id="path4896" opacity=".44"/><path d="m 221.17945,230.35381 c 0.60886,2.62324 2.86241,4.30247 4.32019,5.76025" id="path4898" opacity=".44"/><path d="m 227.17972,243.79441 c 0.85503,1.2508 1.5477,4.09689 1.68007,4.5602" id="path4900" opacity=".44"/></g><path id="hat-line" d="m 243.06361,181.55946 c 50.07639,-19.22883 79.14423,-16.96269 121.51466,1.01829" fill="none" stroke="#9292c6" stroke-width="1.1"/><g id="hair-lines" transform="translate(0 73.965767)" fill="none" stroke="#bf1f00" stroke-width="1.2" opacity="0.5"><path d="m 374.5463,170.35113 c 1.61317,-1.26723 3.4149,-1.71137 5.04023,-2.64012"/><path d="m 374.30629,175.63137 c 1.53692,-1.60029 3.69219,-2.69271 5.28024,-3.60017"/><path d="m 375.26633,180.19157 c 2.06472,-1.35561 4.18869,-3.285 6.00027,-4.3202"/><path d="m 375.74636,186.19183 c 2.71826,-1.13697 4.62821,-2.94814 6.72029,-5.04022"/><path d="m 376.7064,191.71208 c 2.38177,-1.0475 4.3711,-2.3652 6.00027,-4.32019"/><path d="m 376.46639,198.19237 c 2.97417,-0.90311 4.66317,-2.96039 5.76025,-5.52024"/><path d="m 225.49964,191.71208 c -2.95239,0.0468 -6.70814,2.63491 -8.40037,3.36015" /><path d="m 225.01962,183.31171 c -2.06523,1.71613 -5.48953,3.85131 -6.48029,5.04022"/><path d="m 227.65974,173.95129 c -3.17484,0.78234 -6.02811,2.08185 -7.68034,4.5602"/><path d="m 229.09981,166.99098 c -1.90584,0.70317 -4.82362,1.76202 -5.52025,2.16009"/><path d="m 232.93998,161.71074 c -2.24303,-0.0202 -4.84688,1.24755 -6.00027,1.68008"/><path d="m 235.8201,155.71048 c -1.45864,-1.18787 -3.97431,-1.07804 -4.80021,-0.96005"/><path d="m 235.34008,150.19023 c 1.43315,-0.52324 2.53253,0.0532 3.84018,0.24001"/><path d="m 240.14029,146.35006 c 0.92898,0.10323 1.41295,0.28258 2.40011,0.48002"/><path d="m 281.42214,126.18916 c 2.40737,0.79811 3.55839,4.06271 4.08019,5.28023"/><path d="m 286.46236,124.9891 c 1.54366,1.85712 2.78344,4.46181 3.36016,6.48029"/><path d="m 291.7426,124.26907 c 1.13271,2.90634 2.02408,5.39213 2.40011,8.40037"/><path d="m 296.54281,124.9891 c 1.13817,2.6662 1.44007,4.98715 1.44007,7.92035"/><path d="m 275.18186,127.38921 c 1.91167,1.06165 3.41483,2.92569 4.80022,4.08018"/><path d="m 300.86301,124.50908 c 1.20151,2.58469 1.44006,8.22119 1.44006,9.12041"/><path d="m 305.90323,123.54904 c 1.21932,4.01054 0.89907,9.54722 0.48003,12.48055"/><path d="m 312.38352,124.9891 c 1.31295,3.44936 0.20925,7.42801 -0.48001,9.84044" /><path d="m 319.10382,126.18916 c 0.93957,2.54142 -0.65705,8.17993 -0.72003,8.40037"/><path d="m 326.78417,126.42916 c 0.0281,2.07129 -1.30543,6.16614 -1.44007,6.48029"/><path d="m 330.62434,133.14947 c 1.13143,-2.16627 3.10325,-3.74891 5.04023,-5.04023"/><path d="m 336.3846,134.34952 c 1.07976,-1.97258 3.63885,-3.3795 4.5602,-3.84017"/><path d="m 342.62488,135.54958 c 1.1965,-1.77672 2.87887,-2.39958 4.5602,-3.12014"/><path d="m 249.98074,136.26961 c 0.5788,1.91252 1.55897,2.07391 2.88013,2.64011"/><path d="m 256.70104,133.8695 c 1.2126,0.32859 1.80096,1.08092 2.4001,1.68008"/><path d="m 263.18133,131.46939 c 1.08079,0.29889 1.90961,1.18958 2.40011,1.68008"/><path d="m 363.74582,149.7102 c 1.21696,-1.03326 2.45271,-1.28366 3.84017,-1.68007"/><path d="m 366.38594,155.71048 c 1.85242,-1.22888 3.73176,-2.06055 5.76025,-2.64012"/><path d="m 369.9861,161.23072 c 2.20001,-0.77783 3.66332,-2.4279 5.04022,-4.08018"/></g><path id="eyebrow-big" d="m 323.90404,226.31609 c -2.32336,7.81326 -8.95292,13.48896 -13.20059,16.32073 5.58136,-0.71931 10.3044,-5.49616 12.72057,-9.12041 26.11029,26.61964 38.52616,24.51558 38.1617,55.68249 8.37166,-40.29408 -32.31163,-39.61276 -37.68168,-62.88281 z" fill="#080705" stroke="#110e0e" stroke-width="1.17019403"  /><path id="costume-bottom" d="m 94.412927,487.97338 c 16.281443,-15.19276 108.607453,-56.12469 121.766883,-50.48493 14.13437,91.37951 141.6744,82.32655 173.48717,0.99712 58.42845,22.70876 88.98281,32.64512 99.05896,37.07783 24.81579,10.91698 24.00246,89.15035 25.91362,111.01307 -108.18682,0 -309.19587,0.14627 -444.023,0.14627 0.911278,-14.09087 2.128392,-64.73013 23.796367,-98.74936 z" fill="#8ba4c6" stroke-width="1.17"  /><path id="costume" d="m 129.39137,715.5775 c 26.29314,-24.53501 175.39179,-90.6366 196.64316,-81.52886 22.8258,147.57013 228.79209,132.95037 280.16701,1.61026 94.35698,36.67271 143.69966,52.71908 159.97179,59.87753 40.07538,17.63 38.76193,143.97023 41.84829,179.27666 -174.71251,0 -499.32502,0.23622 -717.05935,0.23622 1.471636,-22.75555 3.437172,-104.53365 38.4291,-159.47181 z" transform="matrix(.61923 0 0 .61923 14.29021 44.867987)" fill="#8ba4c6" stroke-width="1.8" filter="url(#filter31264)"/><path id="collar" d="m 316.27954,668.57939 c -31.16684,26.30215 -85.22604,95.61602 -67.58126,136.78717 18.38659,-31.55261 61.82757,-49.85362 84.0256,-76.49125 -10.30546,44.634 -31.6875,87.2481 -18.08878,134.84362 17.21126,-40.48934 53.25839,-70.29506 76.19213,-104.69566 10.76041,29.05987 8.22489,76.88698 14.30827,107.30384 16.26991,33.13411 39.35267,-97.57879 50.92096,-102.91868 7.57304,-0.51843 21.11408,-0.81171 26.85909,4.93331 14.87906,46.52636 58.31415,80.5445 76.19212,120.59185 20.43793,-44.26565 -5.78568,-93.42596 -10.96289,-134.84362 9.36992,34.11011 78.78682,32.42856 91.41315,61.89001 22.5655,-56.12127 -39.92667,-81.92439 -47.01342,-121.63779 18.69997,1.93999 101.03455,32.39505 117.16509,50.95255 15.75241,-41.31116 -56.58064,-66.45295 -106.24878,-110.18398 -34.89429,113.41499 -241.65512,163.02317 -277.42629,-1.06212 -56.29227,14.42409 -119.92509,61.80257 -107.48381,95.21342 16.74489,-25.85918 76.8629,-46.7721 97.72882,-60.68267 z" transform="matrix(.61923 0 0 .61923 14.29021 44.867987)" opacity=".73999999" fill="#c4c4c4" stroke="#fff" stroke-width="1.88976383"   filter="url(#filter31264)"/><g id="teeth-lines" transform="translate(0 73.965767)" fill="none" stroke="#bf1f00" stroke-width="1.17" opacity=".44" stroke-linecap="square" stroke-linejoin="round"><path d="m 289.5825,282.67614 c 0,0.56003 0,1.12006 0,1.68008"/><path d="m 309.5034,282.67614 c 0.37405,1.75809 -0.0935,0.46772 -0.24001,1.20006"/><path d="m 299.42295,284.11621 c 0,0.24001 0,0.48002 0,0.72003"/></g><g id="epaulettes-all" fill="#d5e1ff"><g transform="translate(0 73.965767)" opacity=".62" fill="#d5e1ff"><path class="epaulettes-left" d="m 50.87022,416.83054 c -1.707649,2.56149 -30.376984,29.71567 -29.827003,30.26563 9.216195,-4.00427 32.613687,-9.16603 35.080991,-14.89264 18.046374,-41.88563 58.222142,18.59676 85.119402,-42.16493 -9.5499,-23.22126 -73.572819,0.81327 -90.37339,26.79194 z" opacity=".62000002"/><path class="epaulettes-left" d="m 58.780721,442.23584 c -1.707649,2.56149 -25.99066,26.64524 -25.440679,27.1952 40.52651,-23.05607 74.923248,-3.10861 107.903568,-79.39244 -9.73613,-22.29011 -67.55615,35.68774 -82.462889,52.19724 z" opacity=".62"/><path class="epaulettes-left" d="m 63.601697,457.05495 c -1.707649,2.56149 -24.674762,34.54063 -24.124781,35.09059 31.987619,-14.10879 38.981803,-6.62859 58.939322,-41.76724 4.064302,-7.1559 17.493442,-29.94774 23.084932,-42.8888 -1.15168,-16.93689 -7.99474,-2.09143 -17.05712,-1.53875 -11.3981,0.69512 -31.466154,24.89148 -40.842353,51.1042 z" opacity=".62"/><path class="epaulettes-left" d="m 141.24361,390.0386 c -38.19806,3.38734 -79.088281,60.36125 -60.096617,117.45907 0.437945,-5.75808 21.635977,-48.40283 32.020167,-66.23348 8.294,-10.73593 40.18616,-50.52432 28.07645,-51.22559 z" opacity=".62"/><path class="epaulettes-left" d="m 141.24361,390.0386 c -40.74977,13.95582 -77.719518,79.17001 -16.39894,115.14971 -1.52185,-2.4357 -1.48188,-21.07095 0.45321,-32.04756 3.44846,-19.56116 -11.8481,-6.4146 -5.11056,-34.4623 4.42851,-10.47951 31.32983,-55.17395 21.05629,-48.63985 z" opacity=".62"/><path id="ep-left-6" class="epaulettes-left" d="m 141.24361,390.0386 c -52.724551,29.72977 -21.24799,100.40057 11.37653,115.57103 -1.52185,-2.4357 -11.13179,-23.70275 -9.19671,-34.67936 3.44847,-19.56116 -11.84809,-6.4146 -5.11056,-34.4623 4.00107,-9.92993 6.37349,-44.18102 2.93074,-46.42937 z" opacity=".62"/></g><g transform="translate(0 73.965767)" opacity=".62"><path class="epaulettes-right" d="m 459.68676,390.38282 c 2.87916,10.05082 59.32495,15.83822 67.7699,33.70607 12.33775,26.10425 24.32001,-1.55738 52.02616,19.08035 -17.35887,-17.04884 -72.40437,-83.7674 -119.79606,-52.78642 z" opacity=".62"/><path class="epaulettes-right" d="m 473.72299,400.91 c 2.87916,10.05082 19.40941,22.47237 27.85436,40.34022 12.33775,26.10425 37.86818,14.08288 65.57433,34.72061 -17.35887,-17.04884 -46.037,-106.04181 -93.42869,-75.06083 z" opacity=".62000002"/><path class="epaulettes-right" d="m 459.68676,390.38282 c 2.87915,10.05082 11.29471,43.45708 19.73966,61.32493 12.33775,26.10425 34.35912,24.61005 62.06526,45.24778 -17.35886,-17.04884 -34.41323,-137.55369 -81.80492,-106.57271 z" opacity=".62000002"/><path class="epaulettes-right" d="m 459.68676,390.38282 c 2.87915,10.05082 3.72831,51.68231 12.17326,69.55016 12.33775,26.10425 15.0734,32.03998 42.77954,52.67771 -17.35886,-17.04884 -7.56111,-153.20885 -54.9528,-122.22787 z" opacity=".62000002"/></g></g><g id="eyelashes-all" transform="translate(0 73.965767)" fill="#0d0000"><path id="eyelashes-left-up" d="m 252.03953,214.90334 c 0.67483,-0.74533 -4.01099,-0.68755 -3.91158,-1.93828 0.0146,-0.18383 2.58801,-0.10672 3.4893,-1.00801 0.50912,-0.50913 -2.62325,-1.17317 -1.9385,-1.39572 2.3109,-0.75107 3.96954,-0.2169 4.34224,-0.93048 0.0669,-0.12815 -2.01586,-1.16328 -1.70588,-1.47326 0.66534,-0.66534 3.30175,0.40393 4.10962,0 0.98713,-0.49356 -1.25178,-1.77228 -0.85294,-2.17112 0.3877,-0.3877 3.64438,1.1631 4.03208,0.7754 0.15846,-0.15846 -1.67878,-1.56437 -1.39572,-1.70588 0.93385,-0.46692 8.434,2.23079 8.91711,2.7139 -11.12171,-1.16809 -14.56484,5.67715 -15.08573,7.13345 z"/><path id="eyelashes-left-down" d="m 251.84463,213.57504 c 0.61169,0.33272 -1.21798,3.31747 -1.54556,4.04242 -0.52799,1.16847 3.24693,-1.39572 3.72192,-1.39572 0.0935,0 -1.53956,2.38907 -1.09497,2.18993 0.65829,-0.29485 2.41187,-1.49284 2.49069,-1.41452 0.3981,0.39559 -0.41808,1.88453 -0.15508,2.01604 0.6244,0.31219 1.40133,-0.70067 1.86096,-0.93049 0.93846,-0.46922 -0.35928,1.19152 0,1.5508 0.19523,0.19523 1.61162,-1.00078 1.86096,-1.08556 0.71028,-0.24149 -0.20295,0.66439 0.52786,2.08028 -0.36378,0.17225 1.45977,-0.80468 2.88343,-2.59531 -1.10644,0.33789 -2.61137,-0.47715 -4.78694,-1.54027 -2.73085,-1.33446 -5.26372,-3.26424 -5.76327,-2.9176 z"/><path id="eyelashes-right-up" d="m 336.75616,206.99449 c 7.27142,-1.55597 3.29821,-0.55177 7.36629,-1.86096 0,0 -2.76001,2.62977 -2.24866,2.94652 0.78405,0.48568 2.44558,-0.43183 4.96256,-1.1631 0.008,1.01648 -1.9385,2.66296 -1.9385,2.66296 0.18941,0.18941 4.49265,-1.69931 4.49733,-1.03462 0.002,0.23498 -2.59197,2.23982 -2.4923,2.3395 0.65794,0.65795 3.92181,-0.86458 4.23028,-0.55608 0.32121,0.32119 -2.62187,1.70703 -2.37711,1.9518 0.7016,0.7016 4.02662,-1.20066 4.36106,-0.86625 0.479,0.47901 -3.17456,2.85897 -4.0118,2.85897 -6.15937,-4.90835 -8.39164,-5.52049 -12.34915,-7.27874 z"/><path id="eyelashes-right-down" d="m 335.77311,218.43892 c 0.9693,0.24224 3.84031,3.50829 4.60563,2.74145 -0.46391,-0.54362 -0.8992,-2.27862 -0.0697,-2.2574 0.0474,0.001 3.2824,1.99064 3.24983,1.70911 -0.31446,-2.71844 -0.23886,-1.76236 -0.31567,-2.57307 -0.0515,-0.54397 2.85776,0.93442 3.49577,1.25717 0.21862,-0.43725 -1.01099,-2.38842 -0.76763,-2.63179 1.01943,0.47195 2.22161,1.57044 3.28976,1.86419 0.13775,-0.41331 -1.24471,-2.84 -1.09657,-2.6318 0.43278,-0.43278 2.23782,1.38088 2.8511,0.76761 0.0971,-0.0971 -1.96485,-3.67249 -2.45856,-3.17877 -3.20592,3.51457 -7.01038,4.94527 -12.78391,4.9333 z"/></g></g></svg>
    </div>
  </div>
</div>
!

CSS 

              
                body {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  background: white;
  font-family: 'Arial';
}

.container-main {
  width: 100vw;
  height: 100vh;
  position: relative;
  margin: 0 auto;
}

.container-person {
  width: inherit;
  height: inherit;
  max-height: 100vh;
  position: absolute;
  bottom: 0;
}

svg {
  width: inherit;
  height: inherit;
  max-height: 100vh;
}

.info {
  position: absolute;
  z-index: 10;
  padding: 15px;
}

@media(max-width: 800px) {
  .container-person {
    height: auto;
    bottom: -5px;
  }
}
!

JS 

              
                // when independentAnimation() - epaulettesTL timeline added, morphing goes wrong

new Vue({
  el: '#app',
  data: function () {
    return {
      faceAnimation: 0,
      mouseX: 0,
      distanceX: 0,
      maxDistanceX: 0,
      distNormalized: 0,
      animationProgress: 0
    }
  },
  
  mounted: function () {
    this.independentAnimation();
  },
  
  methods: {
    
    //*** <-- ANIMATION TIMELINES --> ***//
    
    faceMorphAnimation: function () {
      // points to be morphed
      const neckPoints = "m 228.45687,373.31569 c 7.4824,-8.83931 86.87382,-63.69527 101.23705,-73.32848 4.69297,62.00994 20.07397,129.11695 68.27457,142.98249 -76.29952,134.30151 -168.03914,65.9114 -203.39093,17.98828 -0.58055,-29.44018 84.15654,-30.62935 33.87931,-87.64229 z";
      const facePoints = "m 219.70122,183.42781 c -10.65566,7.46037 -14.1372,29.41382 -21.34186,36.117 -7.2429,17.62901 8.45765,14.41066 2.73612,24.62522 -7.10492,7.84811 -34.12613,26.74385 -33.92809,36.66423 0,9.2331 6.89246,9.08137 11.49177,13.68069 3.39057,3.39057 -2.34857,17.12371 -3.28337,18.05848 -2.83572,2.83575 8.20843,8.76558 8.20843,11.49178 -7.05875,-0.7114 -16.95803,4.23553 -4.92506,18.60574 -6.67188,21.45931 -5.27279,25.18917 12.039,37.21145 19.00715,8.41158 45.64033,-3.40666 83.17857,-10.39731 15.40488,-3.90107 29.24804,-44.76824 29.63369,-41.81116 5.24269,24.46726 30.03312,12.40466 37.12807,10.61919 15.06964,-3.79229 33.36791,-43.35206 27.36137,-48.70323 -13.48765,-12.01598 -35.28258,13.44182 -42.13651,3.28337 -8.85611,-21.47892 -17.34371,-62.24073 -27.9086,-74.42291 -2.95727,-3.38767 -41.94127,-26.18803 -78.25353,-35.02254 z";
      const face2Points = "m 219.70122,183.42781 c -10.65566,7.46037 -14.1372,29.41382 -21.34186,36.117 -7.2429,17.62901 8.45765,14.41066 2.73612,24.62522 -7.10492,7.84811 -34.12613,26.74385 -33.92809,36.66423 0,9.2331 6.89246,9.08137 11.49177,13.68069 3.39057,3.39057 -7.6715,16.76885 -8.6063,17.70362 -2.83572,2.83575 13.53136,9.12044 13.53136,11.84664 -7.05875,-0.7114 -21.21638,2.46122 -9.18341,16.83143 -6.67188,21.45931 -1.01444,26.96348 16.29735,38.98576 19.00715,8.41158 45.64033,-3.40666 83.17857,-10.39731 15.40488,-3.90107 29.24804,-44.76824 29.63369,-41.81116 5.24269,24.46726 30.03312,12.40466 37.12807,10.61919 15.06964,-3.79229 33.36791,-43.35206 27.36137,-48.70323 -13.48765,-12.01598 -35.28258,13.44182 -42.13651,3.28337 -3.01446,-20.50531 -11.83174,-61.32207 -27.9086,-74.42291 -2.95727,-3.38767 -41.94127,-26.18803 -78.25353,-35.02254 z";
      const cheekLinePoints = "m 291.86528,308.01775 c -10.59141,13.46873 -22.21206,12.04483 -30.56892,18.96047";
      const foreheadPoints = "m 200.88447,228.21963 c 8.22449,-36.44658 11.34275,-38.28201 24.26918,-50.17829 103.85167,12.13801 67.45432,65.7305 100.7097,114.83192 -13.80016,33.87192 -107.0527,-18.2886 -124.97888,-64.65363 z";
      const hairPoints = "m 219.70068,183.42859 c 46.61453,-42.56179 90.89401,10.18548 100.09241,21.01828 31.91445,37.58511 23.20731,27.54085 29.12661,34.87898 7.8409,10.6308 19.68048,30.12637 17.03776,60.26713 -63.61599,80.2876 -99.52996,-25.43407 -146.25678,-116.16439 z";
      const hatPoints = "m 219.489,197.32566 c -20.74482,-35.79971 25.56416,-49.25857 50.05052,-40.32888 78.40697,-53.37713 125.36389,-60.013074 145.41917,-37.15718 25.69557,32.34725 -19.96135,106.76734 -33.69209,129.99754 7.93716,31.80603 1.51056,50.56121 -23.11611,61.11143 -23.64667,-24.63431 -29.20718,-89.6722 -51.61413,-108.34467 -29.36082,28.46854 -43.65147,-45.42074 -87.04736,-5.27824 z";
      const hatLinePoints = "m 279.76141,160.5617 c 58.49962,24.05748 79.50663,60.94034 89.72284,76.6422";
      const lipsPoints = "m 171.5418,309.53118 c 4.46002,0.72263 0.70062,-5.10277 21.46112,16.41796 -8.64171,3.07654 -9.30382,8.21974 -14.56,8.92079 -6.45195,0.86053 -11.15454,-3.27902 -11.06766,-6.27064 -0.0476,-11.09243 15.12215,-6.03541 16.551,-4.49425 -13.99531,0.15603 -19.53846,-12.58126 -12.38446,-14.57386 z";
      const lips2Points = "m 175.09042,311.30549 c 7.93146,5.66026 -7.43383,-13.74647 27.69859,19.66215 -8.64171,3.07654 -14.29927,5.50784 -19.55545,6.20889 -6.45195,0.86053 -11.53616,-0.63168 -11.44928,-3.6233 -2.84475,-10.62624 10.70908,-10.98867 12.14198,-9.44819 -9.8713,-5.63948 -10.39003,-10.90346 -8.83584,-12.79955 z";
      
      let faceFadeTL = new TimelineMax(),
          faceMorphTL = new TimelineMax(),
          faceMasterTL = new TimelineMax(),
          blowBubbleTL = new TimelineMax()
      ;
      
      // fade out face elements
      faceFadeTL
        .add('facestart')
        .to(['#eye-rect-left', '#eye-rect-right'], 0.5, {opacity: 0, ease: Sine.easeOut}, 'facestart')
        .to('#face-overlay', 0.5, {opacity: 1, ease: Sine.easeOut}, 'facestart')
        .to(['#face', '#lines-face', '#hair-lines', '#lines-ears', '#lips', '#teeth', '#teeth-lines', '#chin-line', '#chin-shade'], 0.5, {opacity: 0, ease: Sine.easeOut}, 'facestart+=0.25')
        .to(['#eye-left', '#eye-right', '#eyelid-line-left', '#eyelid-line-right', '#eyeshade-left', '#eyeshade-right', '#eyelashes-all', '#eyebrow-left', '#eyebrow-right'], 0.5, {opacity: 0, ease: Sine.easeOut}, 'facestart+=0.4')
        .to(['#temple-blush-left', '#temple-blush-right', '#blush-left', '#blush-right', '#blush-small-left', '#blush-small-right', '#eyebrow-big', '#cheekline-left', '#mole'], 1, {opacity: 0, ease: Sine.easeOut}, 'facestart+=0.5')
      ;
      
      // face turns right
      faceMorphTL
        .add('facemorph')
        .to('#neck', 1, {morphSVG: neckPoints, ease: Sine.easeInOut}, 'facemorph')
        .to('#face-overlay', 1, {morphSVG: facePoints, ease: Sine.easeInOut}, 'facemorph+=0.1')
        .to('#cheekline-right', 1, {morphSVG: cheekLinePoints, ease: Sine.easeInOut}, 'facemorph+=0.1')
        .to('#forehead', 0.9, {morphSVG: foreheadPoints, ease: Sine.easeInOut}, 'facemorph+=0.15')
        .to('#hair', 0.9, {morphSVG: hairPoints, ease: Sine.easeInOut}, 'facemorph+=0.15')
        .to('#hat', 0.9, {morphSVG: hatPoints, ease: Sine.easeInOut}, 'facemorph+=0.15')
        .to('#hat-line', 0.9, {morphSVG: hatLinePoints, ease: Sine.easeInOut}, 'facemorph+=0.15')
        .to('#lips-2', 0.3, {opacity: 1, ease: Power1.easeInOut}, 'facemorph+=0.9')
      ;
      
      blowBubbleTL
        .set('#bubble-blow', {transformOrigin: 'center center'})
        .add('bubbleblowstart')
        .to('#lips-2', 1.25, {morphSVG: lipsPoints, ease: Sine.easeInOut}, 'bubbleblowstart')
        .to('#bubble-blow', 1, {opacity: 1}, 'bubbleblowstart+=0.2')
        .to('#bubble-blow', 1.5, {x: 85, scale: 2, ease: Sine.easeInOut}, 'bubbleblowstart+=0.3')
        .to('#bubble-blow', 0.5, {x: 80, y: 160, ease: Elastic.easeInOut})
        .to('#lips-2', 0.75, {morphSVG: lips2Points, ease: Sine.easeInOut}, 'bubbleblowstart+=2.1')
        .to('#bubble-blow', 0.75, {x: 10, y: 100, ease: Power0.easeInOut})
        .to('#bubble-blow', 1, {x: 100, y: 20, ease: Power0.easeInOut})
        .to('#bubble-blow', 3, {x: -380, y: -400, ease: Power0.easeInOut})
      ;
      
      faceMasterTL
        .add('facemasterstart')
        .add(faceFadeTL, 'facemasterstart')
        .add(faceMorphTL)
        .add(blowBubbleTL)
      ;
      
      return faceMasterTL;
    }, // end of face animation
    
    independentAnimation: function () {
      console.log('Epaulettes animation');
      
      let epaulettesTL = new TimelineMax();
      let epaulettesLeftTL = new TimelineMax();
      let epaulettesRightTL = new TimelineMax();
      
      epaulettesLeftTL
        .set('.epaulettes-left', {transformOrigin: 'top right'})
        .staggerFromTo('.epaulettes-left', 1.75, {rotation: 0}, {rotation: 10, repeat: -1, yoyo: true, ease: Sine.easeInOut}, 0.3)
      ;
      
      epaulettesRightTL
        .set('.epaulettes-right', {transformOrigin: 'top left'})
        .staggerFromTo('.epaulettes-right', 1.75, {rotation: 0}, {rotation: -10, repeat: -1, yoyo: true, ease: Sine.easeInOut}, 0.3)
      ;
      
      epaulettesTL
        .add('epaulettesstart')
        .add(epaulettesLeftTL, 'epaulettesstart')
        .add(epaulettesRightTL, 'epaulettesstart')
      ;
      
      return epaulettesTL;
      
    }, //*** <-- END OF ANIMATION TIMELINES --> ***//
    
    coordinates: function (e) {
      this.getMaxDistanceX();
      const container = document.querySelector('.container-main');
      const containerBox = container.getBoundingClientRect();
      const containerXCenter = containerBox.width / 2 + containerBox.left;

      let pointerEvent = e;
      if (e.targetTouches && e.targetTouches[0]) {
        e.preventDefault();
        pointerEvent = e.targetTouches[0];
        this.mouseX = pointerEvent.pageX;
      } else {
        e.preventDefault();
        this.mouseX = e.clientX;
      }
      this.distanceX = Math.abs(this.mouseX - containerXCenter).toFixed(2);
      this.distNormalized = this.normalize(this.distanceX, this.maxDistanceX + 0.5, 0);
      if (this.faceAnimation == 0) {
        this.faceAnimation = this.faceMorphAnimation();
      }
      this.animationProgress = (1 - this.distNormalized).toFixed(2);
      this.faceAnimation.progress(this.animationProgress).pause();
    },
    
    normalize: function (val, max, min) {
      if (max - min === 0) return 1;
      return ((val - min) / (max - min)).toFixed(2);
    },
    
    getMaxDistanceX: function () {
      const container = document.querySelector('.container-main');
      let containerWidth = container.getBoundingClientRect().width;
      this.maxDistanceX = containerWidth / 2;
      return this.maxDistanceX;
    }
  }
});
!
999px

Console