cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <?xml version="1.0" encoding="utf-8"?>
<!-- Autor: Jerzy Górski, Kodu.je -->
<!-- Ilustracja konkursowa -->
<!-- wiecej info na: http://kodu.je/konkurs/animacja-svg-2017/-->
<!-- -->
<!--Powodzenia! -->
<svg version="1.1" id="Ilustration" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="1024px" height="533.283px" viewBox="0 225.781 1024 533.283" enable-background="new 0 225.781 1024 533.283"
     xml:space="preserve">
    <g id="background">
        <g id="white_wall">
            <polygon id="the_wall" fill="#F0F0F0" points="780.813,758.754 264.392,745.152 314.56,363.459 1013.604,225.781 		"/>
            <polygon id="window" fill="#FFFFFF" points="804.294,573.492 531.162,539.307 540.523,352.08 884.719,290.225 		"/>
            <path id="trees" fill="#AFF2E2" d="M532.61,523.274c0,0,5.431-28.395,43.6-29.325c38.169-0.93,55.754,38.636,55.754,38.636
                                               s32.118-13.086,59.22-6.466c14.119,3.466,34.395,12.671,42.41,24.05c28.188-13.81,61.805-13.498,80.424-10.86l-9.723,34.187
                                               l-273.133-34.187L532.61,523.274z"/>
            <polygon id="window_bar" fill="#E8E8E8" points="685.235,312.824 654.721,561.443 668.788,562.736 705.303,306.257 		"/>
            <g id="fly">
                <path id="wing_2" fill="#A5AAD8" d="M530.656,410.886c0,0,1.48-5.717-3.497-7.761
                                                    C522.184,401.11,527.309,409.968,530.656,410.886z"/>
                <ellipse id="fly_base" fill="#534741" cx="530.626" cy="410.885" rx="3.11" ry="2.933"/>
                <ellipse id="fly_head" fill="#534741" cx="533.736" cy="410.886" rx="1.48" ry="2.074"/>
                <path id="wing_1" fill="#A5AAD8" d="M531.663,410.886c0,0-1.481-5.717,3.495-7.761
                                                    C540.136,401.11,535.04,409.968,531.663,410.886z"/>
                <g id="fly_legs">

                    <line fill="none" stroke="#534741" stroke-width="2" stroke-miterlimit="10" x1="532.285" y1="412.662" x2="533.084" y2="414.797"/>

                    <line fill="none" stroke="#534741" stroke-width="2" stroke-miterlimit="10" x1="531.367" y1="413.284" x2="531.634" y2="415.596"/>

                    <line fill="none" stroke="#534741" stroke-width="2" stroke-miterlimit="10" x1="530.152" y1="413.345" x2="530.033" y2="415.893"/>

                    <line fill="none" stroke="#534741" stroke-width="2" stroke-miterlimit="10" x1="529.085" y1="413.05" x2="528.761" y2="415.271"/>
                </g>
            </g>
            <g id="bulb">
                <line fill="none" stroke="#C6C6C6" stroke-width="5" stroke-miterlimit="10" x1="805.352" y1="269" x2="805.352" y2="306.897"/>
                <g>
                    <path fill="#C6C6C6" stroke="#C6C6C6" stroke-miterlimit="10" d="M811.815,314.158c-4.312,0-8.618,0-12.93,0
                                                                                    c0-0.852,0-1.701,0-2.553c1.631-6.794,11.297-6.794,12.93,0C811.815,312.456,811.815,313.308,811.815,314.158z"/>
                    <path fill="#C6C6C6" stroke="#C6C6C6" stroke-miterlimit="10" d="M811.815,314.158c-4.312,0-8.618,0-12.93,0
                                                                                    c0-0.852,0-1.701,0-2.553c1.631-6.794,11.297-6.794,12.93,0C811.815,312.456,811.815,313.308,811.815,314.158z"/>
                </g>
                <rect x="798.207" y="311.607" fill="#C6C6C6" stroke="#C6C6C6" stroke-miterlimit="10" width="14.289" height="5.698"/>
                <g>
                    <path fill="#C6C6C6" stroke="#C6C6C6" stroke-miterlimit="10" d="M812.496,321.473c-4.646,1.509-9.646,1.509-14.289,0
                                                                                    c0-0.992,0-1.984,0-2.978c4.763,0,9.526,0,14.289,0C812.496,319.488,812.496,320.481,812.496,321.473z"/>
                    <path fill="#C6C6C6" stroke="#C6C6C6" stroke-miterlimit="10" d="M812.496,321.473c-4.646,1.509-9.646,1.509-14.289,0
                                                                                    c0-0.992,0-1.984,0-2.978c4.763,0,9.526,0,14.289,0C812.496,319.488,812.496,320.481,812.496,321.473z"/>
                </g>
                <g>
                    <path fill="#F4DB60" stroke="#C6C6C6" stroke-miterlimit="10" d="M822.659,346.488c4.252,12.201-3.482,25.398-17.31,25.808
                                                                                    c-13.822-0.409-21.56-13.605-17.308-25.808c4.387-12.691,9.966-23.466,17.308-23.463
                                                                                    C812.691,323.021,818.273,333.796,822.659,346.488z"/>
                    <path fill="none" stroke="#C6C6C6" stroke-width="3" stroke-miterlimit="10" d="M822.659,346.488
                                                                                                  c4.252,12.201-3.482,25.398-17.31,25.808c-13.822-0.409-21.56-13.605-17.308-25.808c4.387-12.691,9.966-23.466,17.308-23.463
                                                                                                  C812.691,323.021,818.273,333.796,822.659,346.488z"/>
                </g>
                <g id="light">
                    <path fill="#F9E769" class="flash" d="M816.416,349.31c2.719,7.8-2.227,16.236-11.064,16.498c-8.838-0.261-13.78-8.698-11.063-16.498
                                            c2.804-8.114,6.372-15.002,11.063-15C810.044,334.308,813.611,341.196,816.416,349.31z"/>
                </g>
            </g>
            <polygon id="white_wall_shadow" fill="#E8E8E8" points="540.523,352.08 530.128,540.393 522.731,537.755 525.369,356.271 
                                                                   303.543,433.437 312.439,363.822 1011.484,226.144 897.959,487.12 884.719,290.225 		"/>
        </g>
        <polygon id="purple_wall" fill="#797FB8" points="9.31,308.068 102.664,756.994 228.55,748.823 343.006,737.289 312.491,363.665 	
                                                         "/>
        <polygon id="purple_wall_shadow" fill="#727BAB" points="317.767,428.471 51.616,510.654 9.31,308.068 312.491,363.665 	"/>
        <g id="clock" display="none">

            <ellipse id="shadow_clock" transform="matrix(-0.0682 0.9977 -0.9977 -0.0682 896.9227 31.0457)" display="inline" fill="none" stroke="#E8E8E8" stroke-width="18" stroke-miterlimit="10" cx="433.963" cy="434.375" rx="30.207" ry="27.258"/>

            <ellipse id="clock_base" transform="matrix(-0.0682 0.9977 -0.9977 -0.0682 901.5862 31.4738)" display="inline" fill="#FFFFFF" stroke="#A5AAD8" stroke-width="11.8186" stroke-miterlimit="10" cx="436.095" cy="436.766" rx="30.464" ry="24.723"/>
            <polyline id="clock_hands" display="inline" fill="#FFFFFF" stroke="#A5AAD8" stroke-width="8" stroke-miterlimit="10" points="
                                                                                                                                        436.773,419.006 436.102,436.798 444.531,444.711 		"/>
        </g>
        <g id="callendar" display="none">
            <polygon id="callendar_paper_back" display="inline" fill="#A5AAD8" points="155.521,508.068 83.631,508.844 93.872,585.389 
                                                                                       97.802,584.975 98.112,586.734 104.784,588.389 166.538,581.25 		"/>
            <polygon id="callendar_dark_bar" display="inline" fill="#62627F" points="156.97,520.067 85.7,524.256 83.631,508.844 
                                                                                     155.521,508.068 		"/>
            <polygon id="callendar_paper" display="inline" fill="#E8E8E8" points="83.631,508.844 155.521,508.068 170.572,582.491 
                                                                                  104.784,588.389 		"/>
            <polygon id="callendar_dark_bar_2" display="inline" fill="#62627F" points="157.952,520.015 87.044,522.291 83.631,508.844 
                                                                                       155.521,508.068 		"/>
            <g id="callendar_lines" display="inline">

                <line fill="none" stroke="#E8E8E8" stroke-width="6.6375" stroke-miterlimit="10" x1="93.406" y1="515.671" x2="134.058" y2="514.688"/>
                <polygon fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" points="159.762,572.822 114.146,577.269 
                                                                                                           103.75,535.323 149.418,533.409 			"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="102.146" y1="530.928" x2="132.403" y2="529.946"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="112.387" y1="534.909" x2="122.99" y2="576.183"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="122.99" y1="534.342" x2="133.127" y2="574.992"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="134.058" y1="534.652" x2="143.212" y2="574.735"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="141.247" y1="534.342" x2="150.401" y2="574.424"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="106.129" y1="544.945" x2="151.694" y2="542.048"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="108.198" y1="553.323" x2="153.608" y2="549.287"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="110.474" y1="561.339" x2="155.832" y2="557.357"/>

                <line fill="none" stroke="#A5AAD8" stroke-width="3.9825" stroke-miterlimit="10" x1="111.404" y1="569.406" x2="156.763" y2="565.372"/>
            </g>
        </g>
    </g>
    <g id="red_armchair">
        <path id="red_armchair_back" fill="#97231D" d="M350.815,673.416l-43.134-70.599L211.637,464.52
                                                       c-20.791,16.085-42.979,47.634-16.757,126.869c26.222,79.233,72.149,134.574,72.149,134.574l123.042,22.859l68.218,1.759
                                                       l55.857-79.079L350.815,673.416z"/>
        <path id="red_armchair_highlight" fill="#CF4D46" d="M237.963,450.556c-51.668,12.773-53.686,60.408-41.945,98.681
                                                            c11.74,38.273,15.464,65.84,32.894,59.014c40.859-16.033,53.685,54.408,53.685,54.408l149.678-32.222
                                                            c0,0-22.447-81.562-51.979-63.771c-29.532,17.791-29.894-11.431-39.617-45.668C330.955,486.759,301.888,434.781,237.963,450.556z"
              />
        <path id="interviewer_shadow" fill="#97231D" d="M281.666,473.778c-4.5-11.947-30.359-13.603-45.203-3.154
                                                        c-7.448,5.275-20.584,25.445-11.171,40.289c3.155,5.018,18.36,24.051,18.36,24.051s-15.206,13.499-15.774,24.309
                                                        c-2.069,41.014,19.136,14.533,41.841,64.287c9.051,19.81,19.136,16.81,19.136,16.81l34.342-6.311L281.666,473.778z"/>
    </g>
    <g id="table">
        <g id="table_construction">
            <polygon fill="#039475" points="782.469,729.274 627.104,721.309 569.229,638.039 737.369,599.715 754.281,606.076 		"/>
            <g>
                <path id="SVGID_1_" fill="#039475" d="M708.199,627.489l0.774-15.257c0,0-152.056-16.86-173.416-12.413
                                                      c-69.2,14.481-220.327,46.341-257.513,55.496c-0.258,0.051-0.465,0.104-0.724,0.206h-0.052
                                                      c-38.997,9.104-18.464,90.251-18.464,90.251l162.038,3.879c0.519-9.98,3-32.221,18.724-38.221L708.199,627.489z"/>
            </g>
            <g>
                <g>
                    <path id="SVGID_3_" fill="#34B399" d="M738.145,599.662l-192.967-11.48c-4.137-0.62-8.378-0.466-12.464,0.362
                                                          c-37.444,7.86-233.205,48.979-266.822,57.254c-0.259,0.052-0.466,0.104-0.724,0.207h-0.052
                                                          c-38.997,9.103-6.31,99.767-6.31,99.767l142.902,3.466c0,0,0.517-37.756,25.705-47.323l311.095-99.044
                                                          C740.266,602.301,739.955,599.767,738.145,599.662z"/>
                </g>
                <g>
                    <g>
                        <g>
                            <defs>
                                <path id="SVGID_2_" d="M738.145,599.662l-192.967-11.48c-4.137-0.62-8.378-0.466-12.464,0.362
                                                       c-37.444,7.86-233.205,48.979-266.822,57.254c-0.259,0.052-0.466,0.104-0.724,0.207h-0.052
                                                       c-38.997,9.103-6.31,99.767-6.31,99.767l142.902,3.466c0,0,0.517-37.756,25.705-47.323l311.095-99.044
                                                       C740.266,602.301,739.955,599.767,738.145,599.662z"/>
                            </defs>
                            <clipPath id="SVGID_4_">
                                <use xlink:href="#SVGID_2_"  overflow="visible"/>
                            </clipPath>
                            <polygon clip-path="url(#SVGID_4_)" fill="#0DA37F" points="222.188,673.572 425.344,732.582 401.863,749.495 
                                                                                       258.857,745.772 						"/>
                        </g>
                    </g>
                </g>
            </g>
        </g>
        <g id="shadows">
            <g id="shadow_legs">
                <polygon fill="#0DA37F" points="471.892,601.733 452.858,605.612 528.68,600.336 505.406,594.698 			"/>
                <polygon fill="#0DA37F" points="551.953,589.734 535.92,591.284 532.817,599.974 561.314,598.268 			"/>
            </g>
            <polygon id="shadow_hand" fill="#0DA37F" points="535.403,649.936 531.835,668.656 555.005,662.296 546.626,640.678 		"/>
        </g>
        <g id="stuff_on_table">
            <g id="phone">
                <path id="shadow_phone" fill="#0DA37F" d="M477.839,608.455c0,0-3.672,0.413-4.396,3c0,0-2.433,11.119-2.433,12.517
                                                          c0,1.396-2.172,4.655,5.948,5.845c6.568,0.982,18.93,1.448,24.153,1.811c1.293,0.104,5.327-0.053,6.465-0.62l14.066-3.104
                                                          L477.839,608.455z"/>
                <path fill="#F2F2F2" d="M519.888,629.039l-40.858-4.033c-2.327-0.207-3.982-1.604-3.775-3.932l1.655-11.43
                                        c0.207-2.327,2.12-2.896,4.396-2.689l39.048,2.586c2.327,0.207,3.312,1.293,3.104,3.62l0.362,11.999
                                        C523.611,627.489,522.215,629.246,519.888,629.039z"/>
                <polygon id="display_phone" fill="#62627F" points="483.114,608.198 481.718,622.059 520.249,625.524 519.784,610.575 			"/>
                <path fill="#F2F2F2" d="M491.027,626.92l-7.24-0.674c-0.414-0.052-0.725-0.412-0.673-0.826l0,0
                                        c0.052-0.414,0.414-0.725,0.828-0.673l7.239,0.673c0.414,0.052,0.726,0.414,0.674,0.826l0,0
                                        C491.804,626.66,491.441,626.972,491.027,626.92z"/>
                <circle fill="#CCCCCC" cx="479.442" cy="614.715" r="1.965"/>
            </g>
            <g id="papers">
                <polygon id="paper_bottom" fill="#F2F2F2" points="413.965,624.024 454.721,617.454 492.27,654.537 447.997,663.95 			"/>
                <polygon id="paper_top" fill="#FFFFFF" points="419.137,627.334 458.082,615.852 502.51,647.918 460.668,662.607 			"/>
            </g>
            <g id="pen">
                <path id="shadow_pen" fill="#0DA37F" d="M358.78,638.402c0,0-12.206,2.689-10.344,4.241s17.43,2.534,23.533,1.604
                                                        c6.103-0.93,25.136-2.947,25.136-2.947L358.78,638.402z"/>
                <path fill="#696F9F" d="M370.572,642.745h-11.43c-1.086,0-2.017-0.879-2.017-2.018v-0.724c0-1.086,0.879-2.018,2.017-2.018h11.43
                                        c1.086,0,2.017,0.879,2.017,2.018v0.724C372.538,641.866,371.658,642.745,370.572,642.745z"/>
                <path fill="#696F9F" d="M397.104,641.298h-25.808c-0.879,0-1.604-0.725-1.604-1.604l0,0c0-0.879,0.724-1.603,1.604-1.603h25.808
                                        c0.879,0,1.604,0.724,1.604,1.603l0,0C398.708,640.573,397.984,641.298,397.104,641.298z"/>
                <path fill="#F2F2F2" d="M397.312,638.092l5.275,1.499v0.466l-5.482,1.188C397.104,641.298,396.743,638.505,397.312,638.092"/>
            </g>
        </g>
    </g>
    <g id="interviewer">
        <g id="legs">
            <path id="leg2" fill="#F8A246" d="M512.129,572.149l-51.563,6.311c-10.447,1.293-19.81,7.033-25.652,15.724l-11.638,17.584
                                              l91.646-18.98L512.129,572.149z"/>
            <path id="leg1" fill="#F8A246" d="M556.764,561.184L505.2,567.65c-10.447,1.293-19.758,7.085-25.603,15.826l-11.637,17.378
                                              l91.647-19.033L556.764,561.184z"/>
            <path id="highlight" fill="#F4C02E" d="M427.826,604.681c0,0,12.671-18.154,38.064-20.43c25.395-2.276,39.876-4.913,39.876-4.913
                                                   l2.846-6.879c0,0-51.357,1.811-65.322,11.946C436.773,589.113,427.826,604.681,427.826,604.681z"/>
        </g>
        <g id="shoes">
            <g id="shoe_2">
                <path fill="#62627F" d="M577.244,532.946c-9.878,9.878-31.497,49.495-29.066,57.874c1.086,3.62,3.672,5.638,8.12,7.189
                                        c6.827,2.327,16.654-9.258,21.981-16.499c8.74-11.896,20.325-29.688,20.998-37.188
                                        C599.07,521.824,584.485,525.756,577.244,532.946z"/>
                <path fill="#696F9F" d="M591.881,527.722c-4.499-1.19-12.619-3.776-19.343,5.067c-6.775,8.845-16.033,25.498-19.137,27.05
                                        s-14.172,16.965-14.224,20.792c-0.052,3.826,9.104,13.446,11.74,15.102c2.638,1.655,5.482,2.586,5.482,2.586
                                        s-4.706-5.999-3.518-12.257c1.189-6.259,14.688-32.066,20.016-38.583c5.328-6.518,9.465-15.311,19.396-19.292"/>
                <path fill="none" stroke="#A5AAD8" stroke-width="8" stroke-miterlimit="10" d="M562.556,548.772c0,0-1.293-0.828-1.965-0.414
                                                                                              c-6.413,4.241-3.207,9.775-1.086,12.206"/>
                <path fill="#555570" d="M574.555,582.284l-12.723-7.344c-1.241-0.724-1.655-2.275-0.931-3.517l0.413-0.776
                                        c0.725-1.241,2.275-1.654,3.518-0.931l12.723,7.344c1.241,0.725,1.655,2.275,0.933,3.518l-0.414,0.775
                                        C577.348,582.596,575.797,583.01,574.555,582.284z"/>
                <path fill="#555570" d="M586.45,560.305l-12.724-7.344c-1.24-0.726-1.654-2.276-0.931-3.519l0.413-0.774
                                        c0.725-1.241,2.276-1.655,3.518-0.932l12.724,7.344c1.241,0.725,1.655,2.275,0.932,3.518l-0.414,0.775
                                        C589.243,560.615,587.641,561.03,586.45,560.305z"/>
            </g>
            <g id="shoe_1">
                <path fill="#62627F" d="M523.094,534.859c-7.551,11.586-7.137,57.823-1.758,64.547c2.327,2.947,6.93,3.361,11.326,2.896
                                        c6.775-0.725,9.051-15.36,10.81-24.359c2.793-14.792,4.604-32.636,3.413-43.496c-0.62-5.534-3.258-9.207-5.688-10.396
                                        C533.696,520.324,527.904,527.515,523.094,534.859z"/>
                <path fill="#696F9F" d="M533.8,521.67c-5.327,0.052-14.637,1.759-17.48,12.879c-2.846,11.119-2.327,32.635-12.931,35.271
                                        c-3.413,0.827-0.826,19.81,0.932,23.377c1.759,3.569,15.31,8.379,18.826,8.741c3.517,0.361,6.517,0.568,6.517,0.568
                                        s-2.068-0.827-3.827-7.138c-1.759-6.36-3.465-76.7,15.413-71.321C541.248,524.049,538.661,521.67,533.8,521.67z"/>
                <path fill="none" stroke="#A5AAD8" stroke-width="8" stroke-miterlimit="10" d="M512.025,554.564c0,0-0.259-0.052-0.518-0.052
                                                                                              c0,0-3.311,11.845,3.258,13.603"/>
                <path fill="none" stroke="#A5AAD8" stroke-width="8" stroke-miterlimit="10" d="M515.232,543.341c0,0-2.12-0.207-2.639,0.724
                                                                                              c0,0-2.481,10.913,4.086,12.672"/>
                <path fill="#555570" d="M542.334,552.185l-15.051-3.154c-1.396-0.311-2.327-1.811-2.068-3.361l0.154-0.932
                                        c0.259-1.552,1.604-2.586,3-2.327l15.051,3.154c1.396,0.311,2.327,1.811,2.068,3.362l-0.155,0.931
                                        C545.075,551.408,543.73,552.444,542.334,552.185z"/>
                <path fill="#555570" d="M539.438,583.734l-15.723-3.258c-1.448-0.312-2.379-1.862-2.121-3.466l0.155-0.827
                                        c0.259-1.604,1.655-2.689,3.052-2.379l15.724,3.258c1.447,0.311,2.379,1.862,2.12,3.466l-0.155,0.827
                                        C542.23,583.01,540.834,584.044,539.438,583.734z"/>
            </g>
        </g>
        <g id="arm_with_mug">
            <path id="biceps" fill="#FCCEA4" d="M404.862,581.924l-15.774-16.604c-18.567-22.395-46.444-32.221-46.444-32.221
                                                s-11.74,36.255,15.413,45.563c35.376,12.052,44.324,7.553,46.134,7.189C406,585.491,405.638,583.837,404.862,581.924z"/>
            <g id="forehand_mug">
                <g id="coffee_mug">
                    <g>
                        <g>
                            <path id="SVGID_5_" fill="#34B399" d="M370.107,497.724c7.706-0.104,13.137,1.655,13.447,4.707
                                                                  c0.311,2.999,2.845,30.358-11.896,30.358c-9.723,0-8.792,0-8.792,0s-10.861,0.982-9.051-28.859
                                                                  C354.074,500.103,360.642,497.826,370.107,497.724z"/>
                        </g>
                        <g id="coffee_mug_shadows">
                            <g>
                                <g>
                                    <defs>
                                        <path id="SVGID_6_" d="M370.107,497.724c7.706-0.104,13.137,1.655,13.447,4.707c0.311,2.999,2.845,30.358-11.896,30.358
                                                               c-9.723,0-8.792,0-8.792,0s-10.861,0.982-9.051-28.859C354.074,500.103,360.642,497.826,370.107,497.724z"/>
                                    </defs>
                                    <clipPath id="SVGID_8_">
                                        <use xlink:href="#SVGID_6_"  overflow="visible"/>
                                    </clipPath>
                                    <path clip-path="url(#SVGID_8_)" fill="#039475" d="M352.987,504.085c0.104,4.706,9.413,6.052,13.861,6.206
                                                                                       c7.499,0.311,12.413-0.775,13.344-1.5c-0.052,2.327-1.448,21.567-7.345,24.258c-5.947,2.688-15.412,1.345-15.412,1.345
                                                                                       l-6.051-17.999L352.987,504.085z"/>
                                </g>
                            </g>
                            <g>
                                <g>
                                    <defs>
                                        <path id="SVGID_9_" d="M370.107,497.724c7.706-0.104,13.137,1.655,13.447,4.707c0.311,2.999,2.845,30.358-11.896,30.358
                                                               c-9.723,0-8.792,0-8.792,0s-10.861,0.982-9.051-28.859C354.074,500.103,360.642,497.826,370.107,497.724z"/>
                                    </defs>
                                    <clipPath id="SVGID_10_">
                                        <use xlink:href="#SVGID_9_"  overflow="visible"/>
                                    </clipPath>
                                    <path clip-path="url(#SVGID_10_)" fill="#34B399" d="M356.039,504.498c0,0-2.328,19.965,4.603,27.877
                                                                                        c6.931,7.861,3.775,2.225,3.775,2.225s-5.431-4.137-5.068-26.688C360.59,500.724,356.039,504.498,356.039,504.498z"/>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g id="mug_top">
                        <g>
                            <ellipse id="SVGID_7_" fill="#039475" cx="368.969" cy="503.206" rx="12.775" ry="4.448"/>
                        </g>
                        <g>
                            <g>
                                <g>
                                    <defs>
                                        <ellipse id="SVGID_12_" cx="368.969" cy="503.206" rx="12.775" ry="4.448"/>
                                    </defs>
                                    <clipPath id="SVGID_13_">
                                        <use xlink:href="#SVGID_12_"  overflow="visible"/>
                                    </clipPath>
                                    <ellipse id="coffee" clip-path="url(#SVGID_13_)" fill="#534741" cx="369.486" cy="507.085" rx="12.774" ry="4.448"/>
                                </g>
                            </g>
                        </g>
                    </g>
                    <path id="handle" fill="none" stroke="#34B399" stroke-width="10.4669" stroke-miterlimit="10" d="M383.037,506.723
                                                                                                                    c6.051-0.982,8.379-1.447,8.068,8.274c-0.311,9.725-4.5,12.568-12.103,11.38"/>
                    <g id="smoke">
                        <path id="smoke1" opacity="0.5" fill="#A5AAD8" enable-background="new    " d="M371.762,499.793
                                                                                                      c-1.707-5.689,0.621-7.087,1.138-12.154c0.518-5.068-3.517-10.706-3.775-11.018c-0.258-0.361,7.137,3.62,7.758,7.654
                                                                                                      C377.451,488.311,373.003,491.259,371.762,499.793z"/>
                        <path id="smoke2" opacity="0.5" fill="#A5AAD8" enable-background="new    " d="M365.504,504.032
                                                                                                      c-1.707-5.688,0.207-5.637,0.724-10.706c0.517-5.067-1.448-11.792-3.414-12.464c3.879,1.086,6.154,8.068,6.724,12.104
                                                                                                      C370.159,497,366.745,495.5,365.504,504.032z"/>
                    </g>
                </g>
                <path id="forehand" fill="#FCCEA4" d="M400.363,529.375c0.311-3.724-3.362-18.824-3.827-22.395
                                                      c-0.465-3.568-9.154,0.776-10.965,1.345c-1.81,0.569-2.482,11.12-1.293,14.947c1.19,3.827,5.793,8.637,5.793,8.637
                                                      c1.189,9.673-4.293,20.224,1.086,40.55c5.327,20.223,13.55,9.465,13.55,9.465C404.811,577.631,400.053,533.049,400.363,529.375z"
                      />
            </g>
        </g>
        <g id="body">
            <path fill="#F7CD45" d="M280.58,538.531c0,0,44.065-13.757,57.409-8.066c21.153,9.051,56.737,84.096,69.874,84.405
                                    c-18.774,4.241-57.047,13.292-82.597,18.774c-15.102,3.258-34.549-29.222-34.549-29.222l-8.068-31.704L280.58,538.531z"/>
            <path id="shadow" fill="#F4B400" d="M287.407,566.15c0,0,12.62,46.496,57.15,63.356l-32.428,6.931
                                                c-23.688-4.293-28.394-27.772-28.394-27.772L287.407,566.15z"/>
        </g>
        <g id="arm_biceps">
            <g>
                <path id="SVGID_16_" fill="#FCCEA4" d="M288.907,560.564c-0.104-4.552-2.845-24.464-2.845-24.464
                                                       c-18.567,8.793-38.997,19.033-29.066,52.909c9.62,32.739,17.843,53.014,31.135,49.755l4.396-8.896
                                                       C297.906,600.543,289.01,565.115,288.907,560.564z"/>
            </g>
            <g>
                <g>
                    <defs>
                        <path id="SVGID_14_" d="M288.907,560.564c-0.104-4.552-2.845-24.464-2.845-24.464c-18.567,8.793-38.997,19.033-29.066,52.909
                                                c9.62,32.739,17.843,53.014,31.135,49.755l4.396-8.896C297.906,600.543,289.01,565.115,288.907,560.564z"/>
                    </defs>
                    <clipPath id="SVGID_15_">
                        <use xlink:href="#SVGID_14_"  overflow="visible"/>
                    </clipPath>
                    <path id="shadow_biceps" clip-path="url(#SVGID_15_)" fill="#F9B175" d="M292.476,555.701
                                                                                           c-5.327,2.896-24.257,7.033-23.584,15.931c0.672,8.896,2.896,25.084,5.224,45.771c0.879,7.499,5.586,29.636,12.775,31.859
                                                                                           c5.379,1.655-6.361,1.448-6.361,1.448l-32.118-60.048l8.585-40.341l29.635-18.413L292.476,555.701z"/>
                </g>
            </g>
        </g>
        <g id="shoulder">
            <g>
                <path id="shoulder_base" fill="#F7CD45" d="M286.838,533.462c-2.172-4.189-24.412,5.74-30.773,23.738
                                                           c-6.361,17.947-2.068,26.844-2.068,26.844s30.515-12.619,39.875-3.104C297.596,584.769,294.699,548.615,286.838,533.462z"/>
            </g>
            <g>
                <g>
                    <g>
                        <defs>
                            <path id="SVGID_17_" d="M286.838,533.462c-2.172-4.189-24.412,5.74-30.773,23.738c-6.361,17.947-2.068,26.844-2.068,26.844
                                                    s30.515-12.619,39.875-3.104C297.596,584.769,294.699,548.615,286.838,533.462z"/>
                        </defs>
                        <clipPath id="SVGID_18_">
                            <use xlink:href="#SVGID_17_"  overflow="visible"/>
                        </clipPath>
                        <path id="shadow_shoulder" clip-path="url(#SVGID_18_)" fill="#F4B400" d="M292.993,549.599c0,0-21.36-8.018-28.136,7.654
                                                                                                 c-4.034,9.36-4.189,20.016-4.189,20.016l-12.723,7.293l-0.362-20.171l28.136-35.376l12.93,1.861L292.993,549.599z"/>
                    </g>
                </g>
            </g>
        </g>
        <g id="neck">
            <path fill="#F4B400" d="M285.338,517.74c0,0-16.136-3.155-16.395,18.517c-0.207,17.119,22.395,12.619,30.411,14.688
                                    c33.618,8.689,42.358,5.225,38.273-11.068c-3.465-13.809,0.982-15.102,0.982-15.102L285.338,517.74z"/>
            <g id="lace2">
                <path fill="none" stroke="#EDEDED" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M314.508,549.961
                                                                                                                     c0,0-3.258,6.672-1.551,13.551c1.707,6.878,0.362,10.137,0.362,10.137"/>
                <path fill="#62627F" d="M315.491,571.166c-0.155,1.86-1.138,3.31-2.224,3.258c-1.086-0.053-1.862-1.604-1.707-3.465
                                        c0.155-1.862,1.138-3.312,2.224-3.26C314.87,567.752,315.646,569.304,315.491,571.166z"/>
                <path fill="#EDEDED" d="M315.128,574.115c0.155,0.879-0.621,1.706-1.707,1.861c-1.086,0.104-2.069-0.517-2.224-1.396
                                        c-0.155-0.879,0.621-1.706,1.707-1.86C313.991,572.615,314.974,573.235,315.128,574.115z"/>
            </g>
            <g id="lace">
                <path fill="none" stroke="#EDEDED" stroke-width="5" stroke-linecap="round" stroke-miterlimit="10" d="M333.851,551.306
                                                                                                                     c0,0,7.81,1.345,7.758,8.431c-0.052,7.085,2.017,9.931,2.017,9.931"/>
                <path fill="#62627F" d="M340.937,567.804c0.569,1.759,1.862,2.948,2.896,2.638c1.035-0.31,1.448-1.965,0.879-3.775
                                        c-0.569-1.81-1.862-2.947-2.896-2.638C340.782,564.339,340.368,566.046,340.937,567.804z"/>
                <path fill="#EDEDED" d="M341.971,570.597c0.052,0.932,0.983,1.552,2.069,1.396c1.086-0.155,1.914-0.981,1.81-1.913
                                        c-0.052-0.932-0.982-1.552-2.069-1.396C342.747,568.839,341.919,569.666,341.971,570.597z"/>
            </g>
        </g>
        <g id="head">
            <g id="head_base">
                <g>
                    <path id="SVGID_11_" fill="#FCCEA4" d="M275.822,471.192c-6.155-2.431-6.931,4.707-6.517,8.12
                                                           c0.414,3.413,4.138,10.654,12.31,9.413c3.155,6.517,9.723,30.825,6.931,35.065c-2.793,4.24,44.117,8.119,44.117,8.119
                                                           l4.5-32.221c0,0,3.982-0.362,4.758-6.931c0.362-3-1.965-4.655-1.965-4.655s-0.931-10.344,5.792-13.24
                                                           c1.759-11.637,3.569-15.723-0.465-22.911c-4.086-7.293-45.255-15.93-45.255-15.93L286.321,457.9l-12.103,11.172"/>
                </g>
                <g>
                    <g>
                        <g>
                            <defs>
                                <path id="SVGID_19_" d="M275.822,471.192c-6.155-2.431-6.931,4.707-6.517,8.12c0.414,3.413,4.138,10.654,12.31,9.413
                                                        c3.155,6.517,9.723,30.825,6.931,35.065c-2.793,4.24,44.117,8.119,44.117,8.119l4.5-32.221c0,0,3.982-0.362,4.758-6.931
                                                        c0.362-3-1.965-4.655-1.965-4.655s-0.931-10.344,5.792-13.24c1.759-11.637,3.569-15.723-0.465-22.911
                                                        c-4.086-7.293-45.255-15.93-45.255-15.93L286.321,457.9l-12.103,11.172"/>
                            </defs>
                            <clipPath id="SVGID_20_">
                                <use xlink:href="#SVGID_19_"  overflow="visible"/>
                            </clipPath>
                            <path id="shadow_head" clip-path="url(#SVGID_20_)" fill="#F9B175" d="M284.355,468.761l27.773-29.739l0.828,6.465
                                                                                                 l-3.31,19.551c0,0-15.361,7.24-5.069,30.05c4.5,10.033,3.052,32.894,3.052,32.894l-27.049,0.052l-21.36-46.496l2.534-16.859
                                                                                                 l10.551,2.274L284.355,468.761z"/>
                        </g>
                    </g>
                </g>
            </g>
            <g id="eyes">
                <path fill="#424254" d="M323.663,480.139c-0.259,1.655-1.604,2.018-3.465,1.759c-1.81-0.259-3.362-1.086-3.155-2.741
                                        c0.258-1.654,1.914-2.793,3.724-2.534C322.628,476.881,323.921,478.433,323.663,480.139z"/>
                <path fill="#424254" d="M339.851,482.467c-0.31,1.603-1.345,1.913-2.482,1.706c-1.138-0.206-1.965-0.775-1.655-2.379
                                        c0.311-1.604,1.552-2.793,2.689-2.587C339.541,479.364,340.161,480.812,339.851,482.467z"/>
            </g>
            <g id="eyebrows">
                <path fill="#62627F" d="M310.215,467.002c0.207,0.982,2.534-1.086,8.43-0.259c4.965,0.725,4.862,1.396,7.241,3.052
                                        c2.379,1.654,4.138-0.413,3.931-3.104c-0.207-2.688-4.241-4.293-11.016-4.966C310.164,460.848,309.595,463.743,310.215,467.002z"
                      />
                <path fill="#62627F" d="M336.282,471.865c0,0-0.259-5.431,6.051-3.361c2.896,0.932,4.189,2.068,4.189,2.068
                                        c0.828,1.811,0.517,4.965-1.551,4.811c-2.121-0.155-0.207-1.862-4.655-2.172C337.368,473.002,336.282,474.088,336.282,471.865z"
                      />
            </g>
            <g id="hair">
                <g>
                    <path id="hair_base" fill="#62627F" d="M277.684,433.332c0,0,1.345,4.811,2.275,3.62c0.931-1.188-1.914-15.103,41.893-20.118
                                                           c18.413-2.12,30.101,1.24,40.548,4.81c1.655,3.982,8.275,26.016-15.567,33.463c-5.689-5.74-13.706-8.017-24.257-8.792
                                                           c-11.585-0.828-19.705,2.896-22.756,16.498c-11.378,9.672-10.5,11.896-10.5,11.896s-3.103,27.877,13.603,35.169
                                                           c8.896-12.466,11.43-15.31,20.326-14.378c4.914,3.258,13.913,4.293,13.913,4.293c3.879,3.153,2.896,7.344,2.638,13.859
                                                           c-0.207,4.862,3.879,12.93,5.275,18.257s-11.585,20.067-32.635,6.775c-16.085-10.188-24.567-17.896-27.98-22.032
                                                           c0,0-0.776-12.98-1.293-22.757c-3.621-11.533-5.017-21.464-5.017-21.464s-2.327-0.413-3.465-1.448
                                                           c-4.344-9.153-2.586-12.359-3.62-16.757l3.362,1.812C274.374,455.883,272.874,442.643,277.684,433.332z"/>
                </g>
                <g id="hair_highlight">
                    <g>
                        <g>
                            <defs>
                                <path id="SVGID_21_" d="M277.684,433.332c0,0,1.345,4.811,2.275,3.62c0.931-1.188-1.914-15.103,41.893-20.118
                                                        c18.413-2.12,30.101,1.24,40.548,4.81c1.655,3.982,8.275,26.016-15.567,33.463c-5.689-5.74-13.706-8.017-24.257-8.792
                                                        c-11.585-0.828-19.705,2.896-22.756,16.498c-11.378,9.672-10.5,11.896-10.5,11.896s-3.103,27.877,13.603,35.169
                                                        c8.896-12.466,11.43-15.31,20.326-14.378c4.914,3.258,13.913,4.293,13.913,4.293c3.879,3.153,2.896,7.344,2.638,13.859
                                                        c-0.207,4.862,3.879,12.93,5.275,18.257s-11.585,20.067-32.635,6.775c-16.085-10.188-24.567-17.896-27.98-22.032
                                                        c0,0-0.776-12.98-1.293-22.757c-3.621-11.533-5.017-21.464-5.017-21.464s-2.327-0.413-3.465-1.448
                                                        c-4.344-9.153-2.586-12.359-3.62-16.757l3.362,1.812C274.374,455.883,272.874,442.643,277.684,433.332z"/>
                            </defs>
                            <clipPath id="SVGID_22_">
                                <use xlink:href="#SVGID_21_"  overflow="visible"/>
                            </clipPath>
                            <path clip-path="url(#SVGID_22_)" fill="#797999" d="M362.349,421.644c0,0-7.137,29.895-15.567,33.463
                                                                                c-8.431,3.569,24.67,0.88,24.67,0.88l-5.275-34.291L362.349,421.644z"/>
                        </g>
                    </g>
                    <g>
                        <g>
                            <defs>
                                <path id="SVGID_23_" d="M277.684,433.332c0,0,1.345,4.811,2.275,3.62c0.931-1.188-1.914-15.103,41.893-20.118
                                                        c18.413-2.12,30.101,1.24,40.548,4.81c1.655,3.982,8.275,26.016-15.567,33.463c-5.689-5.74-13.706-8.017-24.257-8.792
                                                        c-11.585-0.828-19.705,2.896-22.756,16.498c-11.378,9.672-10.5,11.896-10.5,11.896s-3.103,27.877,13.603,35.169
                                                        c8.896-12.466,11.43-15.31,20.326-14.378c4.914,3.258,13.913,4.293,13.913,4.293c3.879,3.153,2.896,7.344,2.638,13.859
                                                        c-0.207,4.862,3.879,12.93,5.275,18.257s-11.585,20.067-32.635,6.775c-16.085-10.188-24.567-17.896-27.98-22.032
                                                        c0,0-0.776-12.98-1.293-22.757c-3.621-11.533-5.017-21.464-5.017-21.464s-2.327-0.413-3.465-1.448
                                                        c-4.344-9.153-2.586-12.359-3.62-16.757l3.362,1.812C274.374,455.883,272.874,442.643,277.684,433.332z"/>
                            </defs>
                            <clipPath id="SVGID_24_">
                                <use xlink:href="#SVGID_23_"  overflow="visible"/>
                            </clipPath>
                            <path clip-path="url(#SVGID_24_)" fill="#797999" d="M335.713,499.172c0,0,4.293,8.379-2.896,15.773
                                                                                c-0.724,0.726,7.396,11.947,4.551,19.964c-2.689,7.654-12.206,11.999-12.206,11.999l27.67-3.827l-1.914-31.549l-11.378-13.551
                                                                                L335.713,499.172z"/>
                        </g>
                    </g>
                </g>
            </g>
            <path id="mouth" fill="#424254" d="M333.438,509.258c-0.414-0.312-1.448,0.413-5.741,0.153c-3.621-0.206-3.258-0.774-5.379-1.345
                                               c-2.121-0.517-2.741,0.155-1.862,1.087c0.931,0.932,2.638,2.275,8.534,1.965C334.782,510.757,334.782,510.344,333.438,509.258z"/>
        </g>
        <g id="forehand_and_paper">
            <g id="paper">
                <path fill="#E6E6E6" d="M391.57,557.2c0.259,0.104,11.172,1.759,11.43,1.862c11.585,5.068,13.085,4.758,13.085,4.758
                                        c-17.688,13.811-36.1,40.756-38.997,48.979l-40.031-5.121l6.62-9.826c0,0,17.947-26.17,21.36-29.636l2.741-2.068
                                        c0,0,7.758-5.172,11.12-6.259C381.537,559.012,391.57,557.2,391.57,557.2z"/>
                <path fill="#F2F2F2" d="M403.311,559.115c0,0-8.224-3.465-19.654-1.188c-7.861,1.604-18.981,10.653-18.981,10.653
                                        s18.774-14.999,24.774-4.24C392.76,557.357,399.018,558.443,403.311,559.115z"/>
            </g>
            <path id="hand_paper" fill="#FCCEA4" d="M288.648,639.385c19.343-4.707,32.066-22.603,37.911-27.412
                                                    c3.465-2.845,8.275-6.518,11.844-9.62c11.689-0.517,21.723-3.413,21.723-3.413s3.465-3.465,1.965-6.258
                                                    c-0.672-1.241,1.189-3.725,2.017-5.845c1.086-2.741-0.155-5.482,1.758-8.068c3.155-4.293-5.637-3.31-16.343,0.621
                                                    c-10.706,3.879-12.827,11.067-12.827,11.067c-30.876,16.032-39.928,16.396-49.03,26.016c-3.414,3.62-3.103,6.051-6.568,12.826
                                                    C277.633,636.073,281.718,639.023,288.648,639.385z"/>
        </g>
    </g>
    <g id="ginger_dude">
        <g id="ginger">
            <g id="ginger_head">
                <path id="ginger_head_base" fill="#FCCEA4" d="M641.895,458.882c0,0-6.413,10.552-5.533,18.465
                                                              c0.879,7.913,0.567,23.532,0.567,23.532s-7.292,9.93-7.032,11.43c0.31,1.448,4.705,6.155,4.705,6.155s2.174,19.238,3.621,20.998
                                                              c1.447,1.758,12.464,6.827,12.464,6.827l0.569,11.118c0,0,26.48,8.947,46.237-1.758c-0.312-11.741,0-69.978,0-69.978
                                                              l-39.515-13.188L641.895,458.882z"/>
                <path id="eye" fill="#424254" d="M637.498,491.259c1.241,0,1.655,1.604,1.655,3.827c0,2.225-0.414,4.293-1.707,4.293
                                                 s-2.275-1.812-2.275-4.086C635.223,493.07,636.257,491.259,637.498,491.259z"/>
                <g id="ginger_hair">
                    <path fill="#F88A46" d="M714.095,518.617l5.482-36.462l-0.414-34.135l-48.15-10.396c0,0-4.396,5.482-8.793,6
                                            c-4.034,0.519-20.479-4.552-23.065-5.326c-0.776,4.81-0.155,11.12,0.619,19.343c0.414,4.448,12,10.396,12,10.396l-5.587,26.48
                                            c15.413-4.138,10.396,10.499,4.967,20.739c0.258,26.636,20.895,27.772,27.617,28.084c6.88,0.413,23.118-1.241,23.118-1.241
                                            C702.146,539.152,713.475,522.497,714.095,518.617z"/>
                    <path id="ginger_hair_highlight" fill="#F8A246" d="M662.22,443.625c4.396-0.569,9.052-4.966,9.052-4.966
                                                                       s39.41,17.896,43.342,13.964c2.017,12.568-1.812,69.356-1.812,69.356c7.034-11.74,14.225-65.271,14.225-65.271
                                                                       s-3.467-3.568-2.121-7.861c1.293-4.293-10.758-13.033-10.758-13.033l-3.311,3.568c-2.741,3.879-50.323-11.274-50.323-11.274
                                                                       s-1.966,6.311-3.673,7.499c-3.62,2.482-12.723,1.707-12.723,1.707s-4.913,0.104-5.018,0.982
                                                                       C641.739,439.125,658.186,444.143,662.22,443.625z"/>
                </g>
                <path id="ginger_eyebrow" fill="#F88A46" d="M642.618,480.656l-5.586-2.224c-1.345-0.519-2.018-2.069-1.448-3.414l0,0
                                                            c0.518-1.345,0.311-2.689,1.655-2.172l7.345,2.896c1.345,0.518,1.499,3.361,0.982,4.654l0,0
                                                            C644.997,481.794,643.911,481.174,642.618,480.656z"/>
            </g>
            <g id="suit">
                <path id="leg" fill="#46465C" d="M585.83,689.034l32.015-3.206l47.634,14.067L580.4,753.581l-28.551-0.518
                                                 c0,0,0.569-6.154,17.379-51.513C570.831,697.156,581.123,689.5,585.83,689.034z"/>
                <path id="base" fill="#555570" d="M728.99,671.036l4.604-97.182c0,0-23.223-18.567-39.411-18.567l-42.875,2.068
                                                  c-4.552,0.983-7.5,1.707-16.653,5.482c-4.447,1.861-24.98,13.239-24.825,18.051l9.051,100.231l2.896,38.429
                                                  c0,16.188,44.529,34.549,60.719,34.549l2.173-4.551l22.653,6.258c0,0,11.739-16.24,11.739-32.43l-6.517-42.307l11.844,0.621
                                                  L728.99,671.036z"/>
                <path id="white_collar" fill="#E6E6E6" d="M702.976,557.771l-54.306,7.034c0,0-0.932-11.379,1.447-13.758
                                                          c26.48,9.879,47.169-1.189,47.169-1.189L702.976,557.771z"/>
                <path id="collar" fill="#62627F" d="M645.773,556.737c-3.26,1.034-9.827,4.034-14.326,6.154c-2.226,1.034-2.069,4.293,0.258,5.12
                                                    c5.121,1.811,12.413,2.896,13.396,3.207c23.378,7.86,54.307-1.189,66.1-5.275c2.12-0.725,2.586-3.517,0.827-4.913l-9.518-7.396
                                                    c-0.414-0.362-1.034-0.362-1.5-0.104c-4.758,2.586-30.358,15.361-54.149,3.312C646.497,556.685,646.084,556.633,645.773,556.737z
                                                    "/>
                <polygon id="back_shadow" fill="#46465C" points="686.942,694.88 684.615,733.153 693.2,735.067 			"/>
                <g id="arm">
                    <path id="hand" fill="#FCCEA4" d="M569.176,634.937c-13.291-5.068-25.601-2.896-33.307,6.206
                                                      c-7.707,9.103-4.914,12.98-1.345,11.017c3.567-1.914,8.48-4.759,8.48-4.759l14.378,12.879l19.499-15.723L569.176,634.937z"/>
                    <path id="white_shirt" fill="#E6E6E6" d="M579.055,642.902c-2.224-3.104-6.258-6.62-6.258-6.62s-26.429,3.725-19.551,23.066
                                                             c6.621,9.774,15.62,12.879,15.62,12.879L579.055,642.902z"/>
                    <path id="suit_arm" fill="#555570" d="M645.204,663.743l-65.685-24.772c0,0-23.378,1.086-20.118,27.929
                                                          c7.653,16.137,86.424,27.618,86.424,27.618L645.204,663.743z"/>
                    <g id="buttons">
                        <circle fill="#424254" cx="567.056" cy="664.003" r="2.845"/>
                        <circle fill="#424254" cx="578.229" cy="669.744" r="2.845"/>
                    </g>
                </g>
                <polygon id="arm_shadow" fill="#46465C" points="642.359,606.335 645.773,694.518 651.771,690.018 			"/>
            </g>
        </g>
    </g>
    <g id="black_armchair">
        <path id="black_armchair_highlight" fill="#696F9F" d="M778.693,759.064L897.959,487.07c0,0-5.068-6.103-46.186-6.465
                                                              c-89.527-0.827-137.887,215.672-151.901,231.343c-36.514,40.962-115.49-60.719-136.385,40.548"/>
        <path id="dark" fill="#46465C" d="M859.894,502.431c-89.526,0-148.798,196.845-161.521,213.603
                                          c-38.014,50.064-126.455-56.063-141.764,37.031l222.085,5.999l109.749-251.72C888.442,507.396,877.84,502.431,859.894,502.431z"/>
    </g>
</svg>
            
          
!
            
              .st0{fill:#F0F0F0;}
.st1{fill:#FFFFFF;}
.st2{fill:#AFF2E2;}
.st3{fill:#E8E8E8;}
.st4{fill:#797FB8;}
.st5{fill:#727BAB;}
.st6{fill:none;stroke:#E8E8E8;stroke-width:18;stroke-miterlimit:10;}
.st7{fill:#FFFFFF;stroke:#A5AAD8;stroke-width:11.8186;stroke-miterlimit:10;}
.st8{fill:#FFFFFF;stroke:#A5AAD8;stroke-width:8;stroke-miterlimit:10;}
.st9{fill:#A5AAD8;}
.st10{fill:#62627F;}
.st11{fill:none;stroke:#E8E8E8;stroke-width:6.6375;stroke-miterlimit:10;}
.st12{fill:none;stroke:#A5AAD8;stroke-width:3.9825;stroke-miterlimit:10;}
.st13{fill:#97231D;}
.st14{fill:#CF4D46;}
.st15{fill:#039475;}
.st16{fill:#34B399;}
.st17{clip-path:url(#SVGID_4_);fill:#0DA37F;}
.st18{fill:#0DA37F;}
.st19{fill:#F2F2F2;}
.st20{fill:#CCCCCC;}
.st21{fill:#696F9F;}
.st22{fill:#F8A246;}
.st23{fill:#F4C02E;}
.st24{fill:none;stroke:#A5AAD8;stroke-width:8;stroke-miterlimit:10;}
.st25{fill:#555570;}
.st26{fill:#FCCEA4;}
.st27{clip-path:url(#SVGID_8_);fill:#039475;}
.st28{clip-path:url(#SVGID_12_);fill:#34B399;}
.st29{clip-path:url(#SVGID_15_);fill:#534741;}
.st30{fill:none;stroke:#34B399;stroke-width:10.4669;stroke-miterlimit:10;}
.st31{opacity:0.5;fill:#A5AAD8;}
.st32{fill:#F7CD45;}
.st33{fill:#F4B400;}
.st34{clip-path:url(#SVGID_17_);fill:#F9B175;}
.st35{clip-path:url(#SVGID_19_);fill:#F4B400;}
.st36{fill:none;stroke:#EDEDED;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.st37{fill:#EDEDED;}
.st38{clip-path:url(#SVGID_21_);fill:#F9B175;}
.st39{fill:#424254;}
.st40{clip-path:url(#SVGID_23_);fill:#797999;}
.st41{clip-path:url(#SVGID_25_);fill:#797999;}
.st42{fill:#E6E6E6;}
.st43{fill:#F88A46;}
.st44{fill:#46465C;}
.st45{fill:#534741;}
.st46{fill:none;stroke:#534741;stroke-width:2;stroke-miterlimit:10;}

.flash:hover {
    fill: #fffe00;
    cursor: pointer;
}

.phone,
.display_phone,
#smoke,
#eyes,
#red_armchair,
#interviewer,
#forehand_and_paper,
#arm_biceps,
#hand,
#leg,
#bulb,
#head,
#mouth {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: 50% 50%;
}

.phone {
    animation-name: phone;
    animation-duration: 0.45s;
    animation-delay: 1.3s;
}

.display_phone {
    animation-name: display_phone;
    animation-duration: 0.95s;
    animation-delay: 1.5s;
}

#smoke {
    animation-name: smoke;
    animation-duration: 8s;
    opacity: 0.1;
    transform: translateY(5px);
}

#eyes {
    animation-name: eyes;
    animation-duration: 2s;
}

#red_armchair {
    animation-name: red_armchair;
    animation-duration: 2s;
}

#interviewer {
    animation-name: interviewer;
    animation-duration: 2s;
}

#forehand_and_paper {
    animation-name: forehand_and_paper;
    animation-duration: 2s;
}

#arm_biceps {
    animation-name: arm_biceps;
    animation-duration: 2s;   
}

#hand {
    animation-name: hand;
    animation-duration: 1s;
}

#leg {
    animation-name: leg;
    animation-duration: 1s;
}

#bulb {
    animation-name: bulb;
    animation-duration: 5s;
}

#head {
    animation-name: head;
    animation-duration: 20s;
}

@keyframes phone {
    50% {
        transform: translate(-2px,1px);
    } 
}

@keyframes display_phone {
    50% {
        fill: #F4B350;
    }
}

@keyframes smoke {
    50% {
        transform: translateY(-4px);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-8px);
        opacity: 0;
    }
}

@keyframes eyes {
    50% {
        transform: translateX(-3px);
    }
}

@keyframes red_armchair {
    50% {
        transform: translateX(2px);
    }
}

@keyframes interviewer {
    50% {
        transform: translate(2px);
    }
}

@keyframes forehand_and_paper {
    50% {
        transform: translateY(-5px);
    }
}

@keyframes arm_biceps {
    50% {
        transform: translateY(-5px);
    }
}

@keyframes hand {
    50% {
        transform: translateY(-2px);
    }
}

@keyframes leg {
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bulb {
    50% {
        transform: translateY(36px);
    }
}

@keyframes head {
    10% { 
        transform: rotate(0) translate(0); 
    }
    70% {
        transform: rotate(15deg) translate(14px, 8px);
    }
}

            
          
!
            
              function Boom() {
    var window = document.getElementById('window');
    var trees = document.getElementById('trees');
    var the_wall = document.getElementById('the_wall');
    var white_wall_shadow = document.getElementById('white_wall_shadow');
    var purple_wall_shadow = document.getElementById('purple_wall_shadow');
    var purple_wall = document.getElementById('purple_wall');
    var window_bar = document.getElementById('window_bar');
    var paper = document.getElementById('paper');
    var papers = document.getElementById('papers');
    var pen = document.getElementById('pen');
    
    document.getElementById('phone').classList.add('phone');
    document.getElementById('display_phone').classList.add('display_phone');
    document.getElementById('bulb').style.display = 'none';
    document.getElementById('mouth').style.transform = 'rotate(180deg) scale(1.3)';
    document.getElementById('forehand_and_paper').style.animationName = undefined;
    document.getElementById('arm_biceps').style.animationName = undefined;
    document.getElementById('eyes').style.animationName = undefined;
    document.getElementById('head').style.animationName = undefined;
    document.getElementById('red_armchair').style.animationName = undefined;
    document.getElementById('hand').style.animationName = undefined;
    document.getElementById('leg').style.animationName = undefined;
    document.getElementById('interviewer').style.animationName = undefined;
    
    window.style.fill = '#c71515';
    window.style.transition = '2s';
    trees.style.fill = '#6d2020';
    trees.style.transition = '2s';
    the_wall.style.fill = '#333333';
    the_wall.style.transition = '2s';
    white_wall_shadow.style.fill = '#1d1d1d';
    white_wall_shadow.style.transition = '2s';
    purple_wall_shadow.style.fill = '#1d1d1d';
    purple_wall_shadow.style.transition = '2s';
    purple_wall.style.fill = '#252525';
    purple_wall.style.transition = '2s';
    window_bar.style.fill = '#1d1d1d';
    window_bar.style.transition = '2s';
    paper.style.opacity = '0';
    paper.style.transform = 'translate(220px, -120px)';
    paper.style.transition = '2s';
    papers.style.opacity = '0';
    papers.style.transform = 'translate(130px, -160px)';
    papers.style.transition = '2s';
    pen.style.opacity = '0';
    pen.style.transform = 'translate(210px, -180px)';
    pen.style.transition = '2s';
}

document.getElementById('light').addEventListener('click', Boom);
            
          
!
999px
Loading ..................

Console