123

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="app">
<button id="toggle">Change costume!</button>

<svg width="639px" height="500px" viewBox="0 -200 450 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
    <title>monster</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Artboard" transform="translate(-515.000000, -232.000000)">
          <path fill="#702929" d="M623,341 C627.865673,326.738543 567.491878,317.939311 573,315.5 C596.333333,305.166667 630,298.666667 674,296 L800,296 C856.666667,302 886.333333,308.5 889,315.5 C891.36803,321.716079 840.155349,322.082559 846,344 C862,404 863.49834,499.123755 918,540 C926,546 874.101339,551.276492 834,546 C779.101339,538.776492 768,508 728,515 C704.132937,519.176736 690.512937,517.029011 648,521 C599.512937,525.529011 587.889142,546.860288 590,540 C594,527 594,426 623,341 Z" id="dracula-back"></path>
          <g id="frankenstein-back" transform="translate(597.000000, 275.000000)">
                <rect id="Rectangle-2" fill="#A7A7A7" x="8" y="15" width="256" height="16"></rect>
                <rect id="Rectangle-3" fill="#D8D8D8" x="251" y="0" width="26" height="46" rx="4"></rect>
                <rect id="Rectangle-3" fill="#D8D8D8" x="0" y="0" width="26" height="46" rx="4"></rect>
            </g>
          <g id="devil-back" transform="translate(496.000000, 307.000000)">
                <g id="wing" transform="translate(242.000000, 2.000000)">
                    <path d="M63,46 C89.7449014,47.5342255 109.138625,46.5342255 121.181171,43 C139.24499,37.6986618 151.679024,23.4093319 155,19 C158.919204,13.7963873 149.42009,-0.508019005 154,1 C182.308889,10.3212196 190.901417,18.4010079 214,54 C235.220797,86.7049923 244.598977,112.046558 240.426993,127.989818 C240.057823,129.400605 239.582553,130.737802 239,132 C238.417447,133.262198 237.553671,130.181959 236.805266,129.278486 C226.029011,116.269422 212.850324,101.383225 199,106 C186.744216,110.085261 184.795482,119.714414 183,136 C182.62548,139.397016 182.62548,142 181,143 C179.37452,144 179.067718,142.372003 177,139 C170.262081,128.011907 154,126 147,126 C133.38148,126 130,132 123,153 C122.535281,154.394157 121.818829,159 119.818829,159 C117.818829,159 117.641273,154.165499 116.818829,153 C102,132 86,124 63,124 C22.8902906,124 7.61806269,89.775079 2,77.6196343 C-4.02982213,64.5732919 16.3035112,54.0334138 63,46 Z" id="Path-5" fill="#702929"></path>
                    <path d="M214,54 C235.220797,86.7049923 244.598977,112.046558 240.426993,127.989818 C240.057823,129.400605 239.582553,130.737802 239,132 C238.417447,133.262198 237.113619,130.643925 236.805266,129.278486 C232,108 228,101 217,75 C212.034143,63.2625198 200.925952,43.2954617 193,33 C187.984473,26.4850515 184,22 175,14 C168.231358,7.98342916 152.777135,1 154,1 C162.696298,1 175.928129,6.51506785 190,21 C197.899519,29.1313991 205.695214,41.200859 214,54 Z" id="Path-5" fill="#630505"></path>
                    <path d="M156,15 C175.196988,84.8096097 184.196988,125.142943 183,136 C182.62548,139.397016 182.62548,142 181,143 C179.37452,144 179.067718,142.372003 177,139 C175.642894,136.786853 174.765058,132.73805 174,129 C172.805385,123.163147 167.920205,87.5324678 163.05058,61.3762829 C160.08116,45.42666 156,33 155,33 C154,33 149.7541,48.1921989 146,61 C136.142,94.6323765 124.116053,149.651842 123,153 C122.535281,154.394157 121.818829,159 119.818829,159 C117.818829,159 116.749079,154.953004 116.818829,153 C117.485495,134.333333 130.545886,88.3333333 156,15 Z" id="Path-5" fill="#630505"></path>
                </g>
                <g id="wing" transform="translate(121.000000, 79.500000) scale(-1, 1) translate(-121.000000, -79.500000) ">
                    <path d="M63,46 C89.7449014,47.5342255 109.138625,46.5342255 121.181171,43 C139.24499,37.6986618 151.679024,23.4093319 155,19 C158.919204,13.7963873 149.42009,-0.508019005 154,1 C182.308889,10.3212196 190.901417,18.4010079 214,54 C235.220797,86.7049923 244.598977,112.046558 240.426993,127.989818 C240.057823,129.400605 239.582553,130.737802 239,132 C238.417447,133.262198 237.553671,130.181959 236.805266,129.278486 C226.029011,116.269422 212.850324,101.383225 199,106 C186.744216,110.085261 184.795482,119.714414 183,136 C182.62548,139.397016 182.62548,142 181,143 C179.37452,144 179.067718,142.372003 177,139 C170.262081,128.011907 154,126 147,126 C133.38148,126 130,132 123,153 C122.535281,154.394157 121.818829,159 119.818829,159 C117.818829,159 117.641273,154.165499 116.818829,153 C102,132 86,124 63,124 C22.8902906,124 7.61806269,89.775079 2,77.6196343 C-4.02982213,64.5732919 16.3035112,54.0334138 63,46 Z" id="Path-5" fill="#702929"></path>
                    <path d="M214,54 C235.220797,86.7049923 244.598977,112.046558 240.426993,127.989818 C240.057823,129.400605 239.582553,130.737802 239,132 C238.417447,133.262198 237.113619,130.643925 236.805266,129.278486 C232,108 228,101 217,75 C212.034143,63.2625198 200.925952,43.2954617 193,33 C187.984473,26.4850515 184,22 175,14 C168.231358,7.98342916 152.777135,1 154,1 C162.696298,1 175.928129,6.51506785 190,21 C197.899519,29.1313991 205.695214,41.200859 214,54 Z" id="Path-5" fill="#630505"></path>
                    <path d="M156,15 C175.196988,84.8096097 184.196988,125.142943 183,136 C182.62548,139.397016 182.62548,142 181,143 C179.37452,144 179.067718,142.372003 177,139 C175.642894,136.786853 174.765058,132.73805 174,129 C172.805385,123.163147 167.920205,87.5324678 163.05058,61.3762829 C160.08116,45.42666 156,33 155,33 C154,33 149.7541,48.1921989 146,61 C136.142,94.6323765 124.116053,149.651842 123,153 C122.535281,154.394157 121.818829,159 119.818829,159 C117.818829,159 116.749079,154.953004 116.818829,153 C117.485495,134.333333 130.545886,88.3333333 156,15 Z" id="Path-5" fill="#630505"></path>
                </g>
            </g>
          <g id="monster" transform="translate(510.000000, 232.000000)">
                <path d="M174.799283,202 C167.260208,236.134578 162.957651,256.414385 161.89161,262.83942 C158.912917,280.792036 167.848998,307.090523 167.848998,308.718327 C167.848998,312.715088 168.841895,310.713062 161.89161,319.68937 C154.941325,328.665678 151.780139,328.742437 149.976836,330.660413 C148.173532,332.578389 138.062061,339.636721 146.005244,344.623559 C153.948427,349.610396 163.877406,348.613029 174.799283,344.623559 C185.72116,340.634088 189.692751,336.644618 191.678547,330.660413 C193.664343,324.676208 185.887174,313.04132 183.735364,308.718327 C179.763772,300.739387 174.799283,295.635119 174.799283,266.82889 C174.799283,264.169243 178.770874,243.556981 186.714057,204.992103 L174.799283,202 Z" id="left-leg-2" fill="#A7D363"></path>
                <path d="M171.820589,251.93936 C170.238902,255.485379 168.915038,260.468535 167.848998,266.888826 C164.870304,284.828186 167.848998,307.12073 167.848998,308.747332 C167.848998,312.741142 168.841895,310.740594 161.89161,319.710274 C154.941325,328.679954 151.780139,328.756657 149.976836,330.673216 C148.173532,332.589776 138.062061,339.642896 146.005244,344.626052 C153.948427,349.609207 163.877406,348.612576 174.799283,344.626052 C185.72116,340.639527 189.692751,336.653003 191.678547,330.673216 C193.664343,324.69343 185.887174,313.067133 183.735364,308.747332 C179.763772,300.774283 174.799283,295.673785 174.799283,266.888826 C174.799283,264.231143 176.785079,253.268201 180.75667,234 L171.820589,251.93936 Z" id="left-leg-shadow-2" fill="#8AB842"></path>
                <path d="M300.799283,202 C293.260208,236.134578 288.957651,256.414385 287.89161,262.83942 C284.912917,280.792036 293.848998,307.090523 293.848998,308.718327 C293.848998,312.715088 294.841895,310.713062 287.89161,319.68937 C280.941325,328.665678 277.780139,328.742437 275.976836,330.660413 C274.173532,332.578389 264.062061,339.636721 272.005244,344.623559 C279.948427,349.610396 289.877406,348.613029 300.799283,344.623559 C311.72116,340.634088 315.692751,336.644618 317.678547,330.660413 C319.664343,324.676208 311.887174,313.04132 309.735364,308.718327 C305.763772,300.739387 300.799283,295.635119 300.799283,266.82889 C300.799283,264.169243 304.770874,243.556981 312.714057,204.992103 L300.799283,202 Z" id="right-leg-2" fill="#8AB842" transform="translate(293.500000, 275.000000) scale(-1, 1) translate(-293.500000, -275.000000) "></path>
                <path d="M80.5686229,179.149883 C84.8394011,183.658344 88.8711463,186.784306 86.5997909,188.138338 C85.085554,189.041025 80.3946456,187.709402 72.5270655,184.143469 C74.5374549,192.133206 75.5426495,196.793887 75.5426495,198.12551 C75.5426495,200.122944 75.5426495,205.11653 72.5270655,205.11653 C69.5114815,205.11653 68.8360034,203.107139 67.5010922,200.122944 C66.6111513,198.13348 65.6059567,193.805706 64.4855081,187.13962 C63.8153784,191.800301 63.1452486,195.462264 62.4751188,198.12551 C61.4699241,202.120379 60.4647294,206.115247 56.4439508,205.11653 C53.7634316,204.450719 53.7634316,198.458415 56.4439508,187.13962 C52.4231721,193.797735 49.4075881,196.793887 47.3971987,196.128075 C44.3816147,195.129358 45.0994209,190.944572 47.3971987,187.13962 C48.8924102,184.66366 53.3973627,179.529707 60.9120561,171.737762 C63.8925601,156.701502 69.0728572,151.84859 63.6483035,125.232824 C58.2237497,98.6170584 58.0271138,101.773217 48.0168348,81.1685848 C53.6660082,83.7303661 61.5019837,87.0957297 59.8735889,89.1946287 C66.8977879,98.5037978 70.1945862,111.699673 72.3035748,125.494177 C75.9117724,149.09473 73.9484793,156.994919 70.6743119,170.283808 C74.4622204,173.229935 77.760324,176.185293 80.5686229,179.149883 Z" id="left-arm-2" fill="#A7D363" transform="translate(66.325215, 143.220167) rotate(68.000000) translate(-66.325215, -143.220167) "></path>
                <path d="M375.406072,131.495526 C377.922232,111.459329 385.388663,96.5412285 388.207741,95.3954475 C386.579346,93.0516494 397.165261,87.5660352 402.814435,84.7053459 C392.311983,107.987476 386.100282,120.225249 384.762635,132.446044 C383.424988,144.666839 383.24173,152.045173 388.526336,168.258621 C396.041029,176.959729 400.545981,182.69271 402.041193,185.457565 C404.338971,189.706478 405.056777,194.379544 402.041193,195.494791 C400.030804,196.238289 397.01522,192.892548 392.994441,185.457565 C395.67496,198.097035 395.67496,204.788519 392.994441,205.532017 C388.973662,206.647264 387.968468,202.186275 386.963273,197.725286 C386.293143,194.751293 385.623013,190.662053 384.952884,185.457565 C383.832435,192.901448 382.82724,197.734187 381.9373,199.95578 C380.602388,203.288171 379.92691,205.532017 376.911326,205.532017 C373.895742,205.532017 373.895742,199.95578 373.895742,197.725286 C373.895742,196.238289 374.900937,191.033802 376.911326,182.111824 C369.043746,186.093829 364.352838,187.580826 362.838601,186.572813 C360.567245,185.060793 364.598991,181.570094 368.869769,176.535587 C371.678068,173.22509 374.976171,169.924901 378.76408,166.635021 C374.475815,148.7159 373.348681,147.878537 375.406072,131.495526 Z" id="right-arm-2" fill="#8AB842" transform="translate(383.113176, 145.205346) rotate(-70.000000) translate(-383.113176, -145.205346) "></path>
                <path d="M173.799283,210.007897 C170.260208,239.475809 167.957651,257.422282 166.89161,263.847317 C163.912917,281.799933 166.848998,315.098421 166.848998,316.726224 C166.848998,320.722985 167.841895,318.720959 160.89161,327.697267 C153.941325,336.673575 150.780139,336.750334 148.976836,338.66831 C147.173532,340.586286 137.062061,347.644618 145.005244,352.631456 C152.948427,357.618294 162.877406,356.620926 173.799283,352.631456 C184.72116,348.641986 188.692751,344.652516 190.678547,338.66831 C192.664343,332.684105 184.887174,321.049217 182.735364,316.726224 C178.763772,308.747284 179.799283,296.643016 179.799283,267.836788 C179.799283,265.177141 181.770874,244.564878 185.714057,206 L173.799283,210.007897 Z" id="left-leg-1" fill="#A7D363"></path>
                <path d="M176.820589,252.93936 C175.238902,256.485379 173.915038,261.468535 172.848998,267.888826 C169.870304,285.828186 166.848998,315.12073 166.848998,316.747332 C166.848998,320.741142 167.841895,318.740594 160.89161,327.710274 C153.941325,336.679954 150.780139,336.756657 148.976836,338.673216 C147.173532,340.589776 137.062061,347.642896 145.005244,352.626052 C152.948427,357.609207 162.877406,356.612576 173.799283,352.626052 C184.72116,348.639527 188.692751,344.653003 190.678547,338.673216 C192.664343,332.69343 184.887174,321.067133 182.735364,316.747332 C178.763772,308.774283 179.799283,296.673785 179.799283,267.888826 C179.799283,265.231143 180.777976,253.268201 182.735364,232 L176.820589,252.93936 Z" id="left-leg-shadow-1" fill="#8AB842"></path>
                <path d="M299.799283,203 C296.260208,237.134578 293.957651,257.414385 292.89161,263.83942 C289.912917,281.792036 292.848998,315.090523 292.848998,316.718327 C292.848998,320.715088 293.841895,318.713062 286.89161,327.68937 C279.941325,336.665678 276.780139,336.742437 274.976836,338.660413 C273.173532,340.578389 263.062061,347.636721 271.005244,352.623559 C278.948427,357.610396 288.877406,356.613029 299.799283,352.623559 C310.72116,348.634088 314.692751,344.644618 316.678547,338.660413 C318.664343,332.676208 310.887174,321.04132 308.735364,316.718327 C304.763772,308.739387 305.799283,296.635119 305.799283,267.82889 C305.799283,265.169243 307.770874,244.556981 311.714057,205.992103 L299.799283,203 Z" id="right-leg-1" fill="#8AB842" transform="translate(292.500000, 279.500000) scale(-1, 1) translate(-292.500000, -279.500000) "></path>
                <path d="M73.1729447,197.878135 C77.4437229,202.386595 81.4754681,205.512558 79.2041127,206.866589 C77.6898758,207.769277 72.9989673,206.437654 65.1313873,202.871721 C67.1417766,210.861458 68.1469713,215.522138 68.1469713,216.853761 C68.1469713,218.851196 68.1469713,223.844782 65.1313873,223.844782 C62.1158033,223.844782 61.4403252,221.835391 60.1054139,218.851196 C59.2154731,216.861732 58.2102784,212.533958 57.0898299,205.867872 C56.4197001,210.528552 55.7495704,214.190516 55.0794406,216.853761 C54.0742459,220.84863 53.0690512,224.843499 49.0482725,223.844782 C46.3677534,223.17897 46.3677534,217.186667 49.0482725,205.867872 C45.0274938,212.525987 42.0119098,215.522138 40.0015205,214.856327 C36.9859365,213.85761 37.7037427,209.672824 40.0015205,205.867872 C41.496732,203.391912 46.0016845,198.257959 53.5163779,190.466013 C56.4968819,175.429754 63.0490708,161.255174 73.1729447,147.942274 C83.8379587,133.917774 99.9210734,118.937016 121.422289,103 C127.071462,105.561781 129.081852,107.892121 127.453457,109.99102 C103.328785,127.96793 93.2768381,136.956385 83.2248914,148.940991 C74.5111629,159.330084 66.5528011,175.723171 63.2786337,189.01206 C67.0665421,191.958186 70.3646458,194.913545 73.1729447,197.878135 Z" id="left-arm-1" fill="#A7D363"></path>
                <path d="M381.798824,187.384415 C378.524656,174.095526 370.566294,157.70244 361.852566,147.313347 C351.800619,135.32874 341.748672,126.340286 317.624,108.363376 C315.995606,106.264477 318.005995,103.934137 323.655168,101.372356 C345.156384,117.309372 361.239499,132.29013 371.904513,146.31463 C382.028386,159.62753 388.580575,173.80211 391.561079,188.838369 C399.075773,196.630314 403.580725,201.764267 405.075937,204.240228 C407.373715,208.045179 408.091521,212.229965 405.075937,213.228683 C403.065547,213.894494 400.049963,210.898342 396.029185,204.240228 C398.709704,215.559023 398.709704,221.551326 396.029185,222.217137 C392.008406,223.215855 391.003211,219.220986 389.998017,215.226117 C389.327887,212.562871 388.657757,208.900908 387.987627,204.240228 C386.867179,210.906313 385.861984,215.234088 384.972043,217.223551 C383.637132,220.207747 382.961654,222.217137 379.94607,222.217137 C376.930486,222.217137 376.930486,217.223551 376.930486,215.226117 C376.930486,213.894494 377.935681,209.233814 379.94607,201.244076 C372.07849,204.810009 367.387582,206.141632 365.873345,205.238945 C363.601989,203.884914 367.633734,200.758951 371.904513,196.25049 C374.712812,193.2859 378.010915,190.330542 381.798824,187.384415 Z" id="right-arm-1" fill="#8AB842" transform="translate(362.077457, 161.872356) rotate(-6.000000) translate(-362.077457, -161.872356) "></path>
                <g id="body" transform="translate(106.000000, 0.000000)">
                    <path d="M41.119969,47.3712871 C26.9410586,40.3101359 21.2651229,14 25.2360921,14 C29.2070614,14 55.0183613,36.2475247 69.9094958,36.2475247 C84.8006304,36.2475247 55.2988794,54.4324383 41.119969,47.3712871 Z" id="Path-2" fill="#A7D363"></path>
                    <path d="M124.989466,231 C187.848266,231 257.774712,176 232.815079,114 C207.855447,52 167.920034,0 118.999154,0 C70.0782735,5.960667e-15 32.1396317,44 5.18322823,114 C-21.7731752,184 62.1306657,231 124.989466,231 Z" id="Oval" fill="#A7D363"></path>
                    <path d="M124.990269,231 C187.848622,231 257.774572,176 232.815116,114 C207.855661,52 167.920532,0 119,0 C167.729232,11 196.6822,63 201.674091,125 C206.665982,187 162.737341,212 124.990269,231 Z" id="Oval" fill="#8AB842"></path>
                    <path d="M189.559272,40.0183069 C175.229885,33.0517249 167.002541,11 171.015653,11 C175.028765,11 199.717939,19.480661 205.91217,16.9919247 C212.1064,14.5031884 203.888659,46.9848889 189.559272,40.0183069 Z" id="Path-2" fill="#8AB842" transform="translate(189.000000, 26.000000) scale(-1, 1) rotate(22.000000) translate(-189.000000, -26.000000) "></path>
                    <ellipse id="Oval-2" fill="#FFFFFF" cx="123" cy="82" rx="32" ry="33"></ellipse>
                    <path d="M117,114.368458 C123.844021,106.573014 128.184824,94.9644063 128.184824,82 C128.184824,69.0355937 123.844021,57.4269862 117,49.6315417 C119.011188,49.217244 121.090686,49 123.21905,49 C140.771184,49 155,63.7746033 155,82 C155,100.225397 140.771184,115 123.21905,115 C121.090686,115 119.011188,114.782756 117,114.368458 Z" id="Combined-Shape" fill="#D4D4D4"></path>
                    <ellipse id="Oval-2" fill="#646464" cx="123" cy="81.5" rx="20" ry="20.5"></ellipse>
                    <path d="M124.002969,61 C134.600654,61.6417655 143,70.5745426 143,81.4999102 C143,92.426298 134.599085,101.359723 124,102 C127.021729,96.4845744 128.846574,89.3235908 128.846574,81.49729 C128.846574,73.6735525 127.022924,66.5146966 124.002969,61 Z" id="Combined-Shape" fill="#0C0C0C"></path>
                    <circle id="Oval-2" fill="#FFFFFF" cx="129" cy="76" r="6"></circle>
                    <path d="M88.450467,154.797644 C84.4377288,160.398761 107.974557,172.014585 129.581034,170.928859 C151.18751,169.843133 171.714785,154.797644 168.705231,150.764841 C165.695678,146.732037 148.116461,159.915444 129.581034,160.84685 C111.045606,161.778256 92.4632052,149.196528 88.450467,154.797644 Z" id="Path-3" fill="#0C0C0C"></path>
                    <ellipse id="Oval-3" fill="#8AB842" cx="128" cy="186" rx="15" ry="4"></ellipse>
                </g>
            </g>
          <g id="pirate-front" transform="translate(597.000000, 167.000000)">
                <g id="Group" transform="translate(138.000000, 64.000000) scale(-1, 1) translate(-138.000000, -64.000000) " fill-rule="nonzero">
                    <polygon id="Shape" fill="#B7092B" points="61 111.50066 83 111.50066 217 111.50066 226.95893 127.027099 51.1551349 126.027099"></polygon>
                    <polygon id="Shape" fill="#A00026" points="59.9528636 111.50066 76 111.50066 70.7505923 126.027099 50 127"></polygon>
                    <path d="M4.32247799,111.509763 C2.21254072,111.509763 0.501994454,109.815011 0.501994454,107.724558 L0.501994454,91.3315492 C0.501994454,89.3087818 2.107438,87.6426669 4.14643076,87.5515511 C36.1002857,86.0858912 52.9535065,64.7882566 69.2496835,44.1909114 C86.1502009,22.8307982 103.626156,0.744362853 138,0.744362853 C172.373844,0.744362853 189.849799,22.8307982 206.747689,44.1883083 C223.046494,64.7882566 239.899714,86.0858912 271.853569,87.5515511 C273.892562,87.6426669 275.498006,89.3087818 275.498006,91.3315492 L275.498006,107.724558 C275.498006,109.815011 273.787459,111.509763 271.677522,111.509763 L4.32247799,111.509763 Z" id="Shape" fill="#293D7C"></path>
                    <path d="M7.46242191,98.5270828 C7.46242191,96.5043154 9.06786612,94.8382005 11.1042308,94.7444816 C43.0607131,93.2814241 59.9113065,71.9837902 76.2074836,51.386445 C93.1106283,30.0237287 110.586583,7.93989648 144.9578,7.93989648 C166.411893,7.93989648 181.2813,16.5412145 193.536277,28.1988117 C179.917592,13.0631997 163.671339,0.744362853 138,0.744362853 C103.626156,0.744362853 86.1502009,22.8307982 69.2496835,44.1909114 C52.9508791,64.7882566 36.1002857,86.0858912 4.14643076,87.5515511 C2.107438,87.64527 0.501994454,89.3087818 0.501994454,91.3315492 L0.501994454,107.727161 C0.501994454,109.817614 2.21254072,111.512366 4.32247799,111.512366 L7.46242191,111.512366 L7.46242191,98.5270828 Z" id="Shape" fill="#1A2B63"></path>
                    <path d="M155.980508,52.5403117 C157.465084,55.2789881 158.311161,58.4107635 158.311161,61.7351832 L158.311161,63.6225788 L172.213623,57.2002271 C170.392719,56.3697728 168.87924,54.9197317 168.006887,53.0635758 C167.134534,51.2126261 166.968997,49.158619 167.510277,47.2113473 L155.980508,52.5403117 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M115.938818,61.7351832 C115.938818,58.4107635 116.784895,55.2789881 118.269471,52.5403117 L106.737075,47.2113473 C107.259961,49.0935366 107.144347,51.1605607 106.245719,53.0635758 C105.373367,54.9197317 103.859888,56.3697728 102.038983,57.2002271 L115.938818,63.6225788 L115.938818,61.7351832 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M151.749801,80.7478238 L168.051232,88.2791842 C167.507326,86.3319125 167.672863,84.2779054 168.545215,82.4295588 C169.420195,80.5707998 170.933674,79.1233618 172.751951,78.2903044 L157.992902,71.4722504 C156.886696,75.0882402 154.734718,78.3033214 151.749801,80.7478238 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M123.041134,80.7478238 C120.056217,78.3033214 117.906866,75.0882402 116.798032,71.4722504 L102.038983,78.2903044 C103.859888,79.1207587 105.373367,80.5707998 106.245719,82.4269557 C107.14172,84.3325746 107.259961,86.399598 106.737075,88.2817874 L123.041134,80.7478238 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M184.426322,45.2296954 C186.609832,49.8635774 184.583977,55.3695659 179.909533,57.5303089 C175.232462,59.691052 169.675155,57.6865072 167.494274,53.0526252 C165.310765,48.4187432 167.333993,42.912754 172.011064,40.7520116 C176.688135,38.5912686 182.245441,40.5958134 184.426322,45.2296954 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M108.031495,86.0037106 C108.031495,91.1139968 103.848407,95.2584575 98.687864,95.2584575 C93.5273198,95.2584575 89.3468596,91.1139968 89.3468596,86.0037106 C89.3468596,80.8908205 93.5273198,76.7463598 98.687864,76.7463598 C103.848407,76.7463598 108.031495,80.8908205 108.031495,86.0037106 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M90.2261788,46.2296954 C88.0426697,50.8635774 90.0658974,56.3695659 94.7429684,58.5303089 C99.4200394,60.691052 104.977346,58.6865072 107.158227,54.0526252 C109.339108,49.4187432 107.318508,43.912754 102.641437,41.7520116 C97.961739,39.5912686 92.4044325,41.5958134 90.2261788,46.2296954 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M168.492228,82.0932158 C166.311347,86.7270978 168.337202,92.2356901 173.011645,94.3938294 C177.688716,96.5545725 183.246022,94.5500277 185.426904,89.9161457 C187.610413,85.2848668 185.584558,79.7762751 180.910114,77.6155321 C176.233043,75.454789 170.673109,77.461937 168.492228,82.0932158 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M139.618198,41.9372379 L136.21287,41.9372379 C124.93272,41.9372379 115.788784,50.9967375 115.788784,62.1727236 L115.788784,65.544003 C115.788784,72.9191645 119.772177,79.3701527 125.723618,82.9080437 C125.881272,88.9372969 130.850003,93.7794433 136.974864,93.7794433 L138.853575,93.7794433 C144.978436,93.7794433 149.949795,88.9372969 150.107449,82.9080437 C156.056263,79.3701527 160.039656,72.9217676 160.039656,65.544003 L160.039656,62.1727236 C160.042284,50.9967375 150.89572,41.9372379 139.618198,41.9372379 Z" id="Shape" fill="#FFFFFF"></path>
                    <path d="M129.810133,71.3499681 C126.738507,71.3499681 124.250199,68.8820355 124.250199,65.8387727 L124.250199,60.1062958 C124.250199,57.063033 126.741134,54.5951004 129.810133,54.5951004 C132.884388,54.5951004 135.372695,57.063033 135.372695,60.1062958 L135.372695,65.8387727 C135.372695,68.8820355 132.884388,71.3499681 129.810133,71.3499681 Z" id="Shape" fill="#293D7C"></path>
                    <path d="M144.620238,71.3499681 C141.548611,71.3499681 139.057677,68.8820355 139.057677,65.8387727 L139.057677,60.1062958 C139.057677,57.063033 141.548611,54.5951004 144.620238,54.5951004 C147.691865,54.5951004 150.1828,57.063033 150.1828,60.1062958 L150.1828,65.8387727 C150.1828,68.8820355 147.691865,71.3499681 144.620238,71.3499681 Z" id="Shape" fill="#293D7C"></path>
                </g>
                <g id="Group-2" transform="translate(155.000000, 172.000000) scale(-1, 1) translate(-155.000000, -172.000000) translate(54.000000, 65.000000)">
                    <path d="M51.7178067,5.22366027 L62.6329229,12.8665069 C64.6456777,70.431484 71.0300768,110.711276 81.7861203,133.705884 C92.5421637,156.700491 109.225765,180.339239 131.836924,204.622126 C131.876895,204.710621 131.030268,205.338581 129.297043,206.506006 C127.563817,207.673431 125.788705,208.465108 123.971704,208.881037 C108.856318,190.625472 97.798615,176.778912 90.7985965,167.341358 C81.379198,154.641951 70.6765871,129.979818 67.4570134,120.478041 C58.7876215,94.8924707 53.5412193,56.474344 51.7178067,5.22366027 Z" id="Rectangle" fill="#4C2626" transform="translate(91.778041, 107.052348) scale(-1, 1) rotate(-35.000000) translate(-91.778041, -107.052348) "></path>
                    <g id="Group-3" transform="translate(161.586495, 74.535386) rotate(18.000000) translate(-161.586495, -74.535386) translate(127.086495, 51.535386)" fill-rule="nonzero">
                        <path d="M34.3729995,45.6701017 C15.4183268,45.6701017 0,29.345194 0,9.27961142 L0,7.13539035 C0,3.19651096 3.01899718,0 6.73913641,0 L62.0034583,0 C65.7270018,0 68.7425947,3.19651096 68.7425947,7.13539035 L68.7425947,9.27961142 C68.745999,29.345194 53.3242679,45.6701017 34.3729995,45.6701017 Z" id="Shape" fill="#4C2626"></path>
                        <path d="M18.2977764,7.13539035 C18.2977764,3.19651096 21.3167736,0 25.0369128,0 L6.73913641,0 C3.01899718,0 0,3.19651096 0,7.13539035 L0,9.27961142 C0,29.345194 15.4183268,45.6701017 34.3729995,45.6701017 C37.5417553,45.6701017 40.6049982,45.2052205 43.5218877,44.3511352 C28.9953048,40.0987317 18.2977764,25.9901188 18.2977764,9.27961142 L18.2977764,7.13539035 Z" id="Shape" fill="#3F1919"></path>
                    </g>
                </g>
            </g>
          <g id="merlin-front" transform="translate(624.000000, 130.000000)">
                <g id="merlin-hat" transform="translate(32.000000, 0.000000)" fill-rule="nonzero">
                    <path d="M140.5,119.548283 C140.5,114.945082 131.349673,114.094344 124.029412,115.912323 C107.8022,119.942336 93.4043253,121.366263 70.5,121.366263 C50.271711,121.366263 39.4143553,122.275253 23.8587997,117.730303 C8.30324416,113.185354 0.5,112.345474 0.5,117.730303 C0.5,123.661324 10.0553761,135.819974 23.8587997,139.555627 C36.3443865,142.934631 53.0542576,145 71.4150326,145 C91.62223,145 107.558824,143.18202 117.624183,139.555627 C133.01883,134.009174 140.5,124.939978 140.5,119.548283 Z" id="Shape" fill="#28538E"></path>
                    <path d="M123.849954,118.673463 C118.058753,105.028805 113.775435,94.4058537 111,86.8046086 C107.828773,78.1193849 103.192099,64.3126331 97.0899776,45.3843531 C94.7536901,39.014822 93.9824159,32.1860921 94.8410515,25.4635211 L108,3 C108.123554,1.98778768 107.619355,1.00026347 106.722031,0.497860449 C105.819715,-0.0168864672 104.690259,0.0732250381 103.884041,0.724991018 L63,19 C55.8750721,24.6276534 53.0127124,36.8718944 50,45.3843531 C42.8449887,62.0125202 37.3238003,75.819272 33.4364347,86.8046086 C30.9284074,93.8920624 27.1663664,104.523243 22.1503118,118.698151 C21.9057008,119.370902 21.9618615,120.115248 22.30257,120.746029 C22.6495185,121.378045 23.2548069,121.829837 23.9649284,121.984138 C40.0805695,125.468863 56.5419114,127.148889 73.0381975,126.989651 C89.5095236,127.148889 105.945905,125.470098 122.035338,121.984138 C122.742963,121.818727 123.344508,121.361997 123.691456,120.729982 C124.037157,120.097966 124.095814,119.349917 123.849954,118.673463 Z" id="Shape" fill="#28538E"></path>
                    <path d="M52.0616343,122.999993 C52.0846815,122.898217 52.1142233,122.797404 52.1503118,122.698151 C81.9639442,119.907154 96.1941908,115.341104 94.8410515,109 C91,91 85,70 83,56 C81,42 75.8750721,31.0911745 83,25.4635211 L103.884041,0.724991018 C104.690259,0.0732250381 105.819715,-0.0168864672 106.722031,0.497860449 C107.619355,1.00026347 108.123554,1.98778768 108,3 L94.8410515,25.4635211 C93.9824159,32.1860921 94.7536901,39.014822 97.0899776,45.3843531 C103.192099,64.3126331 107.828773,78.1193849 111,86.8046086 C113.605914,93.9415779 117.541137,103.742401 122.805669,116.207078 C123.22335,116.109432 123.631396,116.01117 124.029412,115.912323 C131.349673,114.094344 140.5,114.945082 140.5,119.548283 C140.5,124.939978 133.01883,134.009174 117.624183,139.555627 C107.558824,143.18202 91.62223,145 71.4150326,145 C53.0542576,145 31.771711,123 52,123 C52.0205367,123 52.0410815,122.999998 52.0616343,122.999993 Z" id="Combined-Shape" fill="#0B3A7C"></path>
                    <path d="M97.2817238,71.601735 L91.6014002,77.1231865 L92.9609274,84.9105166 C93.1328217,85.9132328 92.7200151,86.9276694 91.8944017,87.5240905 C91.4373195,87.8574612 90.8864765,88.0345643 90.3213089,88.0306576 C89.8863646,88.0254486 89.4592334,87.9251771 89.0672625,87.7376561 L82.0795009,84.0575564 L75.0917396,87.7376561 C74.1827835,88.192134 73.0967246,88.1100934 72.2659023,87.5240905 C71.4402892,86.9276694 71.0261801,85.9132328 71.1980744,84.9105166 L72.5589037,77.1231865 L66.8785805,71.601735 C66.1558432,70.895927 65.8966999,69.8411212 66.2118392,68.8813785 C66.523072,67.9073111 67.3604051,67.1949917 68.3722374,67.0413288 L76.1856121,65.9214114 L79.6794929,58.8268672 C80.1847575,57.9830227 81.0963182,57.4673403 82.0795009,57.4673403 C83.0639861,57.4673403 83.9742444,57.9830227 84.4795093,58.8268672 L87.9733901,65.9214114 L95.7880669,67.0413288 C96.7998989,67.1949917 97.6359301,67.9073111 97.9484651,68.8813785 C98.2623022,69.8411212 98.0031586,70.895927 97.2817238,71.601735 Z" id="Shape" fill="#D7D7D7" transform="translate(82.079757, 72.749031) rotate(-26.000000) translate(-82.079757, -72.749031) "></path>
                    <path d="M26.0354068,107.719231 C28.8356309,99.8060557 31.1090338,93.3816289 32.8556155,88.4459501 L36.7279432,91.4543101 L44.2583848,89.0393131 C45.216382,88.8165864 46.2205562,89.1140852 46.9035323,89.8213277 C47.5874132,90.5295071 47.8487808,91.5425151 47.5927564,92.4921559 L44.9164219,99.933728 L49.5393514,106.333096 C50.1316932,107.16769 50.2000496,108.263899 49.7164692,109.165362 C49.2440976,110.057811 48.3053175,110.604129 47.296451,110.575467 L39.3787669,110.324907 L34.7214373,116.712403 C34.1195514,117.532599 33.1030673,117.940337 32.1005186,117.76075 C31.5431958,117.663531 31.0331508,117.390314 30.6433627,116.981052 C30.3449719,116.664561 30.120391,116.287654 29.9829965,115.875431 L27.7761315,108.292444 L26.0354068,107.719231 Z" id="Combined-Shape" fill="#FBFBFB"></path>
                    <path d="M48.869007,48.0210952 C49.2413563,47.1502084 49.6183539,46.2712944 50,45.3843531 C51.936715,39.9121395 53.8112962,32.8977554 56.7960746,27.0903358 L60.6676286,23.9796466 C61.4821779,23.4283978 62.5262692,23.3462731 63.4173354,23.761784 C64.309582,24.1778455 64.9166193,25.0299042 65.0179208,26.0082212 L65.1861682,33.9146397 L71.7953732,38.2322547 C72.6474636,38.7991392 73.104126,39.7980419 72.9757203,40.8129297 C72.8545485,41.8153854 72.1739044,42.6618452 71.2217751,42.996633 L63.7401874,45.600159 L61.6812695,53.2324379 C61.4132924,54.2138531 60.6104432,54.9587853 59.6101249,55.1504071 C59.0549792,55.2593722 58.4808989,55.1870859 57.9703342,54.944695 C57.5783421,54.7561587 57.2336064,54.4847684 56.9576099,54.1491626 L52.1798245,47.860704 L48.869007,48.0210952 Z" id="Combined-Shape" fill="#FBFBFB"></path>
                </g>
                <path d="M29.5,209 C48.5,217 51.1214058,218.412632 71,223 C90.8785942,227.587368 90.8785942,228.664076 110,230 C129.121406,231.335924 145,228.664076 158,227 C171,225.335924 193.705215,217.081633 202.852608,211.040816 C208.950869,207.013605 214.666667,204.333333 220,203 L224,212 C217.333333,216.666667 210.284203,222.666667 202.852608,230 C198.827676,233.971714 195.654947,275.199802 195.654947,289 C195.654947,330 193.901759,337.413128 191,357 C187,384 175,389 168,400 C159.794303,412.894666 160.899095,420.759638 149,416 C144,414 138.422948,414.869291 136,416 C130.922948,418.369291 133.081962,407 129,407 C125.581962,407 119.788762,412.737079 116,414 C110,416 111.834264,420.333067 106,422 C101.334264,423.333067 103.38508,416.734336 99,411 C96.8850802,408.234336 96.9679805,417.237797 94,414 C85.9679805,405.237797 83.42446,412.997602 80,411 C77.42446,409.497602 74.8305187,403 71,403 C67.8870125,403 62.2203458,396.333333 54,383 C46.8500559,359.885527 39.1833893,336.552194 31,313 C22.7750839,289.32829 23.5918148,296.938432 22,272 C21.3418148,261.688432 25,225.5 22,223 C17.1774164,218.98118 9.84408308,214.314514 0,209 L4,199 C8.33333333,200.333333 16.8333333,203.666667 29.5,209 Z M117.753113,247 C101,247 84.0681434,253.161952 72,259.53125 C66.0681434,262.661952 63.5746582,264.051108 78,267 C94.047255,270.280451 98,275 119.405549,275 C142.304621,275 154.943176,270.280451 164,267 C164.56117,266.79674 179.364747,264.092659 164,259.53125 C147.364747,254.592659 140.544129,247 117.753113,247 Z" id="Combined-Shape" fill="#FBFBFB"></path>
            </g>
          <g id="devil-front" transform="translate(638.000000, 235.000000)" fill="#630505">
                <path d="M18,45 C3.15027468,37.8475454 -2.86426618,9 1.29457259,9 C5.45341136,9 21.4043546,26 37,26 C40,34 32,45 18,45 Z" id="Path-2"></path>
                <path d="M168.567836,38.3468028 C154.01901,30.7669758 145.665674,6.77411104 149.740242,6.77411104 C153.814811,6.77411104 178.882073,16.0012964 185.171161,13.2934849 C191.46025,10.5856735 183.116663,45.9266297 168.567836,38.3468028 Z" id="Path-2" transform="translate(168.000000, 23.094511) scale(-1, 1) rotate(22.000000) translate(-168.000000, -23.094511) "></path>
            </g>
          <g id="dracula-front" transform="translate(542.000000, 315.000000)">
                <path d="M328.072317,2 C338.072317,-1.33333333 354.738984,2.66731609 378.072317,14.0019483 L372.072317,77 C364.984067,125.449468 358.3174,160.116135 352.072317,181 C337.419422,230 342.774037,242.456022 348.072317,261 C350.072317,268 294.730159,233.990892 297.072317,226 C314.072317,168 320.041425,155.095777 334.160034,119.500974 C343.57244,95.7711053 354.209868,68.9374473 366.072317,39 C371.40565,29.6679655 372.072317,23.3352816 368.072317,20.0019483 C354.373049,8.5858916 325.873811,2.7328352 328.072317,2 Z" id="Path-6" fill="#0C0C0C" transform="translate(337.536158, 131.403319) scale(-1, 1) translate(-337.536158, -131.403319) "></path>
                <path d="M31,1 C45,3 63.3333333,10 86,22 C88.9984074,51.6379402 88.9984074,78.6379402 86,103 C81.502389,139.54309 68,170 65,185 C61.8442635,200.778683 62.7017204,221.456022 68,240 C70,247 -4,220 1,216 C12.9294137,206.456469 33.9691082,160.093829 48.0877173,124.499026 C62.2063264,88.9042226 74,45 76,41 C78,37 82,32 76,27 C62.300732,15.5839433 29.7177805,0.816825792 31,1 Z" id="Path-6" fill="#0C0C0C"></path>
                <circle id="Oval-4" fill="#FFC93D" cx="301.5" cy="18.5" r="11.5"></circle>
                <path d="M295.888568,28.5403836 C296.922797,28.9537779 298.034168,29.1784618 299.191307,29.1784618 C304.730538,29.1784618 309.220971,24.0297365 309.220971,17.6784618 C309.220971,12.9499792 306.732056,8.8880342 303.17442,7.12101971 C308.732079,7.93173108 313,12.7174523 313,18.5 C313,24.8512746 307.851275,30 301.5,30 C299.462299,30 297.548381,29.4700208 295.888568,28.5403836 Z" id="Combined-Shape" fill="#D19C16"></path>
                <circle id="Oval-4" fill="#FFC93D" cx="84.5" cy="18.5" r="11.5"></circle>
                <path d="M79.395429,28.8078613 C80.0777344,28.9340467 80.7811651,29 81.5,29 C87.8512746,29 93,23.8512746 93,17.5 C93,12.9820904 90.3947283,9.07267459 86.604571,7.19213866 C91.950783,8.18086589 96,12.8675603 96,18.5 C96,24.8512746 90.8512746,30 84.5,30 C82.666635,30 80.9334726,29.5709817 79.395429,28.8078613 Z" id="Combined-Shape" fill="#D19C16"></path>
                <polygon id="Path-7" fill="#FFFFFF" transform="translate(232.148288, 76.691440) rotate(-46.000000) translate(-232.148288, -76.691440) " points="229.118729 69.6797609 227.023481 83.7031186 237.273094 73.8051827"></polygon>
                <polygon id="Path-7" fill="#FFFFFF" transform="translate(175.054318, 79.759728) scale(-1, 1) rotate(-46.000000) translate(-175.054318, -79.759728) " points="172.214623 72.846354 169.929511 86.673102 180.179124 76.7751662"></polygon>
            </g>
          <g id="frankenstein-front" transform="translate(630.000000, 249.000000)">
                <ellipse id="Oval-2" fill="#A63434" cx="109" cy="64.5" rx="20" ry="20.5"></ellipse>
                <path d="M110.208901,44.0368334 C120.691704,44.6774487 129,53.5942148 129,64.5 C129,75.4068035 120.690153,84.3242165 110.205964,84.9633458 C113.194937,79.4578059 115,72.3096576 115,64.4973845 C115,56.6876701 113.196119,49.5416456 110.208901,44.0368334 Z" id="Combined-Shape" fill="#771B1B"></path>
                <circle id="Oval-2" fill="#FF9393" cx="115" cy="59" r="6"></circle>
                <path d="M86,8 L86,2 C86,0.8954305 86.8954305,0 88,0 L90,0 C91.1045695,0 92,0.8954305 92,2 L92,8 L102,8 L102,2 C102,0.8954305 102.895431,0 104,0 L106,0 C107.104569,0 108,0.8954305 108,2 L108,8 L118,8 L118,2 C118,0.8954305 118.895431,0 120,0 L122,0 C123.104569,0 124,0.8954305 124,2 L124,8 L134,8 L134,2 C134,0.8954305 134.895431,0 136,0 L138,0 C139.104569,0 140,0.8954305 140,2 L140,8 L153.594875,8 C154.485215,8 155.329558,8.39546903 155.899539,9.0794468 L157.5,11 C157.773925,11.32871 157.923938,11.7430528 157.923938,12.1709374 C157.923938,13.1811008 157.105039,14 156.094875,14 L140,14 L140,20 C140,21.1045695 139.104569,22 138,22 L136,22 C134.895431,22 134,21.1045695 134,20 L134,14 L124,14 L124,20 C124,21.1045695 123.104569,22 122,22 L120,22 C118.895431,22 118,21.1045695 118,20 L118,14 L108,14 L108,20 C108,21.1045695 107.104569,22 106,22 L104,22 C102.895431,22 102,21.1045695 102,20 L102,14 L92,14 L92,20 C92,21.1045695 91.1045695,22 90,22 L88,22 C86.8954305,22 86,21.1045695 86,20 L86,14 L76,14 L76,20 C76,21.1045695 75.1045695,22 74,22 L72,22 C70.8954305,22 70,21.1045695 70,20 L70,14 L54.2426407,14 C53.77656,14 53.3295688,13.8148502 53,13.4852814 C52.3137085,12.7989899 52.3137085,11.6862915 53,11 L55.1213203,8.87867966 C55.6839295,8.31607052 56.4469912,8 57.2426407,8 L70,8 L70,2 C70,0.8954305 70.8954305,0 72,0 L74,0 C75.1045695,0 76,0.8954305 76,2 L76,8 L86,8 Z" id="Combined-Shape" fill="#FFFFFF"></path>
                <path d="M19.4202156,117.570849 L24.7977914,115.823569 C25.8482994,115.482238 26.9766077,116.05714 27.3179384,117.107648 L27.9359724,119.009761 C28.2773032,120.060269 27.7024014,121.188577 26.6518934,121.529908 L21.2583177,123.282387 C22.3105072,126.313054 23.4622605,129.267003 24.7135776,132.144232 L30.2267313,129.573406 C31.2278112,129.106595 32.4177721,129.539705 32.8845834,130.540785 L33.7298199,132.353401 C34.1966311,133.354481 33.7635208,134.544442 32.7624408,135.011253 L27.243798,137.584638 C28.7216043,140.561236 30.3028983,143.423449 31.98768,146.171277 L36.4819827,142.784577 C37.3641311,142.11983 38.6181372,142.296069 39.2828837,143.178218 L40.4865138,144.775489 C41.1512603,145.657637 40.9750212,146.911643 40.0928728,147.57639 L35.2783558,151.204388 C37.5901946,154.522571 40.0700189,157.655079 42.7178289,160.601912 L46.3485555,156.27498 C47.0585591,155.428831 48.3200703,155.318463 49.1662196,156.028466 L50.6983085,157.314042 C51.5444578,158.024045 51.6548257,159.285556 50.9448222,160.131706 L46.8937837,164.959545 C50.182395,168.176776 53.6996383,171.141298 57.4455132,173.853114 C57.5165069,173.904509 57.585005,173.959267 57.6507734,174.017199 C58.7913757,175.021904 58.9015429,176.761018 57.8968387,177.901621 L57.6618457,178.168399 C56.631011,179.338666 54.8754462,179.523952 53.6230258,178.594657 C49.8805664,175.817786 46.3512716,172.805599 43.0351413,169.558096 L39.3746452,173.920506 C38.6646416,174.766655 37.4031304,174.877023 36.5569811,174.167019 L35.0248922,172.881444 C34.1787429,172.171441 34.0683749,170.909929 34.7783785,170.06378 L38.8505659,165.210736 C35.8869427,161.944804 33.1142209,158.468133 30.5323998,154.780723 L25.7174336,158.40906 C24.8352852,159.073807 23.5812791,158.897568 22.9165326,158.015419 L21.7129025,156.418148 C21.048156,155.536 21.2243951,154.281994 22.1065435,153.617247 L27.2189592,149.764765 C25.2983034,146.681321 23.498597,143.464358 21.8198399,140.113878 L16.4489007,142.618381 C15.4478207,143.085193 14.2578598,142.652082 13.7910486,141.651002 L12.945812,139.838387 C12.4790008,138.837307 12.9121112,137.647346 13.9131911,137.180535 L19.260217,134.687176 C17.8928309,131.596578 16.6396031,128.418588 15.5005337,125.153204 L9.5328761,127.092214 C8.48236808,127.433544 7.35405982,126.858643 7.01272908,125.808135 L6.39469509,123.906022 C6.05336434,122.855513 6.62826611,121.727205 7.67877413,121.385874 L13.6522369,119.444979 C12.4777435,115.523532 11.4582216,111.483448 10.5936712,107.324726 L3.39413992,108.46502 C2.3031695,108.637813 1.27868705,107.893482 1.10589431,106.802512 L0.793025377,104.827135 C0.620232639,103.736165 1.36456271,102.711682 2.45553313,102.53889 L9.4846467,101.425588 C8.13560274,93.4252188 7.33072331,85.008269 7.07000842,76.1747381 L7.07002189,76.1747377 C7.06240486,75.9166581 7.09948811,75.6592058 7.17963155,75.4137671 C7.56342714,74.2383961 8.82738139,73.5966975 10.0027524,73.9804931 L11.0089831,74.309059 C12.2024269,74.698756 13.0269931,75.7903749 13.0755251,77.0448934 L13.0755368,77.0448929 C13.3919987,85.2252034 14.1872756,93.0365618 15.4613675,100.478968 L20.2339233,99.7230694 C21.3248937,99.5502766 22.3493761,100.294607 22.5221689,101.385577 L22.8350378,103.360954 C23.0078305,104.451924 22.2635005,105.476407 21.17253,105.649199 L16.5872753,106.375432 C17.3974122,110.210628 18.3417256,113.942434 19.4202156,117.570849 Z" id="Combined-Shape" fill="#FFFFFF"></path>
            </g>
        </g>
    </g>
</svg>
</div>
            
          
!
            
              .app {
  width: 20vw;
  margin: auto;
  position: relative;
  text-align: center;
}

#toggle {
  margin-top: 5%;
}

svg {
  width: 20vw;
  height: 80vh;
}

#left-arm-2, #right-arm-2, #left-leg-2, #right-leg-2, #left-leg-shadow-2 {
  display: none;
}

#frankenstein-front, #dracula-front, #devil-front, #merlin-front, #pirate-front, #dracula-back, #frankenstein-back, #devil-back {
  display: none;
}
            
          
!
            
              
const button = document.getElementById("toggle");

// Costume changes
const front = ['frankenstein-front', 'dracula-front', 'devil-front', 'merlin-front', 'pirate-front', null];
const back = ['frankenstein-back', 'dracula-back', 'devil-back', null, null, null]
let index = 0;
let prevFront, prevBack;

function costumeChange() {
  const frontId = front[index];
  const backId = back[index];
  
  if (prevFront) document.getElementById(prevFront).style.display = "none";
  if (frontId) document.getElementById(frontId).style.display = "block";
  
  if (prevBack) document.getElementById(prevBack).style.display = "none";
  if (backId) document.getElementById(backId).style.display = "block";
 
  prevFront = frontId;
  prevBack = backId;
  
  if (index < front.length - 1) {
    index++;
  } else {
    index = 0;
  }
}

// Animations

const rightArm = new TimelineMax({paused:true});

rightArm.to("#right-arm-1", 0.3, { morphSVG: "#right-arm-2", ease: Back.easeIn.config(1.7), rotation: "-=55", transformOrigin: '50% 50%' });

const leftArm = new TimelineMax({paused:true});

leftArm.to("#left-arm-1", 0.3, { morphSVG: "#left-arm-2", ease: Back.easeIn.config(1.7), rotation: "+=55", transformOrigin: '50% 50%' });

const rightLeg = new TimelineMax({paused:true});

rightLeg.to("#right-leg-1", 0.3, { morphSVG: "#right-leg-2", ease: Back.easeIn.config(1.7)});

const leftLeg = new TimelineMax({paused:true});

leftLeg.to("#left-leg-1", 0.3, { morphSVG: "#left-leg-2", ease: Back.easeIn.config(1.7)});

const leftLegShadow = new TimelineMax({paused:true});

leftLegShadow.to("#left-leg-shadow-1", 0.3, { morphSVG: "#left-leg-shadow-2", ease: Back.easeIn.config(1.7)});

button.addEventListener("click", function() {
  setTimeout(costumeChange, 300);
  
  leftArm.play().eventCallback("onComplete", () => {
    leftArm.reversed( !leftArm.reversed() );
  });
  
  rightArm.play().eventCallback("onComplete", () => {
    rightArm.reversed( !rightArm.reversed() );
  });
  
   rightLeg.play().eventCallback("onComplete", () => {
    rightLeg.reversed( !rightLeg.reversed() );
  });
  
  leftLeg.play().eventCallback("onComplete", () => {
    leftLeg.reversed( !leftLeg.reversed() );
  });
  
  leftLegShadow.play().eventCallback("onComplete", () => {
    leftLegShadow.reversed( !leftLegShadow.reversed() );
  });
  
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console