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 URL's 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 it's URL and the proper URL extention.

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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import 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

Save Automatically?

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 

              
                
<!DOCTYPE HTML>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="utf-8">
        <title>Avatar Maker</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="avatar">
            <svg id="hair_back" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<polygon id="background" fill="#ffffff" points="0,0 360,0 360,360 0,360 "/>
<g class="h_longhair" style="display:;">
    <path class="tinted" fill="#9a4f2b" d="M71 174c3,-11 -13,-62 3,-94 17,-35 36,-48 83,-51 34,-3 68,-2 99,16 13,7 21,22 28,35 5,11 8,24 9,36 0,13 -6,24 -6,43 -1,32 39,33 39,62 0,40 -29,40 -28,56 1,20 28,25 28,55 0,11 -10,22 -18,28 -87,0 -174,0 -260,0 -14,-11 -15,-23 -14,-36 3,-18 25,-31 25,-49 0,-11 -25,-20 -25,-54 1,-29 37,-41 37,-47zm126 -85l-1 0c0,0 0,0 0,0l1 0z"/>
</g>
<g class="h_longhairbob" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M114 60c20,-23 60,-22 65,-22 5,0 45,-1 65,22 20,22 38,69 45,102 8,33 4,64 -6,84 -9,19 -17,20 -32,17 -16,-3 -22,-11 -72,-10 -50,-1 -56,7 -72,10 -15,3 -23,2 -32,-17 -10,-20 -14,-51 -6,-84 7,-33 25,-80 45,-102z"/>
</g>
<g class="h_longhaircurly" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M180 269c-23,0 -44,-7 -56,-18 -4,1 -8,1 -12,1 -38,0 -68,-27 -68,-60 0,-18 8,-34 22,-45 -12,-10 -15,-31 -7,-52 9,-20 27,-34 42,-33 2,-13 13,-25 29,-32 19,-8 38,-6 50,3 12,-9 31,-11 50,-3 16,7 27,19 29,32 15,-1 33,13 42,33 8,21 5,42 -7,52 14,11 22,27 22,45 0,33 -30,60 -68,60 -4,0 -8,0 -12,-1 -12,11 -33,18 -56,18zm-69 -137c0,0 0,0 0,0l0 -1 0 1zm138 -1l0 1c0,0 0,0 0,0l0 -1z"/>
</g>
<g class="h_longhaircurvy" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M183 34c50,0 67,23 80,68 4,14 13,31 20,43 5,12 0,17 0,25 8,2 23,10 30,27 4,10 -4,31 -15,38 -3,3 0,24 -6,37 -7,14 -13,13 -23,19 -7,4 23,38 4,63 -12,-22 -36,0 -51,-10 -18,-10 -18,-27 -18,-38 0,-8 5,-27 14,-44l-93 0c-6,12 -22,21 -22,28 0,6 0,19 23,21 -6,7 -23,3 -27,1 0,5 1,5 4,10 -10,-3 -15,-11 -16,-15 -6,7 -2,14 -5,24 -22,-10 -25,-31 -26,-36 -2,-33 11,-36 9,-45 -4,-17 -19,-20 -19,-37 0,-19 23,-41 28,-47 5,-6 -1,-20 0,-30 3,-18 18,-35 19,-35 31,-44 27,-67 90,-67z"/>
</g>
<g class="h_longhairdread" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M233 262l-91 0c1,3 1,6 2,10 1,7 0,14 -1,21 0,8 -1,16 1,22 1,6 5,11 10,16 2,3 5,6 7,9 2,4 1,8 -2,10 -3,2 -7,1 -10,-2 -1,-3 -4,-5 -6,-8 -4,-4 -7,-9 -10,-14 0,7 2,13 5,19 1,4 0,8 -4,9 -4,2 -8,0 -9,-3 -4,-9 -6,-19 -6,-29 -4,8 -7,16 -9,27 -1,4 -4,6 -8,6 -4,-1 -6,-5 -6,-8 1,-2 1,-4 1,-6 -2,6 -5,11 -11,17 -3,3 -8,3 -10,0 -3,-3 -3,-7 0,-10 9,-9 11,-19 10,-29 -1,8 -4,15 -10,22 -2,3 -6,3 -9,1 -3,-3 -4,-7 -2,-10 6,-7 9,-16 9,-26 0,-4 -1,-7 -1,-11 -3,6 -7,12 -12,18 -2,3 -6,3 -9,1 -3,-3 -4,-7 -1,-10 10,-14 14,-25 13,-35 0,0 0,0 0,0 0,0 0,0 0,-1 -1,-6 -4,-11 -7,-16 -2,1 -3,3 -4,4 -2,2 -4,5 -5,6 0,0 1,2 2,3 1,2 2,3 3,5 1,4 -1,8 -5,9 -3,2 -7,0 -9,-4 0,-1 0,-2 -1,-3 -2,-4 -5,-8 -3,-14 2,-4 4,-8 7,-11 2,-2 4,-5 5,-7 1,-5 0,-11 0,-17 -1,-7 -2,-15 0,-23 2,-7 6,-14 10,-21 2,-3 3,-5 5,-7 1,-4 1,-14 0,-24 0,-8 0,-15 1,-19 2,-5 10,-20 17,-33 7,-12 14,-23 16,-24 1,-1 2,-2 4,-2 3,-3 9,-6 12,-9 0,-1 -1,-2 -1,-3 0,-5 0,-10 5,-14 5,-3 9,-3 14,-2 2,0 3,1 4,0 0,0 0,-1 1,-2 2,-4 4,-8 10,-10l0 0c6,0 10,2 14,4 2,1 4,2 5,2 4,0 7,-1 10,-2 5,-1 10,-3 17,-2l0 0c6,1 8,5 11,8 1,2 3,3 3,4 1,0 4,-1 6,-2 6,-2 11,-4 17,-2 7,3 11,8 14,14 2,2 3,4 5,6 4,5 10,9 16,13 3,2 5,4 8,6 0,1 2,2 3,3 6,4 11,8 14,16 3,10 4,22 5,33 0,4 1,8 1,11 1,7 2,12 3,17 2,5 4,9 7,15 1,3 4,7 6,10 2,3 4,5 6,6 4,3 4,7 2,10 -2,3 -7,4 -10,2 0,0 0,-1 0,-1 0,9 6,19 11,29 5,9 11,19 13,29 1,3 -1,7 -5,8 -1,0 -2,0 -2,0 1,5 2,11 3,16 1,4 -2,8 -5,8 -2,1 -4,0 -6,-1 1,4 1,7 2,11 1,5 2,12 4,17 1,4 -2,8 -5,9 -4,1 -8,-2 -9,-5 -2,-8 -3,-13 -4,-19 -2,-9 -3,-18 -7,-27 1,3 2,6 2,10 2,6 3,12 4,18 1,3 -1,7 -5,8 -3,1 -6,-1 -8,-3l1 3c2,8 4,15 5,22 1,4 -2,8 -6,9 -3,0 -7,-2 -8,-6 -1,-7 -3,-14 -4,-22 -2,-7 -4,-14 -5,-21 -2,12 -3,24 0,39 0,3 -2,7 -6,8 -4,1 -7,-2 -8,-6 -2,-11 -2,-20 -2,-29 -2,10 -3,22 -2,34 1,4 -2,7 -6,8 -4,0 -7,-3 -8,-7 -1,-10 -1,-21 1,-30 -3,3 -4,6 -5,10 -3,7 -2,16 1,26 1,3 -2,7 -5,8 -4,1 -8,-1 -9,-5 -3,-12 -4,-23 -1,-33 1,-1 1,-2 1,-3 -4,8 -7,17 -9,28 0,4 -4,6 -8,6 -3,-1 -6,-5 -5,-8 2,-12 5,-22 9,-30 -2,2 -3,3 -5,5 -2,3 -7,3 -10,1 -3,-3 -3,-7 -1,-10 2,-1 4,-5 8,-9 8,-10 21,-24 29,-35z"/>
</g>
<g class="h_nottoolong" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M272 146l0 -3 0 0 0 -15c0,-51 -42,-93 -93,-93l0 0c-44,0 -82,32 -90,75 0,0 -1,0 -1,0 -7,0 -13,7 -13,16 0,7 4,15 12,16l0 100c0,4 3,8 8,8l68 0 13 0 58 0c21,0 38,-17 38,-38l0 -66z"/>
</g>
<g class="h_miawallace" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M92 256c25,-4 58,-9 87,-9 29,0 61,5 86,9 45,-50 26,-79 8,-134 -21,-60 -30,-83 -94,-83 -64,0 -74,23 -94,83 -19,55 -37,84 7,134z"/>
</g>
<g class="h_longhairstraight" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M116 318l157 0 0 -178 0 -11c0,-51 -42,-92 -93,-92l0 0c-50,0 -92,41 -92,92 0,74 0,148 0,222 16,-2 28,-16 28,-33z"/>
</g>
<g class="h_longhairstraight2" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M63 342c45,9 73,1 83,-51l85 0c29,23 59,46 73,53 7,-3 13,-21 6,-44 -12,-41 -45,-78 -48,-120 -3,-38 3,-86 -2,-102 -6,-19 -26,-39 -53,-33 -5,-8 -22,-18 -47,-13 -31,7 -68,38 -69,80 -2,99 -1,215 -28,230z"/>
</g>
<g class="h_shorthairshaggy" style="display:none;">
    <path class="tinted" fill="#9a4f2b" d="M120 190c36,2 72,4 108,6 -1,24 1,38 22,36 -7,5 -14,7 -22,6 3,4 10,5 18,5 -18,17 -30,10 -40,-6 -18,2 -36,5 -54,8 -15,13 -37,14 -70,-9 14,3 27,-13 38,-46z"/>
</g>
            </svg>
            <svg id="skincolor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="skin">
    <path id="body" fill="#edb98a" d="M304 360l0 -15c0,-47 -39,-85 -86,-85l-8 0 0 -22c22,-10 37,-32 39,-57 7,-1 13,-7 13,-15l0 -15c0,-8 -6,-14 -13,-15l0 -8c0,-38 -31,-69 -69,-69l0 0c-38,0 -69,31 -69,69l0 8c-7,1 -13,7 -13,15l0 15c0,8 6,14 13,15 2,25 17,47 39,57l0 22 -8 0c-47,0 -86,38 -86,85l0 15 248 0z"/>
    <path id="neck" fill="#000000" fill-opacity="0.2" d="M180 256c-11,0 -21,-2 -30,-6l0 -12c9,5 19,7 30,7l0 0c11,0 21,-2 30,-7l0 12c-9,4 -19,6 -30,6z"/>
    <path id="nose" fill="#000000" fill-opacity="0.2" d="M180 181c9,0 16,-4 16,-9l-32 0c0,5 7,9 16,9z"/>
</g>
            </svg>
            <svg id="tattoos" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="t_harry" style="display:none;">
    <polygon fill="#000000" fill-opacity="0.7" points="177,84 193,120 177,117 179,139 167,110 185,113 "/>
</g>
<g id="t_airbender" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M194 61c-4,-1 -9,-2 -14,-2l0 0c-5,0 -10,1 -14,2l0 36 -17 0 31 30 31 -30 -17 0 0 -36z"/>
</g>
<g id="t_krilin" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M191 71c3,0 6,3 6,7 0,3 -3,6 -6,6 -4,0 -6,-3 -6,-6 0,-4 2,-7 6,-7zm0 32c3,0 6,3 6,7 0,3 -3,6 -6,6 -4,0 -6,-3 -6,-6 0,-4 2,-7 6,-7zm-22 0c4,0 6,3 6,7 0,3 -2,6 -6,6 -3,0 -6,-3 -6,-6 0,-4 3,-7 6,-7zm22 -16c3,0 6,3 6,7 0,3 -3,6 -6,6 -4,0 -6,-3 -6,-6 0,-4 2,-7 6,-7zm-22 0c4,0 6,3 6,7 0,3 -2,6 -6,6 -3,0 -6,-3 -6,-6 0,-4 3,-7 6,-7zm0 -16c4,0 6,3 6,7 0,3 -2,6 -6,6 -3,0 -6,-3 -6,-6 0,-4 3,-7 6,-7z"/>
</g>
<g id="t_front" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M150 253l0 3 0 0c2,-3 4,-4 4,-5 -1,0 -3,1 -4,2zm49 27c0,0 1,1 3,1 1,0 2,0 4,0 0,0 0,0 0,0 4,0 10,-1 14,-6 0,0 -1,1 -1,1 0,1 0,1 0,2 0,1 0,1 -1,2 0,1 -1,3 -2,4 -1,2 -2,3 -3,4 0,0 0,0 1,-1 0,-1 0,-1 0,-2 0,0 0,0 0,0 0,-1 0,-1 -1,-2 -1,0 -1,0 -1,0 0,0 -1,0 -1,0 -1,0 -2,0 -3,1 -1,1 -2,2 -2,3 0,0 0,0 0,1 0,0 0,0 0,0 1,0 1,0 1,0 0,0 0,0 0,0 0,0 1,0 1,0 0,0 0,-1 1,-1 0,0 0,-1 0,-1 0,0 0,1 0,1 0,0 0,1 0,1 0,1 -1,2 -1,2 -1,1 -1,3 -2,4 -2,1 -3,3 -5,4 0,-1 0,-2 1,-3 0,-2 1,-4 1,-6 0,0 0,0 0,0 0,-3 -1,-6 -4,-9zm19 5c2,-3 3,-6 3,-10 0,-1 0,-2 0,-3 0,-1 -1,-2 -1,-3 0,0 0,0 0,0 1,0 1,0 1,0 0,0 0,0 0,0 2,0 6,0 9,3 0,0 0,-1 0,-1 0,0 0,0 0,0 -1,0 -3,1 -4,3 0,1 0,1 0,1l0 0c0,1 0,1 1,2 0,0 0,0 0,0 0,0 0,0 1,0 0,0 1,0 2,-1 0,0 1,0 1,-1 0,-1 1,-1 1,-2 0,-1 0,-2 0,-3l0 0c0,-3 -1,-6 -5,-8 0,0 1,0 1,0 2,0 6,0 9,2 2,1 3,2 4,4 1,1 2,4 2,6 0,1 0,1 0,1 0,-1 -1,-2 -2,-3 0,-1 -2,-2 -3,-2 0,0 -1,0 -1,0 0,0 0,0 -1,1 -1,0 -2,1 -2,3 0,0 0,0 0,0 0,2 1,4 1,7 0,0 0,0 0,0 0,0 0,1 0,2 0,1 -1,2 -1,3 0,0 0,-1 0,-1 0,0 0,-1 0,-1 0,-1 0,-1 0,-2 0,0 0,0 -1,-1 0,0 0,-1 0,-1 -1,0 -1,0 -1,0 -1,0 -1,0 -1,0 -1,0 -2,0 -2,2 -1,1 -1,2 -1,4 0,1 0,1 0,2 0,0 0,-1 0,-1 -1,-1 -1,-2 -2,-3 -1,0 -2,-1 -3,-1 0,0 0,0 -1,0 0,0 -1,1 -1,2 -1,1 -1,2 -1,3 0,2 0,4 1,5 0,2 1,4 2,5 0,0 0,0 -1,0 0,-1 0,-1 -1,-1 0,-1 -1,-1 -1,-1 -1,-1 -2,-2 -3,-3 -1,-2 -2,-3 -2,-4 0,-1 1,-2 3,-4zm-30 -18c0,0 0,1 0,1 0,1 0,1 0,2 0,1 0,2 0,3 1,1 1,2 2,3 0,0 1,0 1,0 0,0 0,0 1,0 1,0 3,-1 5,-2 1,-2 3,-3 5,-4 3,-2 12,-4 18,-4 1,0 2,0 3,0 1,0 2,0 3,0 -1,0 -4,1 -7,2 -3,1 -6,3 -8,6 0,0 0,-1 0,-1 0,0 0,0 0,0 0,-1 0,-3 -2,-3 0,0 0,0 0,0 -1,0 -2,0 -2,1 -1,1 -1,1 -1,2l0 0c0,1 0,2 2,3 0,0 1,0 1,0 1,0 1,0 2,0 1,0 3,0 4,-1 2,0 3,-1 4,-1 -1,0 -1,0 -1,0 0,1 -1,1 -1,1 0,1 -1,1 -1,2 -1,0 -3,1 -5,2 -1,0 -3,1 -6,1 -1,0 -2,0 -3,-1 -1,0 -2,0 -3,0 0,0 0,0 1,0 0,0 0,0 1,-1 0,0 1,0 1,-1 1,0 1,-1 1,-1 0,-1 0,-1 0,-1 0,-1 0,-1 -1,-1 0,0 -1,0 -1,0 -1,0 -1,0 -2,0 0,0 -1,0 -1,1 -1,0 -1,2 -1,3 0,0 0,0 0,0 0,1 0,3 0,4 1,1 1,3 2,5 0,0 0,0 0,0 -1,-1 -1,-1 -2,-1 0,0 -1,0 -2,-1 0,0 -1,0 -2,-1 -1,-1 -3,-2 -4,-4 -1,-2 -2,-4 -2,-7 0,-1 0,-2 0,-3 0,-1 1,-2 1,-3zm23 -7l-1 0 0 -1c-1,-1 -1,-2 -2,-3 0,0 -1,-1 -1,-2 -1,0 -1,-1 -2,-1 0,0 0,0 0,-1 0,0 0,0 0,0 0,0 0,1 0,1 0,2 -1,4 -2,5 -1,2 -3,3 -5,3 0,0 0,0 0,0 -2,0 -3,0 -3,-1 -1,-1 -2,-2 -2,-3l0 0c0,-1 1,-2 2,-2 0,0 0,0 0,0 1,0 2,1 2,1 1,0 1,1 1,1 0,-2 -2,-3 -3,-5 -1,-1 -3,-2 -4,-3 -1,-1 -1,-1 -2,-2 -1,0 -1,-1 -2,-1 0,0 0,0 0,0 -1,0 -1,-1 -1,-1 5,6 7,12 7,18 0,3 -1,5 -1,7 0,2 -1,4 -1,4 1,-1 2,-2 3,-3 0,-1 1,-2 1,-2 0,-1 0,-1 1,-1 0,-1 0,-1 0,-1 0,0 0,-1 0,-1 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 0,-1 0,-1l0 0c0,0 0,0 0,0 0,-1 0,-1 0,-1 1,0 1,0 1,0 0,0 1,0 1,0 1,1 1,1 1,1 1,0 1,1 1,1 0,0 0,0 0,0 0,1 0,1 -1,2 0,0 0,1 0,1 -1,1 -1,1 -1,1 0,1 0,1 0,1 0,0 -1,0 -1,0 0,0 1,0 1,0 0,0 1,-1 2,-1 0,-1 1,-1 2,-2 1,0 2,-1 2,-1 1,-1 1,-1 1,-1 0,0 0,0 1,-1 0,0 0,-1 0,-2 0,0 0,-1 1,-1 0,-1 1,-1 2,-1 0,0 0,0 0,0 1,0 2,0 3,1 1,0 1,1 2,2 -1,-2 -2,-3 -2,-4l0 0zm-2 6c-1,0 -1,0 -1,0 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 0,0 -1,0 0,-1 0,-1 0,-1 0,0 0,-1 0,-1 0,0 1,0 1,-1 0,-1 1,-1 2,-1 0,0 0,0 0,0 0,0 0,0 0,0 0,0 1,0 1,1 0,0 0,0 0,0 0,1 0,1 0,1 0,0 0,1 0,1 -1,0 -1,1 -1,1zm34 -3c-1,0 -2,0 -3,-1 1,1 2,2 3,3l0 0c0,0 0,0 0,0 0,-1 0,-1 0,-2zm-19 -3c-2,0 -4,0 -6,0l-6 0c1,1 2,3 2,4 1,0 1,0 2,0 1,0 2,0 4,0 1,0 1,0 2,0 1,0 2,0 2,0 0,0 0,0 0,0 0,0 -1,0 -1,-1 0,0 -1,-1 -1,-1 0,0 0,-1 1,-1 0,-1 0,-1 1,-1zm-14 -4l0 -3c-1,-1 -3,-2 -4,-2 0,1 2,2 4,5l0 0zm-49 24c0,0 -1,1 -3,1 -1,0 -2,0 -4,0 0,0 0,0 0,0 -4,0 -10,-1 -14,-6 0,0 1,1 1,1 0,1 0,1 0,2 0,1 0,1 1,2 0,1 1,3 2,4 1,2 2,3 3,4 0,0 0,0 -1,-1 0,-1 0,-1 0,-2 0,0 0,0 0,0 0,-1 0,-1 1,-2 1,0 1,0 1,0 0,0 1,0 1,0 1,0 2,0 3,1 1,1 2,2 2,3 0,0 0,0 0,1 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 0,0 0,0 0,0 -1,0 -1,0 0,0 0,-1 -1,-1 0,0 0,-1 0,-1 0,0 0,1 0,1 0,0 0,1 0,1 0,1 1,2 1,2 1,1 1,3 2,4 2,1 3,3 5,4 0,-1 0,-2 -1,-3 0,-2 -1,-4 -1,-6 0,0 0,0 0,0 0,-3 1,-6 4,-9zm-19 5c-2,-3 -3,-6 -3,-10 0,-1 0,-2 0,-3 0,-1 1,-2 1,-3 0,0 0,0 0,0 -1,0 -1,0 -1,0 0,0 0,0 0,0 -2,0 -6,0 -9,3 0,0 0,-1 0,-1 0,0 0,0 0,0 1,0 3,1 4,3 0,1 0,1 0,1l0 0c0,1 0,1 -1,2 0,0 0,0 0,0 0,0 0,0 -1,0 0,0 -1,0 -2,-1 0,0 -1,0 -1,-1 0,-1 -1,-1 -1,-2 0,-1 0,-2 0,-3l0 0c0,-3 1,-6 5,-8 0,0 -1,0 -1,0 -2,0 -6,0 -9,2 -2,1 -3,2 -4,4 -1,1 -2,4 -2,6 0,1 0,1 0,1 0,-1 1,-2 2,-3 0,-1 2,-2 3,-2 0,0 1,0 1,0 0,0 0,0 1,1 1,0 2,1 2,3 0,0 0,0 0,0 0,2 -1,4 -1,7 0,0 0,0 0,0 0,0 0,1 0,2 0,1 1,2 1,3 0,0 0,-1 0,-1 0,0 0,-1 0,-1 0,-1 0,-1 0,-2 0,0 0,0 1,-1 0,0 0,-1 0,-1 1,0 1,0 1,0 1,0 1,0 1,0 1,0 2,0 2,2 1,1 1,2 1,4 0,1 0,1 0,2 0,0 0,-1 0,-1 1,-1 1,-2 2,-3 1,0 2,-1 3,-1 0,0 0,0 1,0 0,0 1,1 1,2 1,1 1,2 1,3 0,2 0,4 -1,5 0,2 -1,4 -2,5 0,0 0,0 1,0 0,-1 0,-1 1,-1 0,-1 1,-1 1,-1 1,-1 2,-2 3,-3 1,-2 2,-3 2,-4 0,-1 -1,-2 -3,-4zm30 -18c0,0 0,1 0,1 0,1 0,1 0,2 0,1 0,2 0,3 -1,1 -1,2 -2,3 0,0 -1,0 -1,0 0,0 0,0 -1,0 -1,0 -3,-1 -5,-2 -1,-2 -3,-3 -5,-4 -3,-2 -12,-4 -18,-4 -1,0 -2,0 -3,0 -1,0 -2,0 -3,0 1,0 4,1 7,2 3,1 6,3 8,6 0,0 0,-1 0,-1 0,0 0,0 0,0 0,-1 0,-3 2,-3 0,0 0,0 0,0 1,0 2,0 2,1 1,1 1,1 1,2l0 0c0,1 0,2 -2,3 0,0 -1,0 -1,0 -1,0 -1,0 -2,0 -1,0 -3,0 -4,-1 -2,0 -3,-1 -4,-1 1,0 1,0 1,0 0,1 1,1 1,1 0,1 1,1 1,2 1,0 3,1 5,2 1,0 3,1 6,1 1,0 2,0 3,-1 1,0 2,0 3,0 0,0 0,0 -1,0 0,0 0,0 -1,-1 0,0 -1,0 -1,-1 -1,0 -1,-1 -1,-1 0,-1 0,-1 0,-1 0,-1 0,-1 1,-1 0,0 1,0 1,0 1,0 1,0 2,0 0,0 1,0 1,1 1,0 1,2 1,3 0,0 0,0 0,0 0,1 0,3 0,4 -1,1 -1,3 -2,5 0,0 0,0 0,0 1,-1 1,-1 2,-1 0,0 1,0 2,-1 0,0 1,0 2,-1 1,-1 3,-2 4,-4 1,-2 2,-4 2,-7 0,-1 0,-2 0,-3 0,-1 -1,-2 -1,-3zm-22 -8l0 1 -1 0 0 0c0,1 -1,2 -2,4 1,-1 1,-2 2,-2 1,-1 2,-1 3,-1 0,0 0,0 0,0 1,0 2,0 2,1 1,0 1,1 1,1 0,1 0,2 0,2 1,1 1,1 1,1 0,0 0,0 1,1 0,0 1,1 2,1 1,1 2,1 2,2 1,0 2,1 2,1 0,0 1,0 1,0 0,0 -1,0 -1,0 0,0 0,0 0,-1 0,0 0,0 -1,-1 0,0 0,-1 0,-1 -1,-1 -1,-1 -1,-2 0,0 0,0 0,0 0,0 0,-1 1,-1 0,0 0,0 1,-1 0,0 1,0 1,0 0,0 0,0 1,0 0,0 0,0 0,1 0,0 0,0 0,0l0 0c0,0 0,1 0,1 0,0 0,0 -1,0 0,0 0,0 0,0 0,0 0,1 0,1 0,0 0,0 0,1 1,0 1,0 1,1 0,0 1,1 1,2 1,1 2,2 3,3 0,0 -1,-2 -1,-4 0,-2 -1,-4 -1,-7 0,-6 2,-12 7,-18 0,0 0,1 -1,1 0,0 0,0 0,0 -1,0 -1,1 -2,1 -1,1 -1,1 -2,2 -1,1 -3,2 -4,3 -1,2 -3,3 -3,5 0,0 0,-1 1,-1 0,0 1,-1 2,-1 0,0 0,0 0,0 1,0 2,1 2,2l0 0c0,1 -1,2 -2,3 0,1 -1,1 -3,1 0,0 0,0 0,0 -2,0 -4,-1 -5,-3 -1,-1 -2,-3 -2,-5 0,0 0,-1 0,-1 0,0 0,0 0,0 0,1 0,1 0,1 -1,0 -1,1 -2,1 0,1 -1,2 -1,2 -1,1 -1,2 -2,3zm1 7c1,0 1,0 1,0l0 0c1,0 1,0 1,0 0,0 0,0 1,0 0,-1 0,-1 0,-1 0,0 0,-1 0,-1 0,0 -1,0 -1,-1 0,-1 -1,-1 -2,-1 0,0 0,0 0,0 0,0 0,0 0,0 0,0 -1,0 -1,1 0,0 0,0 0,0 0,1 0,1 0,1 0,0 0,1 0,1 1,0 1,1 1,1zm-3 -6l-6 0c-2,0 -4,0 -6,0 1,0 1,0 1,1 1,0 1,1 1,1 0,0 -1,1 -1,1 0,1 -1,1 -1,1 0,0 0,0 0,0 0,0 1,0 2,0 1,0 1,0 2,0 2,0 3,0 4,0 1,0 1,0 2,0 0,-1 1,-3 2,-4zm-28 2c-1,1 -2,1 -3,1 0,1 0,1 0,2 0,0 0,0 0,0 1,-1 2,-2 3,-3z"/>
</g>
<g id="t_tribal" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M123 210c1,0 3,-1 6,0 2,0 5,1 7,3 1,1 1,2 2,3 0,1 0,2 0,3 -1,1 -2,1 -4,1 2,1 5,1 8,1 3,0 6,-1 10,-3 4,-1 8,-4 12,-9 1,-1 2,-2 3,-3 -2,1 -5,2 -9,3 -4,0 -9,0 -14,-2 -12,-4 -19,1 -21,3zm-10 -19c1,5 2,10 5,15 0,-1 0,-1 0,-1 0,0 0,0 0,0 1,-1 2,-2 3,-3 2,0 3,-1 5,-2 5,-2 10,-2 14,-1 5,1 9,3 11,4 0,0 -1,-1 -2,-1 -11,-10 -24,-13 -36,-11zm15 30c4,6 10,10 16,14 1,0 1,0 2,-1 6,-2 11,-6 15,-10 2,-2 4,-5 5,-7 1,-2 2,-4 2,-5 0,0 -1,1 -1,1 0,0 0,0 0,0 -10,11 -19,14 -26,14 -4,-1 -7,-2 -9,-3 -2,-1 -3,-2 -4,-3z"/>
    <path fill="#000000" fill-opacity="0.7" d="M237 210c-1,0 -3,-1 -6,0 -2,0 -5,1 -7,3 -1,1 -1,2 -2,3 0,1 0,2 0,3 1,1 2,1 4,1 -2,1 -5,1 -8,1 -3,0 -6,-1 -10,-3 -4,-1 -8,-4 -12,-9 -1,-1 -2,-2 -3,-3 2,1 5,2 9,3 4,0 9,0 14,-2 12,-4 19,1 21,3zm-21 25c6,-4 12,-8 16,-14 -1,1 -2,2 -4,3 -2,1 -5,2 -9,3 -7,0 -16,-3 -26,-14 0,0 0,0 0,0 0,0 -1,-1 -1,-1 0,1 1,3 2,5 1,2 3,5 5,7 4,4 9,8 15,10 1,1 1,1 2,1zm26 -29c3,-5 4,-10 5,-15 -12,-2 -25,1 -36,11 -1,0 -2,1 -2,1 2,-1 6,-3 11,-4 4,-1 9,-1 14,1 2,1 3,2 5,2 1,1 2,2 3,3 0,0 0,0 0,0 0,0 0,0 0,1z"/>
</g>
<g id="t_tribal2" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M232 208c0,1 -1,2 -2,2 -2,2 -3,2 -4,3 -2,0 -3,0 -4,-1 -2,-2 -1,-4 -1,-4 0,0 1,-2 2,-3 0,-1 1,-1 2,-1 1,-1 1,0 2,0 0,0 0,0 0,0 1,1 1,2 1,3 0,-1 1,-2 2,-5 0,-2 0,-5 0,-9 -1,-4 -1,-9 0,-12 0,-3 2,-5 2,-6 -1,0 -2,1 -3,2 -1,2 -3,5 -4,10 -1,5 -1,11 -5,20 -3,4 -6,10 -11,16 0,0 0,0 0,0 -2,2 -5,5 -7,8 2,-2 4,-4 8,-5 3,-2 7,-3 12,-4 2,-1 4,-2 6,-3 1,-1 3,-2 4,-4 0,0 0,0 0,0 6,-7 7,-19 7,-23 0,2 -1,4 -2,7 -1,3 -3,7 -5,9zm-104 0c0,1 1,2 2,2 2,2 3,2 4,3 2,0 3,0 4,-1 2,-2 1,-4 1,-4 0,0 -1,-2 -2,-3 0,-1 -1,-1 -2,-1 -1,-1 -1,0 -2,0 0,0 0,0 0,0 -1,1 -1,2 -1,3 0,-1 -1,-2 -2,-5 0,-2 0,-5 0,-9 1,-4 1,-9 0,-12 0,-3 -1,-5 -2,-6 1,0 2,1 3,2 1,2 3,5 4,10 1,5 1,11 5,20 3,4 6,10 11,16 0,0 0,0 0,0 2,2 5,5 7,8 -2,-2 -4,-4 -8,-5 -3,-2 -7,-3 -12,-4 -2,-1 -4,-2 -6,-3 -1,-1 -3,-2 -4,-4 0,0 0,0 0,0 -6,-7 -7,-19 -7,-23 0,2 1,4 2,7 1,3 3,7 5,9z"/>
</g>
<g id="t_throat" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M113 296c0,-1 1,-1 2,-1 0,0 1,1 1,2 -1,1 -3,2 -4,1 0,1 0,1 0,1 4,3 6,6 7,7 0,0 1,0 2,-1 1,0 3,0 4,0l0 0c3,0 6,1 7,5 0,0 0,1 0,1l0 0c0,2 -1,3 -2,4 -1,0 -1,0 -2,0 -1,1 -1,1 -2,1 0,0 -1,0 -1,0 1,1 3,2 6,3 2,2 7,3 13,5 5,1 9,4 12,7 3,4 5,7 6,9 -1,-4 -2,-8 -3,-11 -1,0 -1,0 -1,0 0,-1 0,-1 0,-2 -2,-4 -4,-7 -6,-10 -3,-4 -5,-6 -6,-8 -1,-1 -1,-1 -1,-1 0,1 1,1 1,2 0,1 0,1 0,2 0,1 -1,2 -1,3 -1,1 -2,1 -3,1 0,0 0,0 0,0 -1,-1 -3,-2 -4,-3 -1,-1 -2,-3 -2,-5 0,0 0,-1 0,-1 0,-3 2,-5 4,-6 2,-2 4,-2 5,-2 -5,-11 11,-11 12,2 3,-20 23,-31 23,-10 0,-21 20,-10 23,10 1,-13 17,-13 12,-2 1,0 3,0 5,2 2,1 4,3 4,6 0,0 0,1 0,1 0,2 -1,4 -2,5 -1,1 -3,2 -4,3 0,0 0,0 0,0 -1,0 -2,0 -3,-1 0,-1 -1,-2 -1,-3 0,-1 0,-1 0,-2 0,-1 1,-1 1,-2 0,0 0,0 -1,1 -1,2 -3,4 -6,8 -2,3 -4,6 -6,10 0,1 0,1 0,2l-1 0c-1,3 -2,7 -3,11 1,-2 3,-5 6,-9 3,-3 7,-6 12,-7 6,-2 11,-3 13,-5 3,-1 5,-2 6,-3 0,0 -1,0 -1,0 -1,0 -1,0 -2,-1 -1,0 -1,0 -2,0 -1,-1 -2,-2 -2,-4l0 0c0,0 0,-1 0,-1 1,-4 4,-5 7,-5l0 0c1,0 3,0 4,0 1,1 2,1 2,1 1,-1 3,-4 7,-7 0,0 0,0 0,-1 -1,1 -3,0 -4,-1 0,-1 1,-2 1,-2 1,0 2,0 2,1 2,-2 3,-5 1,-8 -1,-4 -4,-4 -4,-4 0,11 -17,13 -24,5 -2,-2 -3,-5 -2,-7 3,-2 4,2 5,4 1,-18 -10,-24 -10,-24 3,7 4,18 -5,21 -5,2 -12,-5 -4,-4 -4,-4 -12,-3 -19,-2 1,-1 1,-1 2,-2 0,0 0,0 0,0 0,0 0,0 1,-1 2,-1 6,-1 9,-1 0,0 1,0 1,1 1,0 1,0 1,0 0,0 0,0 -1,-1 0,0 0,0 -1,0 -3,-1 -5,-3 -8,-5 2,-1 4,-2 7,-2 0,-1 1,-1 2,-1 1,0 3,1 4,1 3,2 4,4 6,5 3,-6 2,-16 -2,-21 1,4 -2,8 -6,9 -2,1 -4,2 -7,1 -1,0 -2,-1 -3,-2 0,-1 0,-2 0,-3 1,-3 1,-7 0,-11 -1,1 -2,1 -3,1 0,0 0,1 0,1 0,2 -1,4 -1,5 -1,2 -3,4 -4,6 -1,1 -1,2 -2,3 -1,-1 -2,-2 -2,-3 -2,-1 -3,-3 -4,-6 0,-1 -1,-3 -1,-4 0,-1 -1,-2 -1,-2 -1,0 -2,0 -3,-1 0,4 0,8 0,11 0,1 1,2 1,3 -1,1 -2,2 -3,2 -3,1 -5,0 -8,-1 -3,-1 -6,-5 -5,-9 -4,5 -6,15 -2,21 1,-1 3,-3 6,-5 1,0 2,-1 4,-1 1,0 1,0 2,1 3,0 5,1 7,2 -3,2 -6,4 -9,5 0,0 0,0 -1,0 0,1 0,1 -1,1 1,0 1,0 2,0 0,-1 0,-1 1,-1 3,0 6,0 9,1 0,1 1,1 1,1 0,0 0,0 0,0 1,1 1,1 2,2 -8,-1 -15,-2 -19,2 8,-1 1,6 -4,4 -9,-3 -8,-14 -5,-21 0,0 -11,6 -10,24 1,-2 2,-6 5,-4 1,2 0,5 -2,7 -7,8 -24,6 -24,-5 0,0 -3,0 -4,4 -2,3 -1,6 1,8z"/>
</g>
            </svg>
            <svg id="accesories" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="a_earphones" style="display:none;">
    <path fill="#f0f0f0" d="M101 154c1,-2 2,-3 4,-3l4 0c2,0 3,1 3,3l0 10c0,2 -1,4 -3,4l-4 0c-2,0 -3,-2 -4,-4l0 7c0,0 0,1 -1,1l0 0c0,15 10,28 25,46 4,4 7,8 11,13 5,6 10,10 14,13 7,6 13,10 17,22 1,4 1,8 1,14 0,6 -1,13 1,20 2,11 3,25 3,39 0,7 1,15 1,21l0 1 -2 0 0 -1c-1,-6 -1,-14 -1,-21 -1,-14 -1,-28 -3,-38 -2,-7 -2,-15 -1,-21 0,-5 0,-10 -1,-13 -4,-11 -10,-16 -16,-21 -5,-3 -10,-7 -15,-13 -3,-5 -7,-9 -10,-13 -16,-19 -27,-32 -27,-48l0 0c0,0 -1,-1 -1,-1 0,-5 0,-9 0,-14 0,-2 3,-3 5,-3z"/>
    <path fill="#f0f0f0" d="M259 154c-1,-2 -2,-3 -4,-3l-4 0c-2,0 -3,1 -3,3l0 10c0,2 1,4 3,4l4 0c2,0 3,-2 4,-4l0 7c0,0 0,1 1,1l0 0c0,10 -10,18 -22,27 -9,7 -20,15 -29,26 -4,6 -11,10 -19,15 -13,8 -26,17 -25,29l1 2 2 -1 0 -1c-1,-11 11,-19 23,-27 8,-5 15,-9 20,-15 9,-11 19,-19 29,-26 12,-10 23,-17 23,-29l0 0c0,0 1,-1 1,-1 0,-5 0,-9 0,-14 0,-2 -3,-3 -5,-3z"/>
</g>
<g id="a_earring1" style="display:none;">
    <path fill="#2B2A29" fill-rule="nonzero" d="M103 173c0,-1 0,-3 1,-4 2,-1 4,0 4,1 1,1 1,2 2,3 0,1 0,2 0,3 0,3 -1,6 -3,8l0 0c-2,2 -5,3 -8,3 -3,0 -6,-1 -8,-3 -2,-2 -3,-5 -3,-8 0,-3 1,-6 3,-8 1,-2 4,-3 7,-3l0 0 0 1c0,2 0,3 1,4 0,0 0,0 -1,0 -1,1 -2,1 -3,2 -1,1 -2,2 -2,4 0,1 1,3 2,3 1,1 2,2 4,2 1,0 3,-1 3,-2l0 0c1,0 2,-2 2,-3 0,-1 0,-1 0,-2 0,0 0,0 -1,-1z"/>
    <path fill="#2B2A29" fill-rule="nonzero" d="M261 170c0,0 0,0 0,0 0,-1 0,-2 0,-4l0 -1c3,0 6,1 8,3 2,2 3,5 3,8 0,3 -1,6 -3,8l0 0c-2,2 -5,3 -8,3 -3,0 -6,-1 -8,-3 -2,-2 -3,-5 -3,-8 0,-1 0,-2 0,-3 1,-1 1,-2 2,-3 0,-1 2,-2 4,-1 1,1 1,3 1,4 -1,1 -1,1 -1,1 0,1 0,1 0,2 0,1 1,3 2,3 1,1 2,2 3,2 2,0 3,-1 4,-2l0 0c1,0 2,-2 2,-3 0,-2 -1,-3 -2,-4 -1,-1 -2,-2 -4,-2z"/>
</g>
<g id="a_earring2" style="display:none;">
   <circle fill="gold" cx="101" cy="176" r="9"/>
   <circle fill="gold" cx="259" cy="176" r="9"/>
</g>
<g id="a_earring3" style="display:none;">
    <path fill="#57A7B3" fill-rule="nonzero" d="M108 201c3,0 5,2 7,4 2,2 3,5 3,8 0,3 -1,6 -3,8l0 0c-2,2 -5,4 -8,4 -4,0 -7,-2 -9,-4 -2,-2 -3,-5 -3,-8 0,-3 1,-6 3,-8 2,-2 5,-4 7,-4l0 -25c-1,0 -2,-1 -2,-3 0,-2 2,-3 4,-3 1,0 3,1 3,3 0,2 -1,3 -2,3l0 25zm3 8c-1,-1 -3,-2 -4,-2 -2,0 -3,1 -5,2 -1,1 -1,2 -1,4 0,1 0,3 1,4 2,1 3,2 5,2 1,0 3,-1 4,-2l0 0c1,-1 1,-3 1,-4 0,-2 0,-3 -1,-4z"/>
    <path fill="#57A7B3" fill-rule="nonzero" d="M255 201c2,0 5,2 7,4 2,2 3,5 3,8 0,3 -1,6 -3,8l0 0c-2,2 -5,4 -9,4 -3,0 -6,-2 -8,-4 -2,-2 -3,-5 -3,-8 0,-3 1,-6 3,-8 2,-2 4,-4 7,-4l0 -25c-1,0 -2,-1 -2,-3 0,-2 2,-3 3,-3 2,0 4,1 4,3 0,2 -1,3 -2,3l0 25zm3 8c-2,-1 -3,-2 -5,-2 -1,0 -3,1 -4,2 -1,1 -1,2 -1,4 0,1 0,3 1,4 1,1 3,2 4,2 2,0 3,-1 5,-2l0 0c1,-1 1,-3 1,-4 0,-2 0,-3 -1,-4z"/>
</g>
            </svg>
            <svg id="eyes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="e_default">
    <circle fill="#000000" fill-opacity="0.7" cx="148" cy="153" r="8"/>
    <circle fill="#000000" fill-opacity="0.7" cx="212" cy="153" r="8"/>
</g>
<g id="e_dizzy" style="display:none;">
    <polygon fill="#000000" fill-opacity="0.7" stroke="#5F4A37" stroke-width="0.9" points="139,141 146,149 154,141 157,145 150,152 157,160 154,163 146,156 139,163 135,160 143,152 135,145 "/>
    <polygon fill="#000000" fill-opacity="0.7" points="206,141 213,149 221,141 224,145 217,152 224,160 221,163 213,156 206,163 202,160 210,152 202,145 "/>
</g>
<g id="e_eyeroll" style="display:none;">
    <circle fill="#FEFEFE" cx="148" cy="152" r="17"/>
    <circle fill="#4D4D4D" stroke="#5F4A37" stroke-width="0.9" cx="148" cy="143" r="8"/>
    <circle fill="#FEFEFE" cx="212" cy="152" r="17"/>
    <circle fill="#4D4D4D" cx="212" cy="143" r="8"/>
</g>
<g id="e_happy" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M131 153c-1,0 0,2 1,1 2,-2 5,-3 11,-4 7,1 9,2 11,4 2,1 3,-1 2,-1 -1,-1 -5,-7 -13,-7 -7,0 -12,6 -12,7z"/>
    <path fill="#000000" fill-opacity="0.7" d="M202 153c0,0 1,2 2,1 2,-2 5,-3 11,-4 7,1 9,2 11,4 2,1 3,-1 2,-1 -1,-1 -5,-7 -13,-7 -7,0 -12,6 -13,7z"/>
</g>
<g id="e_close" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M131 160c-1,0 0,-2 1,-1 2,2 5,3 11,4 7,-1 9,-2 11,-4 2,-1 3,1 2,1 -1,1 -5,7 -13,7 -7,0 -12,-6 -12,-7z"/>
    <path fill="#000000" fill-opacity="0.7" d="M202 160c0,0 1,-2 2,-1 2,2 5,3 11,4 7,-1 9,-2 11,-4 2,-1 3,1 2,1 -1,1 -5,7 -13,7 -7,0 -12,-6 -13,-7z"/>
</g>
<g id="e_hearts" style="display:none;">
    <path fill="#FC675E" d="M138 138c4,0 7,2 9,5 1,-3 5,-5 8,-5 6,0 10,4 10,10 0,2 -1,5 -3,7 -5,5 -10,10 -15,16l-16 -16c-2,-2 -3,-5 -3,-7 0,-6 4,-10 10,-10z"/>
    <path fill="#FC675E" d="M204 138c4,0 7,2 9,5 2,-3 5,-5 9,-5 5,0 10,4 10,10 0,2 -2,5 -3,7 -5,5 -11,10 -16,16l-16 -16c-2,-2 -3,-5 -3,-7 0,-6 5,-10 10,-10z"/>
</g>
<g id="e_side" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M229 155c0,4 -3,7 -7,7 -5,0 -8,-3 -8,-7 0,-2 1,-3 1,-5 -6,1 -9,2 -11,4 -2,1 -2,-1 -2,-1 1,-1 6,-8 14,-8 4,0 8,2 10,4 2,1 3,3 3,6z"/>
    <path fill="#000000" fill-opacity="0.7" d="M157 155c0,4 -3,7 -7,7 -4,0 -8,-3 -8,-7 0,-2 1,-3 2,-5 -7,1 -10,2 -12,4 -1,1 -2,-1 -1,-1 0,-1 6,-8 13,-8 4,0 8,2 11,4 1,1 2,3 2,6z"/>
</g>
<g id="e_wink" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M225 155c1,1 0,3 -2,1 -2,-1 -4,-3 -11,-3 -6,0 -9,2 -11,3 -1,2 -2,0 -2,-1 1,-1 6,-7 13,-7 8,0 12,6 13,7z"/>
    <circle fill="#000000" fill-opacity="0.7" cx="148" cy="153" r="7"/>
</g>
<g id="e_squint" style="display:none;">
    <path fill="#FEFEFE" d="M148 159c-6,0 -13,1 -17,1 0,-1 0,-2 0,-3 0,-9 7,-16 17,-16 9,0 16,7 16,16 0,1 0,2 0,3 -3,0 -11,-1 -16,-1z"/>
    <path fill="#4D4D4D" d="M148 159c-2,0 -3,0 -4,0 -2,-1 -4,-3 -4,-6 0,-3 3,-6 8,-6 4,0 7,3 7,6 0,3 -1,5 -3,6 -2,0 -3,0 -4,0z"/>
    <path fill="#FEFEFE" d="M212 159c-5,0 -13,1 -16,1 0,-1 0,-2 0,-3 0,-9 7,-16 16,-16 10,0 17,7 17,16 0,1 0,2 0,3 -4,0 -11,-1 -17,-1z"/>
    <path fill="#4D4D4D" d="M212 159c-1,0 -2,0 -4,0 -2,-1 -3,-3 -3,-6 0,-3 3,-6 7,-6 4,0 8,3 8,6 0,3 -2,5 -4,6 -1,0 -2,0 -4,0z"/>
</g>
<g id="e_surprised" style="display:none;">
    <circle fill="#FEFEFE" cx="148" cy="153" r="17"/>
    <circle fill="#4D4D4D" stroke="#5F4A37" stroke-width="0.9" cx="148" cy="153" r="8"/>
    <circle fill="#FEFEFE" cx="212" cy="153" r="17"/>
    <circle fill="#4D4D4D" cx="212" cy="153" r="8"/>
</g>
<g id="e_winkwacky" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M131 156c-1,1 0,3 1,1 2,-1 5,-3 11,-3 7,0 9,2 11,3 2,2 3,0 2,-1 -1,-1 -5,-7 -13,-7 -7,0 -12,6 -12,7z"/>
    <circle fill="#FEFEFE" cx="212" cy="153" r="15"/>
    <circle fill="#4D4D4D" cx="212" cy="153" r="8"/>
</g>
<g id="e_cry" style="display:none;">
    <circle fill="#000000" fill-opacity="0.7" cx="148" cy="153" r="8"/>
    <circle fill="#000000" fill-opacity="0.7" cx="212" cy="153" r="8"/>
    <path fill="#92D9FF" d="M134 173c0,-3 6,-12 8,-14 2,2 7,11 7,14 0,4 -3,8 -7,8 0,0 0,0 0,0 0,0 0,0 0,0 -4,0 -8,-4 -8,-8z"/>
</g>
            </svg>
            <svg id="eyebrows" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="eb_default">
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M128 138c-1,1 -3,1 -4,0 -1,-1 -1,-2 0,-3 5,-6 10,-9 16,-11 6,-2 13,-2 20,0 2,0 3,2 2,3 0,2 -1,3 -3,2 -6,-1 -12,-2 -17,0 -5,1 -10,4 -14,9z"/>
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M232 138c1,1 2,1 3,0 2,-1 2,-2 1,-3 -5,-6 -11,-9 -17,-11 -6,-2 -13,-2 -20,0 -1,0 -2,2 -2,3 1,2 2,3 3,2 7,-1 13,-2 18,0 5,1 10,4 14,9z"/>
</g>
<g id="eb_default2" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M124 136c5,-4 11,-5 18,-6 5,-1 12,-1 20,1 -5,-6 -14,-10 -22,-7 -7,1 -13,5 -16,12z"/>
    <path fill="#000000" fill-opacity="0.7" d="M237 136c-5,-4 -12,-5 -18,-6 -5,-1 -12,-1 -20,1 5,-6 14,-10 22,-7 7,1 13,5 16,12z"/>
</g>
<g id="eb_raised" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M126 136c5,-4 8,-10 14,-13 7,-3 12,-5 23,-5 -10,-3 -20,-4 -27,0 -6,4 -9,11 -10,18z"/>
    <path fill="#000000" fill-opacity="0.7" d="M235 136c-5,-4 -8,-10 -14,-13 -8,-3 -12,-5 -23,-5 10,-3 20,-4 26,0 6,4 10,11 11,18z"/>
</g>
<g id="eb_sad" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M125 139c-2,-1 -2,-2 -2,-4 1,-1 3,-2 4,-1 0,0 1,0 1,1 6,2 12,2 17,0 5,-2 9,-6 12,-13 0,0 0,-1 1,-1 0,-2 2,-2 3,-2 2,1 2,2 2,4 -1,0 -1,1 -1,2 -4,7 -9,12 -15,15 -6,3 -14,3 -21,0 0,-1 -1,-1 -1,-1z"/>
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M234 139c2,-1 2,-2 1,-4 0,-1 -2,-2 -3,-1 -1,0 -1,0 -1,1 -6,2 -12,2 -17,0 -5,-2 -9,-6 -12,-13 0,0 -1,-1 -1,-1 -1,-2 -2,-2 -3,-2 -2,1 -2,2 -2,4 0,0 1,1 1,2 4,7 9,12 15,15 6,3 13,3 21,0 0,-1 1,-1 1,-1z"/>
</g>
<g id="eb_sad2" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M125 139c7,0 18,-1 22,-4 5,-4 11,-9 15,-15 0,5 -4,15 -10,19 -7,4 -20,4 -27,0z"/>
    <path fill="#000000" fill-opacity="0.7" d="M235 139c-8,0 -18,-1 -23,-4 -5,-4 -10,-9 -14,-15 0,5 3,15 10,19 7,4 19,4 27,0z"/>
</g>
<g id="eb_unibrow" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M120 136c3,-5 10,-11 17,-12 7,-1 14,3 20,4 7,1 13,3 20,4 -7,4 -12,4 -18,4 -7,0 -15,-4 -22,-4 -6,0 -11,2 -17,4z"/>
    <path fill="#000000" fill-opacity="0.7" d="M240 136c-3,-5 -10,-11 -17,-12 -7,-1 -14,3 -20,4 -7,1 -13,3 -20,4 7,4 12,4 18,4 7,0 15,-4 22,-4 6,0 11,2 17,4z"/>
</g>
<g id="eb_updown" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M128 134c-1,1 -2,1 -4,0 -1,-1 -1,-3 0,-4 7,-7 13,-10 20,-12 6,-1 12,0 18,3 2,1 2,2 2,4 -1,1 -3,2 -4,1 -5,-3 -10,-4 -15,-2 -6,1 -11,4 -17,10z"/>
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M237 139c1,1 0,3 -1,4 -1,1 -2,1 -3,0 -5,-5 -10,-8 -16,-9 -6,-2 -12,-2 -16,0 -2,1 -3,0 -4,-1 0,-1 0,-3 2,-4 5,-2 13,-2 20,-1 6,2 12,6 18,11z"/>
</g>
<g id="eb_updown2" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M126 136c5,-4 8,-10 14,-13 7,-3 12,-5 23,-5 -10,-3 -20,-4 -27,0 -6,4 -9,11 -10,18z"/>
    <path fill="#000000" fill-opacity="0.7" d="M237 145c-6,-3 -11,-7 -18,-8 -8,-1 -13,-2 -23,2 8,-6 17,-10 25,-8 7,2 12,7 16,14z"/>
</g>
<g id="eb_angry" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M127 136c-2,1 -3,1 -4,-1 -1,-1 -1,-3 1,-3 1,-1 2,-2 3,-3 3,-3 6,-5 10,-5 3,-1 5,0 8,2 2,1 4,3 6,5 2,1 3,3 5,3 1,1 3,1 5,1 1,0 3,0 3,2 0,1 -1,3 -2,3 -3,1 -6,0 -8,-1 -3,-1 -5,-2 -7,-4 -1,-2 -3,-3 -5,-5 -1,-1 -3,-1 -5,-1 -2,0 -4,2 -6,4 -2,1 -3,2 -4,3z"/>
    <path fill="#000000" fill-opacity="0.7" fill-rule="nonzero" d="M233 136c1,1 3,1 4,-1 1,-1 0,-3 -1,-3 -1,-1 -2,-2 -3,-3 -3,-3 -6,-5 -10,-5 -3,-1 -6,0 -8,2 -2,1 -5,3 -6,5 -2,1 -3,3 -5,3 -2,1 -3,1 -5,1 -1,0 -3,0 -3,2 0,1 0,3 2,3 3,1 5,0 8,-1 2,-1 4,-2 6,-4 2,-2 4,-3 6,-5 1,-1 3,-1 5,-1 2,0 4,2 6,4 1,1 3,2 4,3z"/>
</g>
<g id="eb_angry2" style="display:none;">
    <path fill="#000000" fill-opacity="0.7" d="M125 129c1,-4 5,-8 10,-7 5,1 9,3 13,6 5,3 12,8 17,9 -5,3 -10,2 -13,0 -5,-2 -10,-7 -16,-9 -3,-1 -7,0 -11,1z"/>
    <path fill="#000000" fill-opacity="0.7" d="M235 129c-1,-4 -5,-8 -10,-7 -5,1 -9,3 -13,6 -5,3 -12,8 -17,9 5,3 9,2 13,0 5,-2 10,-7 15,-9 4,-1 8,0 12,1z"/>
</g>
            </svg>
            <svg id="mouths" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="m_vomit" style="display:none;">
    <path fill="#000000" d="M180 193l0 0c13,0 24,11 24,25l0 2 -48 0 0 -2c0,-14 11,-25 24,-25z"/>
    <path fill="#FEFEFE" d="M180 193l0 0c6,0 12,3 17,7l-34 0c5,-4 11,-7 17,-7z"/>
    <path fill="#88C553" d="M165 211l30 0c4,0 8,4 8,8l0 6c0,4 -4,7 -8,7 -4,0 -7,-3 -7,-7 0,-3 -4,-5 -8,-5 -4,0 -7,4 -7,8 0,5 -4,8 -8,8 -4,0 -7,-3 -7,-8l0 -9c0,-4 3,-8 7,-8z"/>
</g>
<g id="m_twinkle" style="display:none;">
    <path fill="#000000" fill-rule="nonzero" d="M162 200c-1,-2 0,-3 2,-3 1,-1 3,0 3,1 1,3 2,5 5,6 2,2 5,3 8,3 3,0 6,-1 8,-3 3,-1 4,-3 5,-6 0,-1 2,-2 3,-1 2,0 3,1 2,3 -1,3 -4,6 -7,9 -3,2 -7,3 -11,3 -4,0 -8,-1 -11,-3 -3,-3 -6,-6 -7,-9z"/>
</g>
<g id="m_tongue" style="display:none;">
    <path fill="#000000" d="M180 220l0 0c17,0 31,-10 31,-23l0 -1 -62 0 0 1c0,13 14,23 31,23z"/>
    <path fill="#FEFEFE" d="M199 196l-38 0 0 2c0,3 2,5 4,5l30 0c2,0 4,-2 4,-5l0 -2z"/>
    <path fill="#FF4F6D" d="M194 220l0 0c0,8 -6,15 -14,15l0 0c-8,0 -14,-7 -14,-15l0 0 0 -7c0,-4 4,-8 8,-8 3,0 5,1 6,2 1,-1 3,-2 6,-2 4,0 8,4 8,8l0 7z"/>
</g>
<g id="m_smile" style="display:none;">
    <path fill="#000000" d="M180 220l0 0c13,0 24,-10 24,-23l0 -1 -48 0 0 1c0,13 11,23 24,23z"/>
    <path fill="#FF4F6D" d="M180 220l0 0c6,0 11,-2 16,-5 -2,-3 -5,-5 -9,-5 -3,0 -5,1 -7,2 -2,-1 -4,-2 -7,-2 -4,0 -7,2 -9,5 5,3 10,5 16,5z"/>
    <path fill="#FEFEFE" d="M199 196l-38 0 0 2c0,3 2,5 4,5l30 0c2,0 4,-2 4,-5l0 -2z"/>
</g>
<g id="m_serious" style="display:none;">
    <path fill="#000000" d="M168 203l24 0c2,0 3,2 3,4l0 0c0,2 -1,3 -3,3l-24 0c-2,0 -3,-1 -3,-3l0 0c0,-2 1,-4 3,-4z"/>
</g>
<g id="m_scream" style="display:none;">
    <path fill="#000000" d="M180 196l0 0c14,0 24,11 24,24 0,4 0,8 0,11 -8,-1 -16,-2 -24,-2 -8,0 -16,1 -24,2l0 -11c0,-13 10,-24 24,-24z"/>
    <path fill="#FEFEFE" d="M180 196l0 0c7,0 13,2 17,7l-34 0c4,-5 10,-7 17,-7z"/>
    <path fill="#FF4F6D" d="M180 222c-2,-2 -4,-2 -6,-2 -3,0 -8,1 -9,4 -2,2 -3,3 -5,7 7,-1 13,-2 20,-2l0 0 0 0c7,0 13,1 20,2 -2,-4 -3,-5 -5,-7 -1,-3 -6,-4 -9,-4 -2,0 -4,0 -6,2z"/>
</g>
<g id="m_sad" style="display:none;">
    <path fill="#000000" d="M197 217c0,0 0,-1 0,-2 0,-9 -7,-16 -17,-16 -10,0 -17,7 -17,16 0,1 0,2 0,2 4,-4 10,-6 17,-6 7,0 13,2 17,6z"/>
</g>
<g id="m_grimace" style="display:none;">
    <path fill="#FEFEFE" fill-rule="nonzero" d="M204 192l-48 0c-3,0 -7,1 -9,4 -3,2 -4,5 -4,9 0,4 1,7 4,9 2,3 6,4 9,4l48 0c3,0 7,-1 9,-4 3,-2 4,-5 4,-9 0,-4 -1,-7 -4,-9 -2,-3 -6,-4 -9,-4z"/>
    <path fill="#B2B3B3" d="M143 204l11 0 0 -12c1,0 2,0 2,0l2 0 0 12 12 0 0 -12 4 0 0 12 12 0 0 -12 4 0 0 12 12 0 0 -12 2 0c0,0 1,0 2,0l0 12 11 0c0,0 0,1 0,1 0,1 0,1 0,2l-11 0 0 11c-1,0 -2,0 -2,0l-2 0 0 -11 -12 0 0 11 -4 0 0 -11 -12 0 0 11 -4 0 0 -11 -12 0 0 11 -2 0c0,0 -1,0 -2,0l0 -11 -11 0c0,-1 0,-1 0,-2 0,0 0,-1 0,-1z"/>
    <path fill="#000000" fill-rule="nonzero" d="M156 188l48 0c4,0 9,2 12,5 3,3 5,8 5,12 0,5 -2,9 -5,12 -3,3 -8,5 -12,5l-48 0c-4,0 -9,-2 -12,-5 -3,-3 -5,-7 -5,-12 0,-4 2,-9 5,-12 3,-3 8,-5 12,-5zm48 4l-48 0c-3,0 -7,1 -9,4 -3,2 -4,5 -4,9 0,4 1,7 4,9 2,3 6,4 9,4l48 0c3,0 7,-1 9,-4 3,-2 4,-5 4,-9 0,-4 -1,-7 -4,-9 -2,-3 -6,-4 -9,-4z"/>
</g>
<g id="m_eating" style="display:none;">
    <circle fill="#E08C65" fill-opacity="0.6" cx="134" cy="199" r="11"/>
    <circle fill="#E08C65" fill-opacity="0.6" cx="226" cy="199" r="11"/>
    <path fill="#000000" d="M167 201c9,3 18,3 26,0 0,-6 5,-12 12,-13 -5,3 -8,7 -8,12 0,8 7,14 14,14 1,0 1,0 1,0 -2,1 -3,1 -5,1 -7,0 -12,-4 -14,-9 -9,3 -18,3 -27,0 -2,5 -7,8 -13,8 -2,0 -3,0 -5,-1 0,0 0,0 1,0 7,0 14,-6 14,-14 0,-5 -3,-10 -8,-12 7,1 12,7 12,14 0,0 0,0 0,0z"/>
</g>
<g id="m_disbelief" style="display:none;">
    <path fill="#000000" d="M180 199l0 0c10,0 17,8 17,17l0 1 -34 0 0 -1c0,-9 7,-17 17,-17z"/>
</g>
<g id="m_default">
    <path fill="#000000" d="M180 217l0 0c10,0 17,-8 17,-18l0 0 -34 0 0 0c0,10 7,18 17,18z"/>
</g>
<g id="m_concerned" style="display:none;">
    <path fill="#000000" d="M180 197l0 0c13,0 24,10 24,23l0 1 -48 0 0 -1c0,-13 11,-23 24,-23z"/>
    <path fill="#FEFEFE" d="M180 197l0 0c6,0 12,2 16,6l-32 0c4,-4 10,-6 16,-6z"/>
    <path fill="#FF4F6D" d="M173 211c4,0 5,1 7,3 2,-2 3,-3 7,-3 5,0 11,5 12,10l-38 0c1,-5 7,-10 12,-10z"/>
</g>
            </svg>
            <svg id="clothes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="c_blazer" style="display:none;">
    <path class="tinted" fill="#545454" d="M304 360l0 -13c0,-45 -34,-83 -79,-87l-1 -1c-2,0 -4,0 -6,0 1,0 1,1 1,1l-1 0 1 0c0,2 0,3 0,5l-3 2c-24,23 -48,23 -72,0l-3 -2c0,-2 0,-4 1,-6 -2,0 -4,0 -6,0l-1 1c-45,4 -79,42 -79,87l0 13 74 0 19 0 62 0 19 0 74 0z"/>
    <path fill="#000000" fill-opacity="0.5" d="M130 360l-20 -45c3,-4 5,-7 7,-10 -2,-3 -4,-7 -7,-10l26 -36c2,0 4,0 6,0 -5,35 0,74 7,101l-19 0z"/>
    <path fill="#000000" fill-opacity="0.5" d="M230 360l20 -45c-3,-4 -5,-7 -7,-10 2,-3 4,-7 7,-10l-26 -36c-2,0 -4,0 -6,0 5,35 0,74 -7,101l19 0z"/>
    <path fill="#ffffff" d="M244 330c10,-10 12,-13 23,-2 -8,1 -15,2 -23,2z"/>
    <path fill="#000000" fill-opacity="0.7" d="M220 271c-27,24 -54,23 -80,-1 0,-1 1,-3 1,-5l3 2c24,23 48,23 72,0l3 -2c0,2 1,4 1,6z"/>
    <path fill="#000000" fill-opacity="0.3" d="M149 360l62 0c6,-24 11,-57 9,-89 -2,1 -4,3 -6,5 -4,2 -7,5 -11,7 -21,11 -42,6 -63,-12 -2,32 3,65 9,89z"/>
</g>
<g id="c_sweater" style="display:none;">
    <path class="tinted" fill="#545454" d="M304 360l0 -15c0,-44 -34,-81 -78,-85l-15 0 0 11c0,3 -1,6 -3,7l0 0c-5,11 -15,19 -28,19 -12,0 -23,-8 -27,-18l-1 -1c-2,-1 -2,-4 -2,-7l0 -11 -16 0c-44,4 -78,41 -78,85l0 15 248 0z"/>
    <path fill="#ffffff" d="M150 271l0 -18c-4,0 -14,9 -14,23 0,10 7,18 16,23 1,-4 7,-7 10,-7 4,0 4,1 5,1l-15 -15c-2,-1 -2,-4 -2,-7z"/>
    <path fill="#ffffff" d="M211 271l0 -18c4,0 13,9 13,23 0,10 -6,18 -16,23 -1,-4 -7,-7 -10,-7 -3,0 -3,1 -5,1l15 -15c2,-1 3,-4 3,-7z"/>
</g>
<g id="c_vneck" style="display:none;">
    <path class="tinted" fill="#545454" d="M304 360l0 -15c0,-44 -34,-81 -78,-85l-46 47 -46 -47c-44,4 -78,41 -78,85l0 15 248 0z"/>
</g>
<g id="c_overall" style="display:none;">
    <path fill="#e0e0e0" d="M304 360l0 -15c0,-44 -34,-80 -77,-85 -2,24 -22,43 -46,43 -25,0 -45,-19 -47,-43l0 0c-44,4 -78,41 -78,85l0 15 248 0z"/>
    <path class="tinted" fill="#545454" d="M260 270c-10,-5 -21,-9 -32,-10l0 57 -96 0 0 -57c-11,2 -22,5 -32,11l0 89 160 0 0 -90z"/>
    <circle fill="#000000" fill-opacity="0.5" cx="118" cy="330" r="8"/>
    <circle fill="#000000" fill-opacity="0.5" cx="242" cy="330" r="8"/>
</g>
<g id="c_hoodie" style="display:;">
    <path class="tinted" fill="#545454" d="M304 360l0 -15c0,-36 -24,-68 -56,-80 -1,-13 -17,-20 -39,-23l0 22c0,16 -13,29 -30,29l0 0c-16,0 -29,-13 -29,-29l0 -22c-22,3 -38,10 -39,23 -32,13 -55,44 -55,80l0 15 248 0z"/>
    <path fill="#ffffff" d="M143 302l0 49c0,2 -2,4 -5,4 -2,0 -4,-2 -4,-4l0 -54c2,2 5,3 9,5z"/>
    <path fill="#ffffff" d="M226 297l0 40c0,2 -2,4 -5,4 -2,0 -4,-2 -4,-4l0 -35c3,-2 6,-3 9,-5z"/>
    <path fill="#000000" fill-opacity="0.4" d="M111 265c-4,2 -9,4 -14,7 10,22 36,33 69,37l0 0c-31,-5 -55,-25 -55,-42 0,-1 0,-1 0,-2z"/>
    <path fill="#000000" fill-opacity="0.4" d="M262 272c-4,-3 -9,-5 -14,-7 0,0 0,1 0,2 0,17 -24,37 -55,42l0 0c33,-4 59,-15 69,-37z"/>
</g>
            </svg>
            <svg id="hair_front" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g class="h_longhair" style="display:;">
    <path fill="#000000" fill-opacity="0.2" d="M71 174c2,-11 -13,-62 3,-94 17,-35 36,-48 83,-51 34,-3 68,-2 99,16 13,7 21,22 28,35 5,11 8,24 9,36 0,13 -6,24 -6,43 0,2 0,3 0,5l-2 -1c-8,-3 -17,-7 -25,-12 -10,-6 -20,-13 -29,-20 -11,-9 -25,-21 -34,-33 -5,7 -13,13 -20,17 -6,4 -13,7 -19,9 -8,3 -15,6 -23,9 -8,3 -16,6 -24,10 -12,7 -17,7 -40,31zm126 -85l-1 0c0,0 0,0 0,0l1 0z"/>
    <path class="tinted" fill="#bb7748" d="M71 174c3,-11 -13,-62 3,-94 17,-35 36,-48 83,-51 34,-3 68,-2 99,16 13,7 21,22 28,35 5,11 8,24 9,36 0,13 -6,24 -6,43 -25,-9 -74,-43 -91,-70 -6,17 -31,28 -62,40 -25,8 -46,14 -63,45z"/>
</g>
<g class="h_longhairbob" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M111 136c13,-4 18,-9 36,-29 2,-3 4,-6 5,-9 24,24 56,38 88,45l-6 -10c2,1 22,10 26,10 0,-14 -11,2 -11,-15 0,-38 -31,-69 -69,-69l0 0c-44,0 -69,35 -69,77z"/>
    <path class="tinted" fill="#bb7748" d="M70 156l0 0c0,1 -1,3 -1,4l3 -3c17,7 84,-59 77,-72 10,16 55,44 80,49 -4,-7 -9,-10 -13,-17 16,11 53,33 72,38 -8,-32 -25,-73 -44,-95 -20,-22 -60,-22 -65,-22 -5,0 -45,-1 -65,22 -18,20 -34,61 -43,93 -1,1 -1,2 -1,3z"/>
</g>
<g class="h_hairbun" style="display:none;">
    <path class="tinted" fill="#bb7748" d="M204 46c28,11 48,41 48,75 0,5 -1,10 -1,14l-2 0c-3,-40 -33,-64 -69,-64 -36,0 -66,24 -69,64l-2 0c0,-4 -1,-9 -1,-14 0,-34 20,-64 48,-75 -3,-3 -5,-7 -5,-12 0,-12 13,-22 29,-22 16,0 29,10 29,22 0,5 -2,9 -5,12z"/>
</g>
<g class="h_longhaircurly" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M97 143c2,-1 4,-3 6,-5 5,-5 17,-11 22,-19 10,-16 12,-23 16,-22 13,4 20,3 39,3 19,0 26,1 39,-3 4,-1 7,6 16,22 4,7 13,11 22,19 2,2 4,3 6,5 -11,-6 -24,-13 -31,-22 -3,-5 -6,-10 -9,-15 -1,-1 -2,-4 -4,-5 -4,1 -8,2 -12,2 -4,1 -8,1 -12,1 -5,0 -10,0 -15,0 -5,0 -10,0 -15,0 -4,0 -8,0 -12,-1 -4,0 -8,-1 -12,-2 -2,1 -3,4 -4,5 -3,5 -6,10 -9,15 -13,14 -26,16 -31,22z"/>
    <path class="tinted" fill="#bb7748" d="M59 95c9,-20 27,-34 42,-33 2,-13 13,-25 29,-32 19,-8 38,-6 50,3 12,-9 31,-11 50,-3 16,7 27,19 29,32 15,-1 33,13 42,33 13,33 -4,80 -44,43 -5,-5 -17,-11 -22,-19 -10,-16 -12,-23 -16,-22 -13,4 -20,3 -39,3 -19,0 -26,1 -39,-3 -4,-1 -6,6 -16,22 -5,8 -17,14 -22,19 -8,7 -14,19 -30,13 -18,-7 -24,-32 -14,-56z"/>
</g>
<g class="h_longhaircurvy" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M112 121c8,-7 21,-11 38,-13l1 -7 1 7c6,-1 12,-2 18,-2l2 -11 2 11c12,-1 24,0 34,1l1 -6 1 7c18,2 32,7 39,15l0 5c-6,-9 -28,-15 -39,-17l-1 0 -1 0c-11,-2 -22,-2 -34,-2l-2 0 -2 0c-5,1 -11,1 -17,2l-1 0 -1 0c-11,2 -30,6 -39,13l0 -3z"/>
    <path class="tinted" fill="#bb7748" d="M183 34c50,0 67,23 80,68 4,14 13,31 20,43 5,12 0,17 0,25 8,2 23,10 30,27 4,10 -4,31 -15,38 -3,3 0,24 -6,37 -7,14 -13,13 -23,19 -7,4 23,38 4,63 -12,-22 -36,0 -51,-10 -18,-10 -18,-27 -18,-38 0,-11 10,-46 29,-65 -2,-16 18,-47 17,-60l-1 -58c-7,-8 -21,-13 -39,-15l-1 -7 -1 6c-10,-1 -22,-2 -34,-1l-2 -11 -2 11c-6,0 -12,1 -18,2l-1 -7 -1 7c-17,2 -30,6 -38,13 0,27 -1,64 0,68 2,11 19,33 17,63 -1,16 -26,29 -26,38 0,6 0,19 23,21 -6,7 -23,3 -27,1 0,5 1,5 4,10 -10,-3 -15,-11 -16,-15 -6,7 -2,14 -5,24 -22,-10 -25,-31 -26,-36 -2,-33 11,-36 9,-45 -4,-17 -19,-20 -19,-37 0,-19 23,-41 28,-47 5,-6 -1,-20 0,-30 3,-18 18,-35 19,-35 31,-44 27,-67 90,-67z"/>
</g>
<g class="h_longhairdread" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M220 103c-6,-4 -15,-7 -22,-9 -7,-2 -16,-4 -22,-9 -8,5 -16,8 -25,11 -20,6 -26,10 -32,26 1,-4 2,-7 3,-10 1,-4 4,-7 7,-11 6,-4 13,-7 21,-9 8,-3 17,-5 26,-11 6,4 14,7 23,9 8,3 17,5 23,9 5,4 9,8 13,13 2,3 4,7 5,10 -5,-7 -11,-13 -20,-19z"/>
    <path class="tinted" fill="#bb7748" fill-rule="nonzero" d="M138 345c1,4 0,8 -4,9 -4,2 -8,0 -9,-3 -4,-9 -6,-19 -6,-29 -4,8 -7,16 -9,27 -1,4 -4,6 -8,6 -4,-1 -6,-5 -6,-8 1,-2 1,-4 1,-6 -2,6 -5,11 -11,17 -3,3 -8,3 -10,0 -3,-3 -3,-7 0,-10 9,-9 11,-19 10,-29 -1,8 -4,15 -10,22 -2,3 -6,3 -9,1 -3,-3 -4,-7 -2,-10 6,-7 9,-16 9,-26 0,-4 -1,-7 -1,-11 -3,6 -7,12 -12,18 -2,3 -6,3 -9,1 -3,-3 -4,-7 -1,-10 10,-14 14,-25 13,-35 0,0 0,0 0,0 0,0 0,0 0,-1 -1,-6 -4,-11 -7,-16 -2,1 -3,3 -4,4 -2,2 -4,5 -5,6 0,0 1,2 2,3 1,2 2,3 3,5 1,4 -1,8 -5,9 -3,2 -7,0 -9,-4 0,-1 0,-2 -1,-3 -2,-4 -5,-8 -3,-14 2,-4 4,-8 7,-11 2,-2 4,-5 5,-7 1,-5 0,-11 0,-17 -1,-7 -2,-15 0,-23 2,-7 6,-14 10,-21 2,-3 3,-5 5,-7 1,-4 1,-14 0,-24 0,-8 0,-15 1,-19 2,-5 10,-20 17,-33 7,-12 14,-23 16,-24 1,-1 2,-2 4,-2 3,-3 9,-6 12,-9 0,-1 -1,-2 -1,-3 0,-5 0,-10 5,-14 5,-3 9,-3 14,-2 2,0 3,1 4,0 0,0 0,-1 1,-2 2,-4 4,-8 10,-10l0 0c6,0 10,2 14,4 2,1 4,2 5,2 4,0 7,-1 10,-2 5,-1 10,-3 17,-2l0 0c6,1 8,5 11,8 1,2 3,3 3,4 1,0 4,-1 6,-2 6,-2 11,-4 17,-2 7,3 11,8 14,14 2,2 3,4 5,6 4,5 10,9 16,13 3,2 5,4 8,6 0,1 2,2 3,3 6,4 11,8 14,16 3,10 4,22 5,33 0,4 1,8 1,11 1,7 2,12 3,17 2,5 4,9 7,15 1,3 4,7 6,10 2,3 4,5 6,6 4,3 4,7 2,10 -2,3 -7,4 -10,2 0,0 0,-1 0,-1 0,9 6,19 11,29 5,9 11,19 13,29 1,3 -1,7 -5,8 -1,0 -2,0 -2,0 1,5 2,11 3,16 1,4 -2,8 -5,8 -2,1 -4,0 -6,-1 1,4 1,7 2,11 1,5 2,12 4,17 1,4 -2,8 -5,9 -4,1 -8,-2 -9,-5 -2,-8 -3,-13 -4,-19 -2,-9 -3,-18 -7,-27 1,3 2,6 2,10 2,6 3,12 4,18 1,3 -1,7 -5,8 -3,1 -6,-1 -8,-3l1 3c2,8 4,15 5,22 1,4 -2,8 -6,9 -3,0 -7,-2 -8,-6 -1,-7 -3,-14 -4,-22 -2,-7 -4,-14 -5,-21 -2,12 -3,24 0,39 0,3 -2,7 -6,8 -4,1 -7,-2 -8,-6 -2,-11 -2,-20 -2,-29 -2,10 -3,22 -2,34 1,4 -2,7 -6,8 -4,0 -7,-3 -8,-7 -1,-10 -1,-21 1,-30 -3,3 -4,6 -5,10 -3,7 -2,16 1,26 1,3 -2,7 -5,8 -4,1 -8,-1 -9,-5 -3,-12 -4,-23 -1,-33 1,-1 1,-2 1,-3 -4,8 -7,17 -9,28 0,4 -4,6 -8,6 -3,-1 -6,-5 -5,-8 2,-12 5,-22 9,-30 -2,2 -3,3 -5,5 -2,3 -7,3 -10,1 -3,-3 -3,-7 -1,-10 2,-1 4,-5 8,-9 13,-15 35,-41 37,-47 2,-8 1,-21 -1,-33 0,-7 -1,-14 -1,-20 0,-9 1,-18 1,-27 2,-16 3,-31 0,-45 -1,-5 -3,-9 -5,-13 -4,-5 -8,-9 -13,-13 -6,-4 -15,-6 -23,-9 -9,-2 -17,-5 -23,-9 -9,6 -18,8 -26,11 -8,2 -15,5 -21,9 -3,4 -6,7 -7,11 -2,4 -3,9 -4,15 -1,13 -3,26 -3,39 -1,12 0,25 1,38 1,6 5,13 9,19 3,5 6,10 8,15 2,4 0,0 1,3 4,10 8,20 10,31 1,7 0,14 -1,21 0,8 -1,16 1,22 1,6 5,11 10,16 2,3 5,6 7,9 2,4 1,8 -2,10 -3,2 -7,1 -10,-2 -1,-3 -4,-5 -6,-8 -4,-4 -7,-9 -10,-14 0,7 2,13 5,19z"/>
</g>
<g class="h_nottoolong" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M261 146c-1,-2 -2,-3 -3,-5 -21,-8 -40,-22 -54,-54 -6,14 -18,26 -34,31 7,-7 13,-15 14,-25 -28,25 -55,40 -80,46 -2,2 -3,3 -4,5 28,-6 54,-21 76,-39 -3,4 -5,7 -9,10l-11 11 15 -5c14,-4 25,-14 33,-26 7,14 16,26 28,36 9,7 19,12 29,15z"/>
    <path class="tinted" fill="#bb7748" d="M272 146c0,-6 0,-12 0,-18 0,-51 -42,-93 -93,-93l0 0c-44,0 -82,32 -90,75 0,0 -1,0 -1,0 -7,0 -13,7 -13,16 0,7 4,15 12,16 31,-2 63,-19 97,-49 -1,10 -7,18 -14,25 16,-5 28,-17 34,-31 16,39 42,51 68,59z"/>
</g>
<g class="h_miawallace" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M249 130l0 -2c0,-38 -31,-69 -69,-69l0 0c-38,0 -69,31 -69,69l0 1c10,-3 21,-3 34,-3l3 0 2 -11 2 11 3 0c8,0 16,0 24,0 8,0 16,0 24,0 7,0 14,0 21,0 8,0 17,1 25,4z"/>
    <path class="tinted" fill="#bb7748" d="M179 39c-64,0 -74,23 -94,83 -4,12 -8,23 -12,33l0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0c19,-29 38,-33 72,-33l5 -24 5 24c7,0 15,1 24,1 55,0 81,-6 105,32l0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0c-3,-10 -7,-21 -11,-33 -21,-60 -30,-83 -94,-83z"/>
</g>
<g class="h_longhairstraight" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M249 135l0 -7c0,-38 -31,-69 -69,-69l0 0c-38,0 -69,31 -69,69l0 7 5 -6c32,-3 60,-23 80,-46 12,24 28,44 53,52z"/>
    <path class="tinted" fill="#bb7748" d="M273 140l0 -11c0,-51 -42,-92 -93,-92l0 0c-50,0 -92,41 -92,92 0,74 0,148 0,222 16,-2 28,-16 28,-33 0,-59 0,-129 0,-189 31,-8 58,-25 81,-53 18,40 42,63 76,64z"/>
</g>
<g class="h_longhairstraight2" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M249 136l0 -8c0,-38 -31,-69 -69,-69l0 0c-38,0 -69,31 -69,69l0 8c17,-11 34,-19 41,-22 11,-4 21,-8 31,-12 8,-4 16,-8 23,-13 1,1 3,1 4,2 7,5 14,9 20,16 1,2 19,29 19,29z"/>
    <path class="tinted" fill="#bb7748" d="M261 147c1,-27 3,-58 -1,-69 -6,-19 -26,-39 -53,-33 -5,-8 -22,-18 -47,-13 -31,7 -68,38 -69,80 -1,27 -1,56 -2,84 1,-22 6,-45 22,-60 25,-25 73,-32 94,-52 16,11 33,18 44,52l0 0c6,1 11,5 12,11z"/>
</g>
<g class="h_shorthairdreads" style="display:none;">
    <path class="tinted" fill="#bb7748" fill-rule="nonzero" d="M105 91c0,0 0,-1 0,-1 -1,-2 0,-5 2,-6 1,-1 1,-2 1,-3 0,-1 -1,-1 -1,-2 -1,-3 1,-5 3,-6 1,0 2,0 3,0 0,-1 0,-1 1,-2 -2,0 -3,-2 -3,-5 1,-2 3,-4 5,-3 1,0 3,1 4,1 1,-1 2,-2 3,-4 0,0 0,-1 0,-2 0,-1 0,-3 0,-5 -1,-2 1,-4 3,-5 3,0 5,1 5,4 0,1 0,1 0,2 2,-2 4,-3 6,-4 0,-1 0,-3 0,-4 0,-3 2,-5 4,-5 3,0 5,2 5,5l0 0c1,0 3,-1 4,-1 0,-1 0,-1 0,-2 -1,-2 0,-4 2,-5 3,-1 5,0 6,3 0,0 0,1 0,1 2,-1 4,-1 7,-1 0,-1 0,-1 0,-2 0,-2 2,-4 4,-4 3,0 4,2 4,5 2,-1 4,-1 5,-1 1,-1 2,-3 4,-2 2,0 4,1 4,3 2,0 3,0 5,0 1,-1 2,-2 4,-2 2,0 3,2 4,4 1,0 2,0 4,1l0 0c0,0 0,0 1,0 2,-1 4,0 5,2 0,0 1,1 1,1 1,1 3,2 5,3 0,0 0,1 1,1 0,-1 1,-1 1,-2 2,-1 5,-1 7,1 1,1 1,4 -1,6 0,0 -1,1 -2,2 1,0 1,1 2,1 0,0 1,0 1,-1 2,0 4,-1 6,-2 2,-1 4,0 6,2 1,2 0,4 -2,5 1,1 3,1 4,2 1,0 3,-1 5,-1 2,-1 4,1 5,3 0,3 -1,5 -4,6 0,0 0,0 0,0 1,2 3,5 4,9 6,22 -1,23 -18,13 -10,-5 -26,-12 -50,-11 -13,0 -28,1 -46,8 -12,5 -18,9 -18,16 -1,13 -4,26 -4,29 -1,0 -3,0 -5,1 -1,-3 -1,-7 -2,-10 -1,-10 -2,-19 0,-26 0,-4 0,-7 0,-10zm134 16c-2,-6 4,-6 6,-4 3,3 4,7 5,11 1,3 1,21 -1,22 -4,0 -2,-9 -5,-18 -1,-6 -5,-11 -5,-11z"/>
</g>
<g class="h_shorthairdreads2" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M180 59l0 0c-29,0 -55,18 -65,45 5,-7 19,-12 26,-12 6,0 17,0 25,0 5,0 10,0 14,0 5,0 9,0 13,0 9,0 18,-1 26,0 6,1 19,4 26,12 -10,-27 -36,-45 -65,-45z"/>
    <path class="tinted" fill="#bb7748" fill-rule="nonzero" d="M126 229c-1,0 -1,0 -1,1 0,0 -1,1 -2,1 -2,2 -5,3 -7,3 -1,1 -2,1 -3,3 -1,1 -3,2 -5,1 -2,-1 -2,-3 -2,-4 2,-4 5,-5 8,-6 1,-1 2,-1 3,-2 -4,-4 -8,-8 -11,-12l0 0c-1,0 -3,0 -7,0 -1,-1 -3,-2 -2,-4 0,-2 2,-4 4,-3l0 0c-5,-7 -7,-12 -8,-16 -2,0 -4,2 -5,3 -1,2 -2,4 -3,6 0,1 -2,2 -4,2 -2,-1 -3,-3 -2,-5 1,-2 2,-5 4,-7 0,-1 0,-1 1,-2 -4,1 -9,-1 -10,-2 -2,-2 -2,-4 -1,-5 1,-2 3,-2 5,-1 1,1 3,1 6,1 1,0 2,0 3,0 -2,-1 -4,-3 -6,-5 0,-1 -1,-2 -2,-2 -1,-2 -1,-4 1,-5 1,-1 3,-1 5,0 1,1 1,2 2,2 2,2 3,4 3,3 0,0 0,0 1,-1 0,0 1,-1 1,-2 -1,-3 -2,-4 -4,-6 0,0 -1,-1 -1,-1 -4,2 -7,2 -11,2 -6,-1 -11,-5 -14,-8 -1,-1 -1,-4 0,-5 1,-1 4,-1 5,0 2,2 6,5 10,6 2,0 4,0 5,-1 0,-1 -1,-4 -1,-6l-10 -8c-2,-1 -2,-3 -1,-5 1,-1 4,-1 5,0l6 4c0,-4 1,-8 2,-14 -1,-1 -2,-2 -3,-3 -2,-2 -5,-4 -7,-5 -2,0 -3,1 -4,1 -1,1 -2,2 -3,3 -2,2 -4,2 -5,0 -2,-1 -2,-3 0,-5 1,-1 3,-3 4,-4 3,-1 5,-2 8,-2 5,1 8,3 11,6 0,0 0,0 0,-1 -2,-2 -5,-4 -8,-6l0 0c-4,-3 -7,-5 -9,-6 -2,-1 -3,-3 -2,-4 0,-2 3,-3 4,-3 3,1 7,4 11,7l0 0c0,0 0,0 1,1 0,-1 -1,-2 -1,-2 0,0 0,0 0,-1 -4,-1 -6,-4 -7,-6 0,-2 1,-4 2,-5 2,0 4,1 5,3 0,0 0,0 0,0 1,0 1,-1 1,-2 -4,-4 -6,-2 -10,1l-1 0c-1,1 -4,1 -5,-1 -1,-1 -1,-3 1,-4l1 -1c7,-5 10,-8 16,-2 0,-1 1,-1 1,-2 1,-3 3,-6 4,-8 -4,-4 -6,-11 -7,-15 0,0 -1,-1 -1,-1 0,-2 1,-4 2,-5 2,-1 4,0 5,2 0,1 0,1 0,2 1,2 2,5 3,8 0,-2 0,-3 0,-4 -1,-2 -2,-3 1,-8 -1,0 -2,-1 -2,-2 -3,-4 -5,-8 -5,-13 -1,-2 1,-4 3,-4 2,0 3,1 4,3 0,4 2,7 3,10 1,0 1,1 2,1 1,0 3,0 6,1 0,0 1,0 2,0 0,-3 1,-6 2,-9 0,-3 1,-6 2,-7 2,-2 4,-2 5,-1 2,1 2,3 1,5 0,1 -1,3 -2,5l0 0c3,-2 7,-6 11,-9 -3,-5 -3,-11 -3,-16 0,-2 0,-3 0,-5 -1,-2 1,-3 3,-3 2,0 3,1 4,3 0,2 0,3 0,5 0,4 0,8 2,12 2,-1 4,-2 6,-3 2,-5 1,-7 1,-10 0,-1 0,-2 0,-4 0,-1 1,-3 3,-3 2,0 4,1 4,3 0,1 0,2 0,3 0,3 1,5 0,7 3,0 5,-1 8,-2 0,-5 1,-7 3,-10 1,-1 1,-2 2,-3 1,-2 3,-2 5,-1 2,1 2,3 1,4 -1,2 -1,3 -1,3 -2,2 -2,4 -3,6 2,0 3,0 5,0 1,-5 2,-7 4,-9l1 0c1,-2 3,-2 5,0 1,1 1,3 0,5l-1 0c-1,1 -1,2 -2,3 3,1 6,1 10,1 -1,0 -1,-1 -2,-1 0,-1 0,-1 -1,-1 -1,-2 -1,-4 1,-5 1,-2 3,-1 5,0 0,0 0,0 0,1 2,2 4,3 5,7 1,0 2,1 3,1l4 1c6,-6 7,-7 8,-8 0,-1 1,-2 2,-4 1,-2 4,-2 5,-1 2,2 2,4 1,5 -1,2 -2,2 -2,3 -1,1 -1,3 -5,7 2,0 4,0 6,1 1,-4 3,-6 4,-8 0,-1 0,-1 1,-2 0,-2 3,-2 4,-1 2,1 3,3 2,4 0,1 -1,2 -1,2 -1,2 -2,4 -3,6 3,1 4,1 5,2 1,-2 1,-3 1,-4 1,-4 4,-6 6,-7 1,-1 3,-1 4,1 2,1 1,3 0,4 -1,1 -2,2 -3,4 -1,2 -1,6 0,11 1,0 2,0 3,1 0,0 0,0 0,0 1,-2 1,-4 2,-5 0,-2 0,-3 0,-5 0,-2 2,-3 4,-3 2,0 3,2 3,4 0,2 0,3 0,4 -1,2 -1,4 -2,7 2,1 4,2 6,3 1,-2 1,-4 1,-5 0,-2 1,-4 3,-4 2,0 4,2 4,4 0,3 0,6 -1,9 -1,1 -1,2 -1,3 0,0 0,1 0,1 0,1 0,3 1,3 1,1 1,1 2,1 1,0 2,-1 3,-1 1,-4 1,-6 0,-8 0,-1 0,-3 0,-5 0,-2 1,-4 3,-4 2,0 4,2 4,4 0,1 0,2 0,3 1,3 2,6 -1,16 0,0 -1,1 -1,2 1,2 2,4 3,7 0,-3 1,-5 1,-6 0,0 0,-1 0,-2 0,-1 2,-3 4,-2 2,0 3,2 3,4 0,0 0,0 0,1 0,2 -1,6 -3,10 -1,2 -2,3 -2,4 0,1 1,3 1,5 2,-5 3,-10 4,-10 0,-2 1,-4 3,-4 2,1 4,2 4,4 -1,2 -3,9 -5,14l0 1c1,-2 3,-4 4,-5 2,-1 4,-1 5,0 1,2 1,4 0,5 -1,1 -2,3 -4,5 -2,2 -4,4 -6,6l1 2c0,2 0,3 1,4 1,-4 2,-7 2,-8 0,-2 2,-4 4,-4 1,0 3,2 3,4 0,2 -1,6 -3,11 3,-2 6,-4 8,-4 2,0 3,2 3,4 0,2 -1,4 -3,4 -1,0 -5,2 -9,4 -1,1 -3,2 -4,3 0,0 0,0 0,1l0 0c3,0 6,1 8,1 2,0 3,1 3,3 0,2 -1,4 -3,4 -3,0 -5,-1 -8,-1l0 0c5,2 9,5 9,5 2,1 3,3 2,5 -1,1 -3,2 -5,1 -2,-1 -5,-3 -9,-5l0 0c-1,1 -1,1 -1,1 2,1 4,2 6,3 4,2 8,5 12,6 1,1 2,3 2,5 -1,1 -3,2 -5,2 -3,-2 -6,-3 -9,-5 0,1 1,3 1,4l0 1c2,1 3,2 4,3 2,1 3,4 4,8 0,3 0,6 0,10 0,2 -1,3 -3,3 -2,0 -4,-1 -4,-3 0,-4 0,-7 0,-9 -1,-2 -1,-3 -2,-4 0,0 -1,-1 -1,-1 -1,1 -2,2 -3,3 -1,1 -1,2 -2,3 2,3 4,6 6,10l0 1c1,2 1,4 -1,5 -2,1 -4,0 -5,-1l0 -2 -1 0c0,1 0,2 -1,4 5,1 5,3 6,5 0,1 1,3 2,4 1,2 1,4 -1,5 -1,1 -4,1 -5,-1 -1,-2 -2,-4 -2,-5 -1,-1 -1,-1 -5,-3 0,0 -1,0 -1,0 -1,0 -1,0 -2,0 -1,1 -3,1 -3,2 -1,2 -2,3 -2,3 2,1 4,1 7,2 0,0 1,0 2,0 2,0 3,1 3,3 0,2 -2,4 -4,4 -1,0 -1,0 -2,0 -2,-1 -4,-1 -6,-1 0,1 -1,1 -1,2 1,1 4,2 8,2 2,1 3,2 3,4 0,2 -2,4 -4,3 -6,-1 -10,-2 -12,-3 -2,2 -5,5 -8,8 0,0 0,1 1,1 3,1 6,2 9,3 1,0 3,2 2,4 0,2 -2,3 -4,3 -2,-1 -6,-2 -10,-4 1,2 1,4 1,6 1,4 2,8 2,13 -1,2 -2,3 -4,3 -2,0 -4,-2 -3,-4 0,-4 -1,-7 -2,-11 0,-3 -1,-6 -1,-10 0,-1 0,-2 0,-2 0,0 0,0 0,-1 0,0 0,-1 0,-2l0 0c-1,1 -1,1 -2,2 9,-11 14,-24 15,-38 7,-1 13,-7 13,-15l0 -15c0,-8 -6,-14 -13,-15l0 -8c0,-9 -2,-18 -5,-26 -10,-18 -39,-13 -64,-14 -25,1 -54,-4 -64,14 -3,8 -5,17 -5,26l0 8c-7,1 -13,7 -13,15l0 15c0,8 6,14 13,15 2,18 9,34 22,45 -3,1 -6,2 -7,3z"/>
</g>
<g class="h_shorthairfrizzle" style="display:none;">
    <path class="tinted" fill="#bb7748" d="M129 82c36,0 66,0 102,0 10,-6 20,-16 22,-27 1,-11 -4,-25 -12,-33 -4,5 -12,19 -31,19 -15,1 -30,-7 -45,-4 -11,3 -16,15 -24,22 -5,4 -12,5 -15,10 -1,4 1,10 3,13z"/>
</g>
<g class="h_shorthairshaggy" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M247 138l0 -8c0,-37 -30,-68 -68,-68l0 0c-38,0 -102,51 -68,68l20 11 -14 12c15,-3 23,-4 35,-13 9,-7 16,-17 22,-28 0,2 -1,3 -1,5l-4 11 9 -7c8,-5 14,-14 17,-24 3,5 6,9 10,13 3,3 6,6 9,8l10 9 -4 -12c0,-1 0,-1 -1,-2 9,5 17,12 28,25z"/>
    <path class="tinted" fill="#bb7748" d="M78 100c19,11 27,-19 35,-33 11,-17 41,-30 72,-13 23,-8 49,3 62,21 12,17 11,43 0,63 -3,-12 -21,-24 -34,-33 1,3 1,5 3,11 -9,-9 -17,-15 -22,-29 -1,10 -8,25 -18,31 3,-7 2,-15 0,-20 -5,13 -14,29 -26,39 -13,10 -29,16 -45,18 10,-5 17,-8 19,-14 -36,18 -56,-6 -46,-41z"/>
</g>
<g class="h_shorthaircurly" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M249 136l0 -8c0,-38 -31,-69 -69,-69l0 0c-38,0 -69,31 -69,69l0 8c4,-20 4,-32 24,-53 6,1 12,2 19,2 4,1 9,1 14,1 11,-1 26,-3 36,-9 2,1 5,2 7,3 2,1 4,2 5,3 3,7 10,11 16,15 3,15 13,21 17,38z"/>
    <path class="tinted" fill="#bb7748" d="M205 73c-8,5 -21,9 -38,9 -11,1 -34,-3 -33,-3 -16,14 -23,32 -23,57 -1,0 -3,1 -4,1 -2,-8 -3,-10 -3,-23 0,-12 5,-32 12,-45 -4,-4 -6,-8 -6,-14 0,-10 9,-19 21,-19 1,0 2,1 4,1 7,-7 23,-12 41,-12 21,0 39,6 44,15 1,0 2,-1 4,-1 6,0 10,4 10,8 0,1 0,2 0,3 1,-1 2,-1 3,-1 7,0 13,7 13,13 0,5 0,6 -4,9 12,16 11,47 6,66 -1,0 -1,-1 -3,-1 0,-6 1,-10 -2,-14 -6,-8 -10,-17 -12,-26 -6,-4 -14,-8 -15,-15 -4,-4 -12,-5 -15,-8z"/>
</g>
<g class="h_shorthairflat" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M246 137l3 -9c10,-36 -31,-69 -69,-69l0 0c-38,0 -75,32 -69,69l1 9c2,-14 2,-16 9,-32 4,-6 8,-11 13,-16 4,-4 7,-8 9,-13 24,3 47,2 70,0 2,3 5,6 8,9 2,3 5,5 8,7 4,3 6,7 8,12 4,10 6,23 9,33z"/>
    <path class="tinted" fill="#bb7748" d="M173 41l12 -1c5,0 14,-4 19,-7 0,3 -1,6 -2,9 3,-1 8,-5 12,-6 0,3 -1,4 -2,8 4,-3 9,-5 13,-4 -3,2 -4,7 -1,9 23,15 28,38 28,56l0 32c-2,0 -4,0 -6,0 -3,-56 -17,-41 -31,-65 -25,3 -49,4 -74,0 -9,20 -29,21 -29,65l-5 0 0 -32c0,-36 23,-62 66,-64z"/>
</g>
<g class="h_shorthairround" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M248 136l0 -7c0,-38 -31,-69 -68,-69l0 0c-38,0 -69,31 -69,69l0 7c0,-19 12,-41 34,-48 0,1 0,2 0,3l0 3 3 0c19,1 36,-4 52,-13 3,3 8,6 12,8 6,4 13,7 19,11 3,2 6,4 8,7 7,10 6,12 9,29z"/>
    <path class="tinted" fill="#bb7748" d="M180 45l0 0c40,0 73,33 73,73l0 6c0,4 -1,9 -1,13 -1,0 -3,0 -4,-1 -1,-22 -2,-32 -15,-39 -14,-8 -27,-14 -32,-21 -16,9 -33,16 -52,15 0,-3 1,-6 1,-8 -30,9 -39,26 -39,53l-4 2c0,-4 -1,-10 -1,-14l0 -6c0,-40 33,-73 74,-73z"/>
</g>
<g class="h_shorthairwaved" style="display:none;">
    <path fill="#000000" fill-opacity="0.2" d="M248 136l1 -8c4,-37 -31,-69 -69,-69l0 0c-38,0 -76,32 -69,69l2 8c2,-11 2,-16 9,-33 3,-6 7,-10 12,-15 3,-3 5,-5 7,-9 24,18 52,15 78,2 1,3 2,5 5,7 1,2 4,3 6,5 2,2 4,4 5,6 9,18 9,22 13,37z"/>
    <path class="tinted" fill="#bb7748" d="M251 136c5,-9 8,-5 8,-31 0,-31 -9,-31 -15,-44 -3,-4 15,-16 0,-31 -13,-12 -22,3 -35,3 -7,-1 -15,-3 -23,-5 -8,-2 -31,-3 -43,4 -11,8 -20,17 -21,28 -14,10 -20,27 -20,45 0,11 3,22 7,31 1,0 3,0 4,0 0,-47 19,-43 27,-62 22,19 50,18 81,2 4,18 22,5 27,60l3 0z"/>
</g>
<g class="h_shorthairsides" style="display:none;">
    <path class="tinted" fill="#bb7748" d="M113 136c1,-1 1,-2 1,-3 0,-12 1,-19 2,-31 0,0 -1,0 -2,0 -4,4 -10,13 -12,32 0,2 1,4 3,4 2,-1 4,-2 6,-2l2 0zm134 0c-1,-1 -1,-2 -1,-3 0,-12 -1,-19 -2,-31 0,0 1,0 2,0 4,4 10,13 12,32 0,2 -1,4 -3,4 -2,-1 -4,-2 -6,-2l-2 0z"/>
</g>
            </svg>
            <svg id="facialhair" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="f_magnum" style="display:none;">
    <path class="tinted" fill="#6f2912" d="M170 201c7,-1 10,-4 10,-10 0,6 3,9 10,10 10,1 12,-3 20,-3 7,1 8,2 10,2 1,0 1,-1 1,-2 -6,-16 -26,-17 -31,-16 -6,1 -10,4 -10,9 0,-5 -4,-8 -10,-9 -5,-1 -25,0 -31,16 0,1 0,2 1,2 2,0 3,-1 10,-2 8,0 10,4 20,3z"/>
</g>
<g id="f_fancy" style="display:none;">
    <path class="tinted" fill="#6f2912" d="M127 194c2,2 18,0 24,-5 6,-5 20,-5 25,-1 2,2 1,5 0,5 -7,4 -15,7 -22,9 -12,4 -21,1 -27,-7 -1,-1 0,-2 0,-1zm106 0c-2,2 -18,0 -24,-5 -6,-5 -20,-5 -25,-1 -2,2 -1,5 0,5 7,4 15,7 22,9 12,4 21,1 27,-7 1,-1 0,-2 0,-1z"/>
</g>
<g id="f_magestic" style="display:none;">
    <path class="tinted" fill="#6f2912" d="M111 136c1,11 -1,61 16,60 9,0 20,-15 29,-16 13,-1 20,0 24,5 4,-5 11,-6 24,-5 9,1 20,16 29,16 17,1 15,-49 16,-60 2,13 5,25 5,38 1,11 -2,22 -4,34 -1,11 0,24 -4,35 -2,7 -9,12 -13,18 -3,3 -5,8 -8,10 -5,3 -11,3 -16,6 -18,7 -10,8 -29,8 -19,0 -11,-1 -29,-8 -5,-3 -11,-3 -16,-6 -3,-2 -5,-7 -8,-10 -4,-6 -11,-11 -13,-18 -4,-11 -3,-24 -4,-35 -2,-12 -5,-23 -4,-34 0,-13 3,-25 5,-38zm69 56c-3,3 -7,4 -13,5 -6,2 -15,4 -15,14 0,7 7,14 13,15 8,1 5,-4 15,-4 10,0 7,5 15,4 6,-1 13,-8 13,-15 0,-10 -9,-12 -15,-14 -6,-1 -10,-2 -13,-5z"/>
</g>
<g id="f_light" style="display:none;">
    <path class="tinted" fill="#6f2912" d="M174 183c-5,0 -7,0 -12,0 -6,0 -12,7 -15,13 -3,4 -4,10 -10,8 -14,-2 -20,-19 -20,-36l0 -27c0,-4 -3,-6 -6,-6 0,15 0,30 0,45 0,41 31,66 69,66 38,0 69,-25 69,-66 0,-15 0,-30 0,-45 -3,0 -6,2 -6,6l0 27c0,17 -6,34 -20,36 -6,2 -7,-4 -10,-8 -3,-6 -9,-13 -15,-13 -5,0 -7,0 -12,0 -3,0 -6,2 -6,5 0,3 3,6 6,6 5,0 8,-1 14,0 7,0 10,9 9,14 0,6 -3,12 -6,16 -3,3 -7,5 -11,5 -5,0 -5,-6 -12,-6 -7,0 -7,6 -12,6 -4,0 -8,-2 -11,-5 -3,-4 -6,-10 -6,-16 -1,-5 2,-14 9,-14 6,-1 9,0 14,0 3,0 6,-3 6,-6 0,-3 -3,-5 -6,-5z"/>
</g>
            </svg>
            <svg id="glasses" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360px" height="360px" viewBox="0 0 360 360" E="xMidYMid meet">
<g id="g_rambo" style="display:none;">
    <path fill="#2B2A29" fill-rule="nonzero" d="M106 151c-1,0 -1,-1 -1,-2 0,-1 0,-1 1,-1l4 0c1,-6 3,-11 7,-15 4,-4 11,-6 21,-6 8,0 16,1 22,3l40 0c6,-2 14,-3 22,-3 10,0 17,2 21,6 4,4 6,9 7,15l4 0c1,0 1,0 1,1 0,1 0,2 -1,2l-4 0c0,7 -3,14 -8,19 -4,5 -10,8 -19,8 -8,0 -17,-5 -23,-12 -5,-4 -9,-10 -11,-15 0,0 0,0 0,0 -1,0 -1,0 -1,-1 -1,-3 -2,-5 -3,-7 -2,-1 -3,-2 -5,-2 -2,0 -3,1 -5,2 -1,2 -2,4 -3,7 0,1 0,1 -1,1 0,0 0,0 0,0 -2,5 -6,11 -11,15 -6,7 -15,12 -23,12 -9,0 -15,-3 -19,-8 -5,-5 -8,-12 -8,-19l-4 0zm61 -19c4,3 6,6 6,10 0,0 0,0 0,0 0,0 0,0 0,-1 2,-2 4,-3 7,-3 3,0 5,1 7,3 0,1 0,1 0,1 0,0 0,0 0,0 0,-4 2,-7 6,-10l-26 0zm55 -2c-9,0 -18,1 -24,3 -5,2 -8,5 -8,9 0,7 5,15 11,22 7,6 15,11 22,11 8,0 13,-3 17,-7 5,-4 7,-11 7,-18 0,-6 -2,-11 -6,-15 -4,-3 -10,-5 -19,-5zm-60 3c-6,-2 -15,-3 -24,-3 -9,0 -15,2 -19,5 -4,4 -6,9 -6,15 0,7 2,14 7,18 4,4 9,7 17,7 7,0 15,-5 22,-11 6,-7 11,-15 11,-22 0,-4 -3,-7 -8,-9z"/>
    <path class="glass" fill-opacity="0.5" fill="#5B5B5B" d="M222 130c-9,0 -18,1 -24,3 -5,2 -8,5 -8,9 0,7 5,15 11,22 7,6 15,11 22,11 8,0 13,-3 17,-7 5,-4 7,-11 7,-18 0,-6 -2,-11 -6,-15 -4,-3 -10,-5 -19,-5zm-60 3c-6,-2 -15,-3 -24,-3 -9,0 -15,2 -19,5 -4,4 -6,9 -6,15 0,7 2,14 7,18 4,4 9,7 17,7 7,0 15,-5 22,-11 6,-7 11,-15 11,-22 0,-4 -3,-7 -8,-9z"/>
</g>
<g id="g_fancy" style="display:none;">
    <path fill="#E31E24" d="M180 145c5,0 13,-1 18,-3l0 0c8,-5 26,-11 34,-13 6,-1 21,-6 25,-1 0,1 1,2 1,3 3,8 -9,25 -12,31 -5,8 -13,13 -21,16 -8,2 -17,1 -24,-2 -6,-2 -12,-7 -14,-13l0 0c-1,-5 -5,-8 -7,-8l0 -10zm31 -5c-14,6 -20,8 -20,19 0,11 17,19 32,15 16,-5 25,-21 21,-32 -2,-8 -17,-7 -33,-2z"/>
    <path fill="#E31E24" d="M180 145c-5,0 -13,-1 -18,-3l0 0c-8,-5 -26,-11 -34,-13 -6,-1 -21,-6 -25,-1 0,1 -1,2 -1,3 -3,8 9,25 12,31 5,8 13,13 21,16 8,2 17,1 24,-2 6,-2 12,-7 14,-13l0 0c1,-5 5,-8 7,-8l0 -6 0 -4zm-31 -5c14,6 20,8 20,19 0,11 -17,19 -32,15 -16,-5 -25,-21 -21,-32 2,-8 17,-7 33,-2z"/>
    <path class="glass" fill-opacity="0.5" fill="#5B5B5B" d="M149 140c14,6 20,8 20,19 0,11 -17,19 -32,15 -16,-5 -25,-21 -21,-32 2,-8 17,-7 33,-2zm62 0c-14,6 -20,8 -20,19 0,11 17,19 32,15 16,-5 25,-21 21,-32 -2,-8 -17,-7 -33,-2z"/>
</g>
<g id="g_old" style="display:none;">
    <path fill="#4D897C" d="M180 139l-6 0c-1,0 -2,-1 -2,-2 0,0 0,0 0,0l0 0c0,0 0,0 0,0 -3,-10 -12,-16 -31,-16l-27 0c-16,0 -17,7 -17,17l0 24c0,7 7,15 13,18 4,2 8,4 12,4l20 0c8,0 15,-4 20,-9 3,-4 6,-9 7,-14l1 0c0,0 0,-1 0,-1 0,-1 0,-1 0,-1 2,-8 6,-13 10,-13l0 -7zm-61 -12l21 0c18,0 27,8 27,18l0 6c0,12 -10,29 -26,29l-14 0c-10,0 -21,-11 -21,-18l0 -23c0,-7 6,-12 13,-12z"/>
    <path fill="#4D897C" d="M180 139l6 0c1,0 2,-1 2,-2 0,0 0,0 0,0l0 0c0,0 0,0 0,0 3,-10 12,-16 31,-16l27 0c16,0 17,7 17,17l0 24c0,7 -7,15 -13,18 -4,2 -8,4 -12,4l-20 0c-8,0 -15,-4 -20,-9 -3,-4 -6,-9 -7,-14l-1 0c0,0 0,-1 0,-1 0,-1 0,-1 0,-1 -2,-8 -6,-13 -10,-13l0 -7zm61 -12l-21 0c-18,0 -27,8 -27,18l0 6c0,12 10,29 26,29l14 0c10,0 21,-11 21,-18l0 -23c0,-7 -6,-12 -13,-12z"/>
    <path class="glass" fill-opacity="0.5" fill="#5B5B5B" d="M241 127l-21 0c-18,0 -27,8 -27,18l0 6c0,12 10,29 26,29l14 0c10,0 21,-11 21,-18l0 -23c0,-7 -6,-12 -13,-12zm-122 0l21 0c18,0 27,8 27,18l0 6c0,12 -10,29 -26,29l-14 0c-10,0 -21,-11 -21,-18l0 -23c0,-7 6,-12 13,-12z"/>
</g>
<g id="g_nerd" style="display:none;">
    <path fill="#CC6F3C" d="M141 121c10,0 19,4 26,12 2,2 5,3 8,3l5 0 0 13c-3,0 -4,0 -5,2 -1,1 -2,5 -4,9 0,1 -1,1 -2,1 -1,6 -4,11 -8,15 -5,5 -12,8 -20,8 -8,0 -15,-3 -20,-8 -6,-6 -9,-13 -9,-21l0 0c-2,0 -5,-2 -5,-5 0,0 0,-1 0,-1l0 0 1 0 0 0c0,-5 -3,-7 -4,-7 -2,0 -3,-1 -3,-3 0,-2 0,-4 0,-6 0,-1 1,-3 3,-3 2,0 4,0 6,0 5,0 14,-5 15,-5 5,-2 10,-4 16,-4zm19 16c-5,-5 -12,-8 -19,-8 -7,0 -14,3 -18,8 -5,4 -8,11 -8,18 0,7 3,14 8,19 4,4 11,7 18,7 7,0 14,-3 19,-7 4,-5 7,-12 7,-19 0,-7 -3,-14 -7,-18z"/>
    <path fill="#CC6F3C" d="M219 121c-10,0 -19,4 -26,12 -2,2 -5,3 -8,3l-5 0 0 13c3,0 4,0 5,2 1,1 2,5 4,9 0,1 1,1 2,1 1,6 4,11 8,15 5,5 12,8 20,8 8,0 15,-3 20,-8 6,-6 9,-13 9,-21l0 0c2,0 5,-2 5,-5 0,0 0,-1 0,-1l0 0 -1 0 0 0c0,-5 3,-7 4,-7 2,0 3,-1 3,-3 0,-2 0,-4 0,-6 0,-1 -1,-3 -3,-3 -2,0 -4,0 -6,0 -5,0 -14,-5 -15,-5 -5,-2 -10,-4 -16,-4zm-19 16c5,-5 12,-8 19,-8 7,0 14,3 18,8 5,4 8,11 8,18 0,7 -3,14 -8,19 -4,4 -11,7 -18,7 -7,0 -14,-3 -19,-7 -4,-5 -7,-12 -7,-19 0,-7 3,-14 7,-18z"/>
    <path class="glass" fill-opacity="0.5" fill="#5B5B5B" d="M200 137c5,-5 12,-8 19,-8 7,0 14,3 18,8 5,4 8,11 8,18 0,7 -3,14 -8,19 -4,4 -11,7 -18,7 -7,0 -14,-3 -19,-7 -4,-5 -7,-12 -7,-19 0,-7 3,-14 7,-18zm-40 0c-5,-5 -12,-8 -19,-8 -7,0 -14,3 -18,8 -5,4 -8,11 -8,18 0,7 3,14 8,19 4,4 11,7 18,7 7,0 14,-3 19,-7 4,-5 7,-12 7,-19 0,-7 -3,-14 -7,-18z"/>
</g>
<g id="g_fancy2" style="display:none;">
    <path fill="#00A0E3" d="M180 145c3,0 10,-5 17,-9 1,-1 2,-1 3,-2 1,-1 1,-1 2,-1 10,-4 27,-4 41,-3 9,0 11,-2 10,16 0,8 -1,16 -7,22 -9,8 -24,8 -35,7 -7,0 -13,-3 -18,-7 -3,-3 -5,-7 -6,-12l0 0c-1,-3 -4,-6 -7,-6l0 -5zm57 -10c-60,-10 -55,34 -26,37 34,2 40,-13 38,-24 -2,-8 -8,-12 -12,-13z"/>
    <path fill="#00A0E3" d="M180 145c-3,0 -10,-5 -17,-9 -1,-1 -2,-1 -3,-2 -1,-1 -1,-1 -2,-1 -10,-4 -27,-4 -41,-3 -9,0 -11,-2 -10,16 0,8 1,16 7,22 9,8 24,8 35,7 7,0 13,-3 18,-7 3,-3 5,-7 6,-12l0 0c1,-3 4,-6 7,-6l0 -5zm-57 -10c60,-10 55,34 26,37 -34,2 -40,-13 -38,-24 2,-8 8,-12 12,-13z"/>
    <path class="glass" fill-opacity="0.5" fill="#5B5B5B" d="M123 135c60,-10 55,34 26,37 -34,2 -40,-13 -38,-24 2,-8 8,-12 12,-13zm114 0c-60,-10 -55,34 -26,37 34,2 40,-13 38,-24 -2,-8 -8,-12 -12,-13z"/>
</g>
<g id="g_harry" style="display:none;">
    <path fill="#2B2A29" fill-rule="nonzero" d="M143 125c7,0 14,3 19,8 4,4 6,8 7,13 1,-1 2,-1 3,-2 2,-2 5,-4 8,-4 3,0 6,2 8,4 1,1 2,1 3,2 1,-5 3,-9 7,-13 5,-5 12,-8 19,-8 8,0 15,3 20,8 4,5 7,11 8,18l4 0c1,0 2,1 2,1 0,1 -1,2 -2,2l-4 0c-1,7 -4,13 -8,18 -5,5 -12,8 -20,8 -7,0 -14,-3 -19,-8 -5,-5 -8,-12 -8,-19 -1,-3 -2,-5 -4,-7 -2,-1 -4,-2 -6,-2 -2,0 -4,1 -6,2 -2,2 -3,4 -4,7 0,7 -3,14 -8,19 -5,5 -12,8 -19,8 -8,0 -15,-3 -20,-8 -4,-5 -7,-11 -8,-18l-4 0c-1,0 -2,-1 -2,-2 0,0 1,-1 2,-1l4 0c1,-7 4,-13 8,-18 5,-5 12,-8 20,-8zm91 11c-4,-5 -10,-8 -17,-8 -6,0 -12,3 -17,8 -4,4 -7,10 -7,16 0,7 3,13 7,17 5,5 11,7 17,7 7,0 13,-2 17,-7 5,-4 7,-10 7,-17 0,-6 -2,-12 -7,-16zm-74 0c-5,-5 -11,-8 -17,-8 -7,0 -13,3 -17,8 -5,4 -7,10 -7,16 0,7 2,13 7,17 4,5 10,7 17,7 6,0 12,-2 17,-7 4,-4 7,-10 7,-17 0,-6 -3,-12 -7,-16z"/>
    <path class="glass" fill-opacity="0.5" fill="#5B5B5B" d="M234 136c-4,-5 -10,-8 -17,-8 -6,0 -12,3 -17,8 -4,4 -7,10 -7,16 0,7 3,13 7,17 5,5 11,7 17,7 7,0 13,-2 17,-7 5,-4 7,-10 7,-17 0,-6 -2,-12 -7,-16zm-74 0c-5,-5 -11,-8 -17,-8 -7,0 -13,3 -17,8 -5,4 -7,10 -7,16 0,7 2,13 7,17 4,5 10,7 17,7 6,0 12,-2 17,-7 4,-4 7,-10 7,-17 0,-6 -3,-12 -7,-16z"/>
</g>
            </svg>
            <div id="footer">
                <div id="menu" class="">
                    <div id="random" style="position:absolute;bottom:50px;left:0;width:60px;height:50px;cursor:pointer;background-image:url(https://i.imgur.com/IPZeZHl.png);">
                    </div>
                    <div id="menu_lines" style="position:absolute;bottom:0;left:0;width:60px;height:50px;cursor:pointer;">
                        <div id="menu1" style="bottom:10px;"></div>
                        <div id="menu2" style="bottom:22px;"></div>
                        <div id="menu3" style="bottom:34px;"></div>
                    </div>
                    <div id="menu_list">
                        <button id="skincolor" class="btn">SKIN COLOR</button>
                        <br>
                        <button id="eyes" class="btn">EYES</button>
                        <button id="eyebrows" class="btn">EYEBROWS</button>
                        <br>
                        <button id="mouths" class="btn">MOUTH</button>
                        <br>
                        <button id="hairstyles" class="btn">HAIR STYLES</button>
                        <button id="haircolors" class="btn">HAIR COLOR</button>
                        <button id="facialhairs" class="btn">FACIAL HAIR</button>
                        <br>
                        <button id="clothes" class="btn">CLOTHES</button>
                        <button id="fabriccolors" class="btn">FABRIC COLOR</button>
                        <br>
                        <button id="glasses" class="btn">GLASSES</button>
                        <button id="glassopacity" class="btn">GLASS OPACITY</button>
                        <br>
                        <button id="accesories" class="btn">ACCESORIES</button>
                        <button id="tattoos" class="btn">TATTOOS</button>
                        <br>
                        <button id="backgroundcolors" class="btn">BACKGROUND COLOR</button>
                        <hr>
                        <button id="download" class="btn">DOWNLOAD AVATAR</button>
                    </div>
                </div>
                <div id="options">
                    <div id="options_title">SELECT SKIN COLOR</div>
                    <div id="options_div">
                        <div class="skins" id="s_ffdbb4" style="background-color:#ffdbb4;"></div>
                        <div class="skins" id="s_edb98a" style="background-color:#edb98a;"></div>
                        <div class="skins" id="s_fd9841" style="background-color:#fd9841;"></div>
                        <div class="skins" id="s_fcee93" style="background-color:#fcee93;"></div>
                        <div class="skins" id="s_d08b5b" style="background-color:#d08b5b;"></div>
                        <div class="skins" id="s_ae5d29" style="background-color:#ae5d29;"></div>
                        <div class="skins" id="s_614335" style="background-color:#614335;"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
!

CSS 

              
                
body {
    font-family: arial, helvetica;
    font-size:16px;
    margin:0;
    background-color:#ffffff;
}
svg {
    position:absolute;
    top:0;
    left:0;
    width:360px;
    height:360px;
}
#avatar {
    position:relative;
    margin:auto;
    width:360px;
    height:460px;
}
#footer {
    position:absolute;
    top:360px;
    left:0;
    width:361px;
    height:99px;
    border-top:1px solid #707070;
}
#menu {
    position:absolute;
    bottom:0;
    left:0;
    width:60px;
    height:99px;
    background-color:#ffffff;
    border-right:1px solid #707070;
    z-index:200;
    overflow:hidden;
}
#menu_lines div {
    position:absolute;
    left:10px;
    width:40px;
    height:7px;
    background-color:#707070;
    -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
#menu.active #menu1 {
    top: 22px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
#menu.active #menu2 {
    opacity: 0;
    -webkit-transition: opacity 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: opacity 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
#menu.active #menu3 {
    top: 22px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
}
#options {
    position:absolute;
    top:0;
    left:61px;
    width:299px;
    height:99px;
}
#options_title {
    font-size:17px;
    font-weight:bold;
    text-align:center;
    padding-top:8px;
}
#options_div {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position:absolute;
    top:34px;
    left:0;
    width:299px;
    height:65px;
    overflow-y:hidden;
}
.skins,.eyes,.eyebrows,.mouths,.hairstyles,.haircolors,.facialhairs,.clothes,.fabriccolors,.backgroundcolors,.glasses,.glassopacity,.tattoos,.accesories {
    flex: 0 0 auto;
    top:0;
    width:53px;
    height:53px;
    margin:5px;
    border:1px solid #707070;
    cursor:pointer;
    border-radius:10px;
    background-color:#ffdbb4;
}
.eyes,.eyebrows,.mouths,.hairstyles,.facialhairs,.clothes,.glasses,.tattoos,.accesories {
    background-image:url(https://i.imgur.com/q0DdlUI.png);
}
.glassopacity {
    text-align:center;
    font-size:21px;
    font-weight:bold;
    height:43px;
    padding-top:10px;
    color:#707070;
}
#menu_list {
    position:absolute;
    bottom:10px;
    left:70px;
    width:250px;
    height:auto;
    text-align:center;
}
.btn {
    padding:8px;
    font-weight:bold;
    margin-bottom:7px;
}
#menu_list div {
    width:100%;
    cursor:pointer;
    padding:7px 0 7px 0;
    font-size:19px;
    font-weight:bold;
    color:#707070;
}
!

JS 

              
                
var skins = ["ffdbb4","edb98a","fd9841","fcee93","d08b5b","ae5d29","614335"];
var eyes = ["default","dizzy","eyeroll","happy","close","hearts","side","wink","squint","surprised","winkwacky","cry"];
var eyebrows = ["default","default2","raised","sad","sad2","unibrow","updown","updown2","angry","angry2"];
var mouths = ["default","twinkle","tongue","smile","serious","scream","sad","grimace","eating","disbelief","concerned","vomit"];
var hairstyles = ["bold","longhair","longhairbob","hairbun","longhaircurly","longhaircurvy","longhairdread","nottoolong","miawallace","longhairstraight","longhairstraight2","shorthairdreads","shorthairdreads2","shorthairfrizzle","shorthairshaggy","shorthaircurly","shorthairflat","shorthairround","shorthairwaved","shorthairsides"];
var haircolors = ["bb7748_9a4f2b_6f2912","404040_262626_101010","c79d63_ab733e_844713","e1c68e_d0a964_b88339","906253_663d32_3b1d16","f8afaf_f48a8a_ed5e5e","f1e6cf_e9d8b6_dec393","d75324_c13215_a31608","59a0ff_3777ff_194bff"];
var facialhairs = ["none","magnum","fancy","magestic","light"];
var clothes = ["vneck","sweater","hoodie","overall","blazer"];
var fabriccolors = ["545454","65c9ff","5199e4","25557c","e6e6e6","929598","a7ffc4","ffdeb5","ffafb9","ffffb1","ff5c5c","e3adff"];
var backgroundcolors = ["ffffff","f5f6eb","e5fde2","d5effd","d1d0fc","f7d0fc","d0d0d0"];
var glasses = ["none","rambo","fancy","old","nerd","fancy2","harry"];
var glassopacities = ["10","25","50","75","100"];
var tattoos = ["non","harry","airbender","krilin","front","tribal","tribal2","throat"];
var accesories = ["none","earphones","earring1","earring2","earring3"];
var current_skincolor = "edb98a";
var current_hairstyle = "longhair";
var current_haircolor = "bb7748_9a4f2b_6f2912";
var current_fabriccolors = "545454";
var current_backgroundcolors = "ffffff";
var current_glassopacity = 0.5;
$(document).ready(function() {
    $("body").delegate("#menu_list button","click",function() {
        var idx = $(this).attr("id");
        if (idx=="download") {
            var current_eyes;
            $("#eyes g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_eyes = id.substr(2);
                }
            });
            var current_eyebrows;
            $("#eyebrows g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_eyebrows = id.substr(3);
                }
            });
            var current_mouth;
            $("#mouths g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_mouth = id.substr(2);
                }
            });
            var current_facialhair = "none";
            $("#facialhair g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_facialhair = id.substr(2);
                }
            });
            var current_clothe;
            $("#clothes g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_clothe = id.substr(2);
                }
            });
            var current_glasses = "none";
            $("#glasses g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_glasses = id.substr(2);
                }
            });
            var current_tattoos = "none";
            $("#tattoos g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_tattoos = id.substr(2);
                }
            });
            var current_accesories = "none";
            $("#accesories g").each(function() {
                if ($(this).css("display")=="inline") {
                    id = $(this).attr("id");
                    current_accesories = id.substr(2);
                }
            });
            var url = "https://vitruvianman.000webhostapp.com/avatarmaker/avatar.php?skincolor="+current_skincolor;
            url += "&hairstyle="+current_hairstyle;
            url += "&haircolor="+current_haircolor;
            url += "&fabriccolors="+current_fabriccolors;
            url += "&eyes="+current_eyes;
            url += "&eyebrows="+current_eyebrows;
            url += "&mouth="+current_mouth;
            url += "&facialhair="+current_facialhair;
            url += "&clothe="+current_clothe;
            url += "&backgroundcolor="+current_backgroundcolors;
            url += "&glasses="+current_glasses;
            url += "&glassopacity="+current_glassopacity;
            url += "&tattoos="+current_tattoos;
            url += "&accesories="+current_accesories;
            window.open(url);
        } else {
            var selected = $(this).html();
            $("#options_title").html("SELECT "+selected);
            $("#options_div").html("");
            var html = "";
            switch (idx) {
                case "skincolor":
                    for (var i=0;i<skins.length; i++) {
                        skin = skins[i];
                        html += "<div class='skins' id='s_"+skin+"' style='background-color:#"+skin+";'></div>";
                    }
                    break;
                case "eyes":
                    for (i=0;i<eyes.length; i++) {
                        eye = eyes[i];
                        html += "<div class='eyes' id='e_"+eye+"' style='background-color:#"+current_skincolor+";background-position:"+(i*-53)+"px 0px;'></div>";
                    }
                    break;
                case "eyebrows":
                    for (i=0;i<eyebrows.length; i++) {
                        eyebrow = eyebrows[i];
                        html += "<div class='eyebrows' id='eb_"+eyebrow+"' style='background-color:#"+current_skincolor+";background-position:"+(i*-53)+"px -53px;'></div>";
                    }
                    break;
                case "mouths":
                    for (i=0;i<mouths.length; i++) {
                        mouth = mouths[i];
                        html += "<div class='mouths' id='m_"+mouth+"' style='background-color:#"+current_skincolor+";background-position:"+(i*-53)+"px -106px;'></div>";
                    }
                    break;
                case "hairstyles":
                    for (i=0;i<hairstyles.length; i++) {
                        hairstyle = hairstyles[i];
                        html += "<div class='hairstyles' id='h_"+hairstyle+"' style='background-color:#ffffff;background-position:"+(i*-53)+"px -159px;'></div>";
                    }
                    break;
                case "haircolors":
                    for (i=0;i<haircolors.length; i++) {
                        haircolor = haircolors[i];
                        haircolor_front = haircolor.split("_");
                        html += "<div class='haircolors' id='hc_"+haircolor+"' style='background-color:#"+haircolor_front[0]+";'></div>";
                    }
                    break;
                case "facialhairs":
                    for (i=0;i<facialhairs.length; i++) {
                        facialhair = facialhairs[i];
                        haircolor_front = facialhair.split("_");
                        html += "<div class='facialhairs' id='f_"+facialhair+"' style='background-color:#ffffff;background-position:"+(i*-53)+"px -212px;'></div>";
                    }
                    break;
                case "clothes":
                    for (var i=0;i<clothes.length; i++) {
                        clothe = clothes[i];
                        html += "<div class='clothes' id='c_"+clothe+"' style='background-color:#ffffff;background-position:"+(i*-53)+"px -265px;'></div>";
                    }
                    break;
                case "fabriccolors":
                    for (var i=0;i<fabriccolors.length; i++) {
                        fabriccolor = fabriccolors[i];
                        html += "<div class='fabriccolors' id='f_"+fabriccolor+"' style='background-color:#"+fabriccolor+";'></div>";
                    }
                    break;
                case "backgroundcolors":
                    for (var i=0;i<backgroundcolors.length; i++) {
                        backgroundcolor = backgroundcolors[i];
                        html += "<div class='backgroundcolors' id='g_"+backgroundcolor+"' style='background-color:#"+backgroundcolor+";'></div>";
                    }
                    break;
                case "glasses":
                    for (var i=0;i<glasses.length; i++) {
                        glass = glasses[i];
                        html += "<div class='glasses' id='g_"+glass+"' style='background-color:#ffffff;background-position:"+(i*-53)+"px -313px;'></div>";
                    }
                    break;
                case "glassopacity":
                    for (var i=0;i<glassopacities.length; i++) {
                        glassopacity = glassopacities[i];
                        html += "<div class='glassopacity' id='o_"+glassopacity+"' style='background-color:#ffffff;'>"+glassopacity+"%</div>";
                    }
                    break;
                case "tattoos":
                    for (var i=0;i<tattoos.length; i++) {
                        tattoo = tattoos[i];
                        html += "<div class='tattoos' id='t_"+tattoo+"' style='background-color:#ffffff;background-position:"+(i*-53)+"px -419px;'></div>";
                    }
                    break;
                case "accesories":
                    for (var i=0;i<accesories.length; i++) {
                        accesory = accesories[i];
                        html += "<div class='accesories' id='a_"+accesory+"' style='background-color:#ffffff;background-position:"+(i*-53)+"px -369px;'></div>";
                    }
                    break;
            }
            $("#options_div").html(html);
            $("#menu_lines").click();
        }
    });
    $("body").delegate("#random","click",function() {
        random();
    });
    $("body").delegate("#menu_lines","click",function() {
        menu_class = $("#menu").attr("class");
        if (menu_class==="") {
            $("#menu").addClass("active");
            $("#menu").css({
                "border":"0px"
            });
            $("#menu").stop().animate({
                "width":"360px"
            },{
                duration:300,
                complete: function() {
                    $(this).stop().animate({
                        "height":"460px"
                    },{
                        duration:300,
                    });
                }
            });
        } else {
            $("#menu").removeClass("active");
            $("#menu").css({
                "border-right":"1px solid #707070"
            });
            $("#menu").stop().animate({
                "height":"99px"
            },{
                duration:300,
                complete: function() {
                    $(this).stop().animate({
                        "width":"60px"
                    },{
                        duration:300,
                    });
                }
            });
        }
    });
    $("body").delegate(".skins","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        current_skincolor = id;
        $("#skin #body").attr("fill","#"+id);
    });
    $("body").delegate(".eyes","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#eyes g").hide();
        $("#eyes #e_"+id).show();
    });
    $("body").delegate(".eyebrows","click",function() {
        var id = $(this).attr("id");
        id = id.substr(3);
        $("#eyebrows g").hide();
        $("#eyebrows #eb_"+id).show();
    });
    $("body").delegate(".mouths","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#mouths g").hide();
        $("#mouths #m_"+id).show();
    });
    $("body").delegate(".hairstyles","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        current_hairstyle = id;
        $("#hair_front g").hide();
        $("#hair_back g").hide();
        $("#hair_front .h_"+id).show();
        $("#hair_back .h_"+id).show();
        var color = current_haircolor;
        color = color.split("_");
        $("#hair_front .h_"+current_hairstyle+" .tinted").attr("fill","#"+color[0]);
        $("#hair_back .h_"+current_hairstyle+" .tinted").attr("fill","#"+color[1]);
        $("#facialhair g .tinted").attr("fill","#"+color[2]);
    });
    $("body").delegate(".haircolors","click",function() {
        var id = $(this).attr("id");
        id = id.substr(3);
        current_haircolor = id;
        id = id.split("_");
        $("#hair_front .h_"+current_hairstyle+" .tinted").attr("fill","#"+id[0]);
        $("#hair_back .h_"+current_hairstyle+" .tinted").attr("fill","#"+id[1]);
        $("#facialhair g .tinted").attr("fill","#"+id[2]);
    });
    $("body").delegate(".facialhairs","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#facialhair g").hide();
        $("#facialhair #f_"+id).show();
    });
    $("body").delegate(".clothes","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#clothes g").hide();
        $("#clothes #c_"+id).show();
    });
    $("body").delegate(".fabriccolors","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        current_fabriccolors = id;
        $("#clothes g .tinted").attr("fill","#"+id);
    });
    $("body").delegate(".backgroundcolors","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        current_backgroundcolors = id;
        $("#background").attr("fill","#"+id);
    });
    $("body").delegate(".glasses","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#glasses g").hide();
        $("#glasses #g_"+id).show();
    });
    $("body").delegate(".glassopacity","click",function() {
        var id = $(this).attr("id");
        id = parseInt(id.substr(2));
        current_glassopacity = id/100;
        $(".glass").attr("fill-opacity",current_glassopacity);
    });
    $("body").delegate(".tattoos","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#tattoos g").hide();
        $("#tattoos #t_"+id).show();
    });
    $("body").delegate(".accesories","click",function() {
        var id = $(this).attr("id");
        id = id.substr(2);
        $("#accesories g").hide();
        $("#accesories #a_"+id).show();
    });
    random();
})
function random() {
    var rand_skins = skins[Math.floor(Math.random()*skins.length)];
    var rand_eyes = eyes[Math.floor(Math.random()*eyes.length)];
    var rand_eyebrows = eyebrows[Math.floor(Math.random()*eyebrows.length)];
    var rand_mouths = mouths[Math.floor(Math.random()*mouths.length)];
    var rand_hairstyles = hairstyles[Math.floor(Math.random()*hairstyles.length)];
    var rand_haircolors = haircolors[Math.floor(Math.random()*haircolors.length)];
    var rand_facialhairs = facialhairs[Math.floor(Math.random()*facialhairs.length)];
    var rand_clothes = clothes[Math.floor(Math.random()*clothes.length)];
    var rand_fabriccolors = fabriccolors[Math.floor(Math.random()*fabriccolors.length)];
    var rand_backgroundcolors = backgroundcolors[Math.floor(Math.random()*backgroundcolors.length)];
    var rand_glasses = glasses[Math.floor(Math.random()*glasses.length)];
    var rand_glassopacities = parseInt(glassopacities[Math.floor(Math.random()*glassopacities.length)])/100;
    var rand_tattoos = tattoos[Math.floor(Math.random()*tattoos.length)];
    var rand_accesories = accesories[Math.floor(Math.random()*accesories.length)];
    current_skincolor = rand_skins;
    current_fabriccolors = rand_fabriccolors;
    current_backgroundcolors = rand_backgroundcolors;
    current_glassopacity = rand_glassopacities;
    $("#skin #body").attr("fill","#"+rand_skins);
    $("#eyes g").hide();
    $("#eyes #e_"+rand_eyes).show();
    $("#eyebrows g").hide();
    $("#eyebrows #eb_"+rand_eyebrows).show();
    $("#mouths g").hide();
    $("#mouths #m_"+rand_mouths).show();
    current_hairstyle = rand_hairstyles;
    $("#hair_front g").hide();
    $("#hair_back g").hide();
    $("#hair_front .h_"+rand_hairstyles).show();
    $("#hair_back .h_"+rand_hairstyles).show();
    current_haircolor = rand_haircolors;
    var color = current_haircolor;
    color = color.split("_");
    $("#hair_front .h_"+current_hairstyle+" .tinted").attr("fill","#"+color[0]);
    $("#hair_back .h_"+current_hairstyle+" .tinted").attr("fill","#"+color[1]);
    $("#facialhair g .tinted").attr("fill","#"+color[2]);
    $("#facialhair g").hide();
    $("#facialhair #f_"+rand_facialhairs).show();
    $("#clothes g").hide();
    $("#clothes #c_"+rand_clothes).show();
    $("#glasses g").hide();
    $("#glasses #g_"+rand_glasses).show();
    $(".glass").attr("fill-opacity",rand_glassopacities);
    $("#clothes g .tinted").attr("fill","#"+rand_fabriccolors);
    $("#background").attr("fill","#"+rand_backgroundcolors);
    $("#tattoos g").hide();
    $("#tattoos #t_"+rand_tattoos).show();
    $("#accesories g").hide();
    $("#accesories #a_"+rand_accesories).show();
}
!
999px

Console