Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

+ 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.

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