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.

            
              <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ilustracja konkursowa - animacja SVG</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<?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" viewBox="0 0 1979.9 1080" style="enable-background:new 0 0 1979.9 1080;" xml:space="preserve">

<g id="background">

	<g id="white_wall">
		<polygon id="the_wall" class="st0" points="1509.7,1040.3 511.2,1014 608.2,276 1959.8,9.8 "/>
		<polygon id="window" class="st1" points="1555.1,682.1 1027,616 1045.1,254 1710.6,134.4 "/>
		<path id="trees" class="st2" d="M1029.8,585c0,0,10.5-54.9,84.3-56.7s107.8,74.7,107.8,74.7s62.1-25.3,114.5-12.5
			c27.3,6.7,66.5,24.5,82,46.5c54.5-26.7,119.5-26.1,155.5-21l-18.8,66.1L1027,616L1029.8,585z"/>
		<polygon id="window_bar" class="st3" points="1324.9,178.1 1265.9,658.8 1293.1,661.3 1363.7,165.4"/>
		<polygon id="white_wall_shadow" class="st3" points="1045.1,254 1025,618.1 1010.7,613 1015.8,262.1 586.9,411.3 604.1,276.7
			1955.7,10.5 1736.2,515.1 1710.6,134.4"/>
	</g>
	<polygon id="purple_wall" class="st4" points="18,168.9 198.5,1036.9 441.9,1021.1 663.2,998.8 604.2,276.4"/>
	<polygon id="purple_wall_shadow" class="st5" points="614.4,401.7 99.8,560.6 18,168.9 604.2,276.4"/>

	<g id="clock" style="display:inherit;">
		<ellipse id="shadow_clock" transform="matrix(6.816390e-02 -0.9977 0.9977 6.816390e-02 369.6182 1222.0718)" class="st6" cx="839" cy="413.2" rx="58.4" ry="52.7"/>
		<ellipse id="clock_base" transform="matrix(6.816390e-02 -0.9977 0.9977 6.816390e-02 368.862 1230.5776)" class="st7" cx="843.2" cy="417.8" rx="58.9" ry="47.8"/>
		<polyline id="clock_hands" class="st8" points="844.5,383.4 843.2,417.8 859.5,433.1"/>
		<polyline id="clock_hand" class="st10" points="840,420 845,420 842.5,380"/>
	</g>
	<g id="callendar" style="display:inherit;">
		<polygon id="callendar_paper_back" class="st9" points="300.7,555.6 161.7,557.1 181.5,705.1 189.1,704.3 189.7,707.7 202.6,710.9
			322,697.1 		"/>
		<polygon id="callendar_dark_bar" class="st10" points="303.5,578.8 165.7,586.9 161.7,557.1 300.7,555.6"/>
		<polygon id="callendar_paper" class="st3" points="161.7,557.1 300.7,555.6 329.8,699.5 202.6,710.9"/>
		<polygon id="callendar_dark_bar_2" class="st10" points="305.4,578.7 168.3,583.1 161.7,557.1 300.7,555.6"/>
		<g id="callendar_lines">
			<line class="st11" x1="180.6" y1="570.3" x2="259.2" y2="568.4"/>
			<polygon class="st12" points="308.9,680.8 220.7,689.4 200.6,608.3 288.9,604.6 "/>
			<line class="st12" x1="197.5" y1="599.8" x2="256" y2="597.9"/>
			<line class="st12" x1="217.3" y1="607.5" x2="237.8" y2="687.3"/>
			<line class="st12" x1="237.8" y1="606.4" x2="257.4" y2="685"/>
			<line class="st12" x1="259.2" y1="607" x2="276.9" y2="684.5"/>
			<line class="st12" x1="273.1" y1="606.4" x2="290.8" y2="683.9"/>
			<line class="st12" x1="205.2" y1="626.9" x2="293.3" y2="621.3"/>
			<line class="st12" x1="209.2" y1="643.1" x2="297" y2="635.3"/>
			<line class="st12" x1="213.6" y1="658.6" x2="301.3" y2="650.9"/>
			<line class="st12" x1="215.4" y1="674.2" x2="303.1" y2="666.4"/>
		</g>
	</g>
</g>
<g id="red_armchair">
	<path id="red_armchair_back" class="st13" d="M678.3,875.3l-83.4-136.5L409.2,471.4c-40.2,31.1-83.1,92.1-32.4,245.3s139.5,260.2,139.5,260.2
		l237.9,44.2l131.9,3.4l108-152.9L678.3,875.3z"/>
	<path id="red_armchair_highlight" class="st14" d="M460.1,444.4c-99.9,24.7-103.8,116.8-81.1,190.8c22.7,74,29.9,127.3,63.6,114.1
		c79-31,103.8,105.2,103.8,105.2l289.4-62.3c0,0-43.4-157.7-100.5-123.3s-57.8-22.1-76.6-88.3S583.7,413.9,460.1,444.4z"/>
	<path id="interviewer_shadow" class="st13" d="M544.6,489.3c-8.7-23.1-58.7-26.3-87.4-6.1c-14.4,10.2-39.8,49.2-21.6,77.9
		c6.1,9.7,35.5,46.5,35.5,46.5s-29.4,26.1-30.5,47c-4,79.3,37,28.1,80.9,124.3c17.5,38.3,37,32.5,37,32.5l66.4-12.2L544.6,489.3z"/>
</g>
<g id="table">
	<g id="table_construction">
		<polygon class="st15" points="1512.9,983.3 1212.5,967.9 1100.6,806.9 1425.7,732.8 1458.4,745.1"/>
        <g>
            <path id="SVGID_1_" class="st15" d="M1369.3,786.5l1.5-29.5c0,0-294-32.6-335.3-24c-133.8,28-426,89.6-497.9,107.3
                c-0.5,0.1-0.9,0.2-1.4,0.4h-0.1c-75.4,17.6-35.7,174.5-35.7,174.5l313.3,7.5c1-19.3,5.8-62.3,36.2-73.9L1369.3,786.5z"/>
        </g>
		<g>
			<g>
				<path id="SVGID_3_" class="st16" d="M1427.2,732.7l-373.1-22.2c-8-1.2-16.2-0.9-24.1,0.7c-72.4,15.2-450.9,94.7-515.9,110.7
					c-0.5,0.1-0.9,0.2-1.4,0.4h-0.1c-75.4,17.6-12.2,192.9-12.2,192.9l276.3,6.7c0,0,1-73,49.7-91.5l601.5-191.5
					C1431.3,737.8,1430.7,732.9,1427.2,732.7z"/>
			</g>
			<g>
				<clipPath id="SVGID_4_">
					<use xlink:href="#SVGID_3_"  style="overflow:visible;"/>
				</clipPath>
				<polygon class="st17" points="429.6,875.6 822.4,989.7 777,1022.4 500.5,1015.2"/>
			</g>
		</g>
	</g>
	<g id="shadows">
		<g id="shadow_legs">
			<polygon class="st18" points="912.4,736.7 875.6,744.2 1022.2,734 977.2,723.1 "/>
			<polygon class="st18" points="1067.2,713.5 1036.2,716.5 1030.2,733.3 1085.3,730 "/>
		</g>
		<polygon id="shadow_hand" class="st18" points="1035.2,829.9 1028.3,866.1 1073.1,853.8 1056.9,812"/>
	</g>
	<g id="stuff_on_table">
		<g id="phone">
			<path id="shadow_phone" class="st18" d="M923.9,749.7c0,0-7.1,0.8-8.5,5.8c0,0-4.7,21.5-4.7,24.2s-4.2,9,11.5,11.3
				c12.7,1.9,36.6,2.8,46.7,3.5c2.5,0.2,10.3-0.1,12.5-1.2l27.2-6L923.9,749.7z"/>
			<path class="st19" d="M1005.2,789.5l-79-7.8c-4.5-0.4-7.7-3.1-7.3-7.6l3.2-22.1c0.4-4.5,4.1-5.6,8.5-5.2l75.5,5
				c4.5,0.4,6.4,2.5,6,7l0.7,23.2C1012.4,786.5,1009.7,789.9,1005.2,789.5z"/>
			<polygon class="st10" points="934.1,749.2 931.4,776 1005.9,782.7 1005,753.8 "/>
			<path class="st19" d="M949.4,785.4l-14-1.3c-0.8-0.1-1.4-0.8-1.3-1.6l0,0c0.1-0.8,0.8-1.4,1.6-1.3l14,1.3
				c0.8,0.1,1.4,0.8,1.3,1.6l0,0C950.9,784.9,950.2,785.5,949.4,785.4z"/>
			<circle class="st20" cx="927" cy="761.8" r="3.8"/>
		</g>
		<g id="papers">
			<polygon id="paper_bottom" class="st19" points="800.4,779.8 879.2,767.1 951.8,838.8 866.2,857 "/>
			<polygon id="paper_top" class="st1" points="810.4,786.2 885.7,764 971.6,826 890.7,854.4 "/>
		</g>
		<g id="pen">
			<path id="shadow_pen" class="st18" d="M693.7,807.6c0,0-23.6,5.2-20,8.2s33.7,4.9,45.5,3.1s48.6-5.7,48.6-5.7L693.7,807.6z"/>
			<path class="st21" d="M716.5,816h-22.1c-2.1,0-3.9-1.7-3.9-3.9v-1.4c0-2.1,1.7-3.9,3.9-3.9h22.1c2.1,0,3.9,1.7,3.9,3.9v1.4
				C720.3,814.3,718.6,816,716.5,816z"/>
			<path class="st21" d="M767.8,813.2h-49.9c-1.7,0-3.1-1.4-3.1-3.1l0,0c0-1.7,1.4-3.1,3.1-3.1h49.9c1.7,0,3.1,1.4,3.1,3.1l0,0
				C770.9,811.8,769.5,813.2,767.8,813.2z"/>
			<path class="st19" d="M768.2,807l10.2,2.9v0.9l-10.6,2.3C767.8,813.2,767.1,807.8,768.2,807"/>
		</g>
	</g>
</g>
<g id="interviewer">
	<g id="legs">
		<path id="leg2" class="st22" d="M990.2,679.5l-99.7,12.2c-20.2,2.5-38.3,13.6-49.6,30.4l-22.5,34l177.2-36.7L990.2,679.5z"/>
		<path id="leg1" class="st22" d="M1076.5,658.3l-99.7,12.5c-20.2,2.5-38.2,13.7-49.5,30.6L904.8,735l177.2-36.8L1076.5,658.3z"/>
		<path id="highlight" class="st23" d="M827.2,742.4c0,0,24.5-35.1,73.6-39.5s77.1-9.5,77.1-9.5l5.5-13.3c0,0-99.3,3.5-126.3,23.1
			C844.5,712.3,827.2,742.4,827.2,742.4z"/>
	</g>
	<g id="shoes">
		<g id="shoe_2">
			<path class="st10" d="M1116.1,603.7c-19.1,19.1-60.9,95.7-56.2,111.9c2.1,7,7.1,10.9,15.7,13.9c13.2,4.5,32.2-17.9,42.5-31.9
				c16.9-23,39.3-57.4,40.6-71.9C1158.3,582.2,1130.1,589.8,1116.1,603.7z"/>
			<path class="st21" d="M1144.4,593.6c-8.7-2.3-24.4-7.3-37.4,9.8c-13.1,17.1-31,49.3-37,52.3s-27.4,32.8-27.5,40.2
				s17.6,26,22.7,29.2c5.1,3.2,10.6,5,10.6,5s-9.1-11.6-6.8-23.7s28.4-62,38.7-74.6c10.3-12.6,18.3-29.6,37.5-37.3"/>
			<path class="st24" d="M1087.7,634.3c0,0-2.5-1.6-3.8-0.8c-12.4,8.2-6.2,18.9-2.1,23.6"/>
			<path class="st25" d="M1110.9,699.1l-24.6-14.2c-2.4-1.4-3.2-4.4-1.8-6.8l0.8-1.5c1.4-2.4,4.4-3.2,6.8-1.8l24.6,14.2
				c2.4,1.4,3.2,4.4,1.8,6.8l-0.8,1.5C1116.3,699.7,1113.3,700.5,1110.9,699.1z"/>
			<path class="st25" d="M1133.9,656.6l-24.6-14.2c-2.4-1.4-3.2-4.4-1.8-6.8l0.8-1.5c1.4-2.4,4.4-3.2,6.8-1.8l24.6,14.2
				c2.4,1.4,3.2,4.4,1.8,6.8l-0.8,1.5C1139.3,657.2,1136.2,658,1133.9,656.6z"/>
		</g>
		<g id="shoe_1">
			<path class="st10" d="M1011.4,607.4c-14.6,22.4-13.8,111.8-3.4,124.8c4.5,5.7,13.4,6.5,21.9,5.6c13.1-1.4,17.5-29.7,20.9-47.1
				c5.4-28.6,8.9-63.1,6.6-84.1c-1.2-10.7-6.3-17.8-11-20.1C1031.9,579.3,1020.7,593.2,1011.4,607.4z"/>
			<path class="st21" d="M1032.1,581.9c-10.3,0.1-28.3,3.4-33.8,24.9s-4.5,63.1-25,68.2c-6.6,1.6-1.6,38.3,1.8,45.2
				c3.4,6.9,29.6,16.2,36.4,16.9s12.6,1.1,12.6,1.1s-4-1.6-7.4-13.8c-3.4-12.3-6.7-148.3,29.8-137.9
				C1046.5,586.5,1041.5,581.9,1032.1,581.9z"/>
			<path class="st24" d="M990,645.5c0,0-0.5-0.1-1-0.1c0,0-6.4,22.9,6.3,26.3"/>
			<path class="st24" d="M996.2,623.8c0,0-4.1-0.4-5.1,1.4c0,0-4.8,21.1,7.9,24.5"/>
			<path class="st25" d="M1048.6,640.9l-29.1-6.1c-2.7-0.6-4.5-3.5-4-6.5l0.3-1.8c0.5-3,3.1-5,5.8-4.5l29.1,6.1
				c2.7,0.6,4.5,3.5,4,6.5l-0.3,1.8C1053.9,639.4,1051.3,641.4,1048.6,640.9z"/>
			<path class="st25" d="M1043,701.9l-30.4-6.3c-2.8-0.6-4.6-3.6-4.1-6.7l0.3-1.6c0.5-3.1,3.2-5.2,5.9-4.6l30.4,6.3
				c2.8,0.6,4.6,3.6,4.1,6.7l-0.3,1.6C1048.4,700.5,1045.7,702.5,1043,701.9z"/>
		</g>
	</g>
	<g id="arm_with_mug">
		<path id="biceps" class="st26" d="M782.8,698.4l-30.5-32.1C716.4,623,662.5,604,662.5,604s-22.7,70.1,29.8,88.1
			c68.4,23.3,85.7,14.6,89.2,13.9S784.3,702.1,782.8,698.4z"/>
		<g id="forehand_mug">
			<g id="coffee_mug">
				<g>
					<g>
						<path id="SVGID_5_" class="st16" d="M715.6,535.6c14.9-0.2,25.4,3.2,26,9.1c0.6,5.8,5.5,58.7-23,58.7c-18.8,0-17,0-17,0
							s-21,1.9-17.5-55.8C684.6,540.2,697.3,535.8,715.6,535.6z"/>
					</g>

					<g id="coffee_mug_shadows">
						<defs>
							<path id="SVGID_6_" d="M715.6,535.6c14.9-0.2,25.4,3.2,26,9.1c0.6,5.8,5.5,58.7-23,58.7c-18.8,0-17,0-17,0s-21,1.9-17.5-55.8
								C684.6,540.2,697.3,535.8,715.6,535.6z"/>
						</defs>
						<clipPath id="SVGID_8_">
							<use xlink:href="#SVGID_6_"  style="overflow:visible;"/>
						</clipPath>
						<path class="st27" d="M682.5,547.9c0.2,9.1,18.2,11.7,26.8,12c14.5,0.6,24-1.5,25.8-2.9c-0.1,4.5-2.8,41.7-14.2,46.9
							c-11.5,5.2-29.8,2.6-29.8,2.6l-11.7-34.8L682.5,547.9z"/>
                        <clipPath id="SVGID_12_">
							<use xlink:href="#SVGID_6_"  style="overflow:visible;"/>
						</clipPath>
                        <path class="st28" d="M688.4,548.7c0,0-4.5,38.6,8.9,53.9c13.4,15.2,7.3,4.3,7.3,4.3s-10.5-8-9.8-51.6
							C697.2,541.4,688.4,548.7,688.4,548.7z"/>
					</g>
				</g>
				<g id="mug_top">
					<g>
						<ellipse id="SVGID_7_" class="st15" cx="713.4" cy="546.2" rx="24.7" ry="8.6"/>
					</g>
					<g>
						<clipPath id="SVGID_15_">
							<use xlink:href="#SVGID_7_"  style="overflow:visible;"/>
						</clipPath>
						<ellipse id="coffee" class="st29" cx="714.4" cy="553.7" rx="24.7" ry="8.6"/>
					</g>
				</g>
				<path id="handle" class="st30" d="M740.6,553c11.7-1.9,16.2-2.8,15.6,16s-8.7,24.3-23.4,22"/>
				<g id="smoke">
					<path id="smoke1" class="st31" d="M718.8,539.6c-3.3-11,1.2-13.7,2.2-23.5s-6.8-20.7-7.3-21.3c-0.5-0.7,13.8,7,15,14.8
						C729.8,517.4,721.2,523.1,718.8,539.6z"/>
					<path id="smoke2" class="st31" d="M706.7,547.8c-3.3-11,0.4-10.9,1.4-20.7s-2.8-22.8-6.6-24.1c7.5,2.1,11.9,15.6,13,23.4
						C715.7,534.2,709.1,531.3,706.7,547.8z"/>
				</g>

			</g>
			<path id="forehand" class="st26" d="M774.1,596.8c0.6-7.2-6.5-36.4-7.4-43.3s-17.7,1.5-21.2,2.6s-4.8,21.5-2.5,28.9
				s11.2,16.7,11.2,16.7c2.3,18.7-8.3,39.1,2.1,78.4c10.3,39.1,26.2,18.3,26.2,18.3C782.7,690.1,773.5,603.9,774.1,596.8z"/>
		</g>
	</g>
	<g id="body">
		<path class="st32" d="M542.5,614.5c0,0,85.2-26.6,111-15.6c40.9,17.5,109.7,162.6,135.1,163.2c-36.3,8.2-110.3,25.7-159.7,36.3
			c-29.2,6.3-66.8-56.5-66.8-56.5l-15.6-61.3L542.5,614.5z"/>
		<path id="shadow" class="st33" d="M555.7,667.9c0,0,24.4,89.9,110.5,122.5l-62.7,13.4c-45.8-8.3-54.9-53.7-54.9-53.7L555.7,667.9z
			"/>
	</g>
	<g id="arm_biceps">
		<defs>
			<path id="SVGID_16_" d="M558.6,657.1c-0.2-8.8-5.5-47.3-5.5-47.3c-35.9,17-75.4,36.8-56.2,102.3c18.6,63.3,34.5,102.5,60.2,96.2
				l8.5-17.2C576,734.4,558.8,665.9,558.6,657.1z"/>
		</defs>
		<use xlink:href="#SVGID_16_"  style="overflow:visible;fill:#FCCEA4;"/>
		<clipPath id="SVGID_17_">
			<use xlink:href="#SVGID_16_"  style="overflow:visible;"/>
		</clipPath>
		<path id="shadow_biceps" class="st34" d="M565.5,647.7c-10.3,5.6-46.9,13.6-45.6,30.8S525.5,727,530,767c1.7,14.5,10.8,57.3,24.7,61.6
			c10.4,3.2-12.3,2.8-12.3,2.8l-62.1-116.1l16.6-78l57.3-35.6L565.5,647.7z"/>
	</g>
	<g id="shoulder">
		<g>
			<path id="shoulder_base" class="st32" d="M554.6,604.7c-4.2-8.1-47.2,11.1-59.5,45.9c-12.3,34.7-4,51.9-4,51.9s59-24.4,77.1-6
				C575.4,703.9,569.8,634,554.6,604.7z"/>
		</g>
		<g>
			<clipPath id="SVGID_19_">
				<use xlink:href="#shoulder_base"  style="overflow:visible;"/>
			</clipPath>
			<path id="shadow_shoulder" class="st35" d="M566.5,635.9c0,0-41.3-15.5-54.4,14.8c-7.8,18.1-8.1,38.7-8.1,38.7l-24.6,14.1l-0.7-39
				l54.4-68.4l25,3.6L566.5,635.9z"/>
		</g>
	</g>
	<g id="neck">
		<path class="st33" d="M551.7,574.3c0,0-31.2-6.1-31.7,35.8c-0.4,33.1,43.3,24.4,58.8,28.4c65,16.8,81.9,10.1,74-21.4
			c-6.7-26.7,1.9-29.2,1.9-29.2L551.7,574.3z"/>
		<g id="lace2">
			<path class="st36" d="M608.1,636.6c0,0-6.3,12.9-3,26.2s0.7,19.6,0.7,19.6"/>
			<path class="st10" d="M610,677.6c-0.3,3.6-2.2,6.4-4.3,6.3c-2.1-0.1-3.6-3.1-3.3-6.7c0.3-3.6,2.2-6.4,4.3-6.3
				C608.8,671,610.3,674,610,677.6z"/>
			<path class="st37" d="M609.3,683.3c0.3,1.7-1.2,3.3-3.3,3.6c-2.1,0.2-4-1-4.3-2.7s1.2-3.3,3.3-3.6
				C607.1,680.4,609,681.6,609.3,683.3z"/>
		</g>
		<g id="lace">
			<path class="st36" d="M645.5,639.2c0,0,15.1,2.6,15,16.3s3.9,19.2,3.9,19.2"/>
			<path class="st10" d="M659.2,671.1c1.1,3.4,3.6,5.7,5.6,5.1s2.8-3.8,1.7-7.3s-3.6-5.7-5.6-5.1S658.1,667.7,659.2,671.1z"/>
			<path class="st37" d="M661.2,676.5c0.1,1.8,1.9,3,4,2.7s3.7-1.9,3.5-3.7c-0.1-1.8-1.9-3-4-2.7
				C662.7,673.1,661.1,674.7,661.2,676.5z"/>
		</g>
	</g>

	<g id="my-coffee">
					<path stroke="null" id="drop-coffee" d="m700,555c-2.07781,-0.89429 -3.56711,-3.73586 -3.22865,-6.16024c0.21342,-1.52875 4.71609,-10.80935 5.10932,-10.53099c0.12834,0.09085 1.27044,2.25455 2.53799,4.80822c2.03049,4.0907 2.30464,4.85349 2.30464,6.4123c0,3.15963 -2.20768,5.74773 -4.85846,5.69564c-0.77354,-0.0152 -1.61271,-0.11642 -1.86483,-0.22493l0,0zm2.08173,-1.58918c0.06878,-0.40906 -0.09188,-0.60856 -0.49009,-0.60856c-0.90755,0 -2.16647,-1.31658 -2.44773,-2.55983c-0.30003,-1.32622 -1.09554,-1.48394 -1.21304,-0.24051c-0.22638,2.39565 3.76947,5.67725 4.15085,3.4089l0,0z" stroke-width="1.5" fill="#534741"/>
				  <path stroke="#000" id="path-coffee" d="m700.5,550.5c-28.48276,-60 -29.16092,78 -29.5,76.5" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="none"/>
					<path stroke="null" id="spot" d="m673.76281,650.7686c10.28925,4.82635 4.00138,-20.37789 -4.00138,-25.20424c-8.00277,-4.82635 -6.28789,20.37789 4.00138,25.20424z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#000"/>
				</g>

	<g id="head">
		<g id="head_base">
			<g>
				<path id="SVGID_11_" class="st26" d="M533.3,484.3c-11.9-4.7-13.4,9.1-12.6,15.7s8,20.6,23.8,18.2c6.1,12.6,18.8,59.6,13.4,67.8
					c-5.4,8.2,85.3,15.7,85.3,15.7l8.7-62.3c0,0,7.7-0.7,9.2-13.4c0.7-5.8-3.8-9-3.8-9s-1.8-20,11.2-25.6
					c3.4-22.5,6.9-30.4-0.9-44.3c-7.9-14.1-87.5-30.8-87.5-30.8l-26.5,42.3l-23.4,21.6"/>
			</g>
			<g>
				<clipPath id="SVGID_21_">
					<use xlink:href="#SVGID_11_"  style="overflow:visible;"/>
				</clipPath>
				<path id="shadow_head" class="st38" d="M549.8,479.6l53.7-57.5l1.6,12.5l-6.4,37.8c0,0-29.7,14-9.8,58.1
					c8.7,19.4,5.9,63.6,5.9,63.6l-52.3,0.1l-41.3-89.9l4.9-32.6l20.4,4.4L549.8,479.6z"/>
			</g>
		</g>
		<g id="eyes">
			<path class="st39" d="M625.8,501.6c-0.5,3.2-3.1,3.9-6.7,3.4c-3.5-0.5-6.5-2.1-6.1-5.3c0.5-3.2,3.7-5.4,7.2-4.9
				C623.8,495.3,626.3,498.3,625.8,501.6z"/>
			<path class="st39" d="M657.1,506.1c-0.6,3.1-2.6,3.7-4.8,3.3c-2.2-0.4-3.8-1.5-3.2-4.6s3-5.4,5.2-5
				C656.5,500.1,657.7,502.9,657.1,506.1z"/>
		</g>
		<g id="eyebrows">
			<path class="st10" d="M599.8,476.2c0.4,1.9,4.9-2.1,16.3-0.5c9.6,1.4,9.4,2.7,14,5.9c4.6,3.2,8-0.8,7.6-6s-8.2-8.3-21.3-9.6
				C599.7,464.3,598.6,469.9,599.8,476.2z"/>
			<path class="st10" d="M650.2,485.6c0,0-0.5-10.5,11.7-6.5c5.6,1.8,8.1,4,8.1,4c1.6,3.5,1,9.6-3,9.3c-4.1-0.3-0.4-3.6-9-4.2
				C652.3,487.8,650.2,489.9,650.2,485.6z"/>
		</g>
		<g id="hair">
			<g>
				<path id="hair_base" class="st10" d="M536.9,411.1c0,0,2.6,9.3,4.4,7s-3.7-29.2,81-38.9c35.6-4.1,58.2,2.4,78.4,9.3
					c3.2,7.7,16,50.3-30.1,64.7c-11-11.1-26.5-15.5-46.9-17c-22.4-1.6-38.1,5.6-44,31.9c-22,18.7-20.3,23-20.3,23s-6,53.9,26.3,68
					c17.2-24.1,22.1-29.6,39.3-27.8c9.5,6.3,26.9,8.3,26.9,8.3c7.5,6.1,5.6,14.2,5.1,26.8c-0.4,9.4,7.5,25,10.2,35.3
					s-22.4,38.8-63.1,13.1c-31.1-19.7-47.5-34.6-54.1-42.6c0,0-1.5-25.1-2.5-44c-7-22.3-9.7-41.5-9.7-41.5s-4.5-0.8-6.7-2.8
					c-8.4-17.7-5-23.9-7-32.4l6.5,3.5C530.5,454.7,527.6,429.1,536.9,411.1z"/>
			</g>
			<g id="hair_highlight">
				<clipPath id="SVGID_23_">
					<use xlink:href="#hair_base"  style="overflow:visible;"/>
				</clipPath>
				<path class="st40" d="M700.6,388.5c0,0-13.8,57.8-30.1,64.7s47.7,1.7,47.7,1.7L708,388.6L700.6,388.5z"/>
                <clipPath id="SVGID_25_">
					<use xlink:href="#hair_base"  style="overflow:visible;"/>
				</clipPath>
				<path class="st41" d="M649.1,538.4c0,0,8.3,16.2-5.6,30.5c-1.4,1.4,14.3,23.1,8.8,38.6c-5.2,14.8-23.6,23.2-23.6,23.2l53.5-7.4
					l-3.7-61l-22-26.2L649.1,538.4z"/>
			</g>
		</g>
		<path id="mouth" class="st39" d="M644.7,557.9c-0.8-0.6-2.8,0.8-11.1,0.3c-7-0.4-6.3-1.5-10.4-2.6c-4.1-1-5.3,0.3-3.6,2.1
			c1.8,1.8,5.1,4.4,16.5,3.8C647.3,560.8,647.3,560,644.7,557.9z"/>
		  <ellipse ry="8.5" rx="6.5" id="mouth1" cy="562.5" cx="636.5" stroke-width="1.5" fill="#46465A"/>

	</g>
	<g id="forehand_and_paper">
		<g id="paper">
			<path class="st42" d="M757.1,650.6c0.5,0.2,21.6,3.4,22.1,3.6c22.4,9.8,25.3,9.2,25.3,9.2c-34.2,26.7-69.8,78.8-75.4,94.7
				l-77.4-9.9l12.8-19c0,0,34.7-50.6,41.3-57.3l5.3-4c0,0,15-10,21.5-12.1C737.7,654.1,757.1,650.6,757.1,650.6z"/>
			<path class="st19" d="M779.8,654.3c0,0-15.9-6.7-38-2.3c-15.2,3.1-36.7,20.6-36.7,20.6s36.3-29,47.9-8.2
				C759.4,650.9,771.5,653,779.8,654.3z"/>
		</g>
		<path id="hand_paper" class="st26" d="M558.1,809.5c37.4-9.1,62-43.7,73.3-53c6.7-5.5,16-12.6,22.9-18.6c22.6-1,42-6.6,42-6.6
			s6.7-6.7,3.8-12.1c-1.3-2.4,2.3-7.2,3.9-11.3c2.1-5.3-0.3-10.6,3.4-15.6c6.1-8.3-10.9-6.4-31.6,1.2c-20.7,7.5-24.8,21.4-24.8,21.4
			c-59.7,31-77.2,31.7-94.8,50.3c-6.6,7-6,11.7-12.7,24.8C536.8,803.1,544.7,808.8,558.1,809.5z"/>
	</g>
</g>
<g id="ginger_dude">
	<g id="ginger">
		<g id="ginger_head">

			</g>
  				<path id="new-hair" d="m1235.66667,420.66667l41.33333,4.33333l17,-8l107,29c-3.16665,-25.33333 0,-40 3,-75c-4.66667,14.99999 -13.33333,32.66667 -21,40c-9.66667,-14 -9.33333,-28 -14,-42c-2.66667,16 -6.33333,27 -14,39c-8.66667,-12 -16.33333,-18 -20,-36c-2.66667,10 -5.33333,20 -8,30c-10.33333,-11 -15.66667,-25 -19,-39c-3,11 -5,26 -9,33c-8.66667,-11 -13.33333,-22 -17,-36c-1.66667,12.49999 -2.50002,23.33333 -10,34c-7.16665,-10.16668 -11.83332,-20.00002 -13,-36c-2.00001,17.16664 -4.00002,27.83332 -12,38c-8.99998,-10.16667 -12.83333,-22 -17,-34c2.33333,19.66667 5.16666,38.66667 5.66667,58.66667z" stroke-width="1.5" fill="#F8A246"/>
			</g>
			<path id="ginger_head_base" class="st26" d="M1241.1,460.5c0,0-12.4,20.4-10.7,35.7c1.7,15.3,1.1,45.5,1.1,45.5s-14.1,19.2-13.6,22.1
				c0.6,2.8,9.1,11.9,9.1,11.9s4.2,37.2,7,40.6c2.8,3.4,24.1,13.2,24.1,13.2l1.1,21.5c0,0,51.2,17.3,89.4-3.4
				c-0.6-22.7,0-135.3,0-135.3l-76.4-25.5L1241.1,460.5z"/>
			<path id="eye" class="st39" d="M1232.6,523.1c2.4,0,3.2,3.1,3.2,7.4c0,4.3-0.8,8.3-3.3,8.3s-4.4-3.5-4.4-7.9
				C1228.2,526.6,1230.2,523.1,1232.6,523.1z"/>
			<g id="ginger_hair">
				<path class="st43" d="M1380.7,576l10.6-70.5l-0.8-66l-93.1-20.1c0,0-8.5,10.6-17,11.6c-7.8,1-39.6-8.8-44.6-10.3
					c-1.5,9.3-0.3,21.5,1.2,37.4c0.8,8.6,23.2,20.1,23.2,20.1l-10.8,51.2c29.8-8,20.1,20.3,9.6,40.1c0.5,51.5,40.4,53.7,53.4,54.3
					c13.3,0.8,44.7-2.4,44.7-2.4C1357.6,615.7,1379.5,583.5,1380.7,576z"/>
				<path id="ginger_hair_highlight" class="st22" d="M1280.4,431c8.5-1.1,17.5-9.6,17.5-9.6s76.2,34.6,83.8,27c3.9,24.3-3.5,134.1-3.5,134.1
					c13.6-22.7,27.5-126.2,27.5-126.2s-6.7-6.9-4.1-15.2c2.5-8.3-20.8-25.2-20.8-25.2l-6.4,6.9c-5.3,7.5-97.3-21.8-97.3-21.8
					s-3.8,12.2-7.1,14.5c-7,4.8-24.6,3.3-24.6,3.3s-9.5,0.2-9.7,1.9C1240.8,422.3,1272.6,432,1280.4,431z"/>
			</g>
			<path id="ginger_eyebrow" class="st43" d="M1242.5,502.6l-10.8-4.3c-2.6-1-3.9-4-2.8-6.6l0,0c1-2.6,0.6-5.2,3.2-4.2l14.2,5.6
				c2.6,1,2.9,6.5,1.9,9l0,0C1247.1,504.8,1245,503.6,1242.5,502.6z"/>
		</g>

		  <g id="drops">
			  <path stroke="null" id="drop1" d="m1280.1787,630.29485c-2.07781,-0.89429 -3.56711,-3.73586 -3.22865,-6.16024c0.21342,-1.52875 4.71609,-10.80935 5.10932,-10.53099c0.12834,0.09085 1.27044,2.25455 2.53799,4.80822c2.03049,4.0907 2.30464,4.85349 2.30464,6.4123c0,3.15963 -2.20768,5.74773 -4.85846,5.69564c-0.77354,-0.0152 -1.61271,-0.11642 -1.86483,-0.22493l0,0zm2.08173,-1.58918c0.06878,-0.40906 -0.09188,-0.60856 -0.49009,-0.60856c-0.90755,0 -2.16647,-1.31658 -2.44773,-2.55983c-0.30003,-1.32622 -1.09554,-1.48394 -1.21304,-0.24051c-0.22638,2.39565 3.76947,5.67725 4.15085,3.4089l0,0z" stroke-width="1.5" fill="#aaffff"/>
 			  <path stroke="null" id="drop2" d="m1304.1787,636.29485c-2.07781,-0.89429 -3.56711,-3.73586 -3.22865,-6.16024c0.21342,-1.52875 4.71609,-10.80935 5.10932,-10.53099c0.12834,0.09085 1.27044,2.25455 2.53799,4.80822c2.03049,4.0907 2.30464,4.85349 2.30464,6.4123c0,3.15963 -2.20768,5.74773 -4.85846,5.69564c-0.77354,-0.0152 -1.61271,-0.11642 -1.86483,-0.22493l0,0zm2.08173,-1.58918c0.06878,-0.40906 -0.09188,-0.60856 -0.49009,-0.60856c-0.90755,0 -2.16647,-1.31658 -2.44773,-2.55983c-0.30003,-1.32622 -1.09554,-1.48394 -1.21304,-0.24051c-0.22638,2.39565 3.76947,5.67725 4.15085,3.4089l0,0z" stroke-width="1.5" fill="#aaffff"/>
			  <path stroke="null" id="drop3" d="m1322.1787,635.29485c-2.07781,-0.89429 -3.56711,-3.73586 -3.22865,-6.16024c0.21342,-1.52875 4.71609,-10.80935 5.10932,-10.53099c0.12834,0.09085 1.27044,2.25455 2.53799,4.80822c2.03049,4.0907 2.30464,4.85349 2.30464,6.4123c0,3.15963 -2.20768,5.74773 -4.85846,5.69564c-0.77354,-0.0152 -1.61271,-0.11642 -1.86483,-0.22493l0,0zm2.08173,-1.58918c0.06878,-0.40906 -0.09188,-0.60856 -0.49009,-0.60856c-0.90755,0 -2.16647,-1.31658 -2.44773,-2.55983c-0.30003,-1.32622 -1.09554,-1.48394 -1.21304,-0.24051c-0.22638,2.39565 3.76947,5.67725 4.15085,3.4089l0,0z" stroke-width="1.5" fill="#aaffff"/>
		  </g>

		<g id="suit">
			<path id="leg" class="st44" d="M1132.7,905.5l61.9-6.2l92.1,27.2l-164.5,103.8l-55.2-1c0,0,1.1-11.9,33.6-99.6
				C1103.7,921.2,1123.6,906.4,1132.7,905.5z"/>
			<path id="base" class="st25" d="M1409.5,870.7l8.9-187.9c0,0-44.9-35.9-76.2-35.9l-82.9,4c-8.8,1.9-14.5,3.3-32.2,10.6
				c-8.6,3.6-48.3,25.6-48,34.9l17.5,193.8l5.6,74.3c0,31.3,86.1,66.8,117.4,66.8l4.2-8.8l43.8,12.1c0,0,22.7-31.4,22.7-62.7
				l-12.6-81.8l22.9,1.2L1409.5,870.7z"/>
			<path id="white_collar" class="st42" d="M1359.2,651.7l-105,13.6c0,0-1.8-22,2.8-26.6c51.2,19.1,91.2-2.3,91.2-2.3
				L1359.2,651.7z"/>
			<path id="collar" class="st10" d="M1248.6,649.7c-6.3,2-19,7.8-27.7,11.9c-4.3,2-4,8.3,0.5,9.9c9.9,3.5,24,5.6,25.9,6.2
				c45.2,15.2,105-2.3,127.8-10.2c4.1-1.4,5-6.8,1.6-9.5l-18.4-14.3c-0.8-0.7-2-0.7-2.9-0.2c-9.2,5-58.7,29.7-104.7,6.4
				C1250,649.6,1249.2,649.5,1248.6,649.7z"/>
			<polygon id="back_shadow" class="st44" points="1328.2,916.8 1323.7,990.8 1340.3,994.5"/>
			<g id="arm">
				<path id="hand" class="st26" d="M1100.5,800.9c-25.7-9.8-49.5-5.6-64.4,12s-9.5,25.1-2.6,21.3c6.9-3.7,16.4-9.2,16.4-9.2
					l27.8,24.9l37.7-30.4L1100.5,800.9z"/>
				<path id="white_shirt" class="st42" d="M1119.6,816.3c-4.3-6-12.1-12.8-12.1-12.8s-51.1,7.2-37.8,44.6
					c12.8,18.9,30.2,24.9,30.2,24.9L1119.6,816.3z"/>
				<path id="suit_arm" class="st25" d="M1247.5,856.6l-127-47.9c0,0-45.2,2.1-38.9,54c14.8,31.2,167.1,53.4,167.1,53.4L1247.5,856.6z"/>
				<g id="buttons">
					<circle class="st39" cx="1096.4" cy="857.1" r="5.5"/>
					<circle class="st39" cx="1118" cy="868.2" r="5.5"/>
				</g>
			</g>
				<polygon id="arm_shadow" class="st44" points="1242,745.6 1248.6,916.1 1260.2,907.4"/>
			</g>
		</g>
</g>
<g id="black_armchair">
	<path id="black_armchair_highlight" class="st21" d="M1505.6,1040.9L1736.2,515c0,0-9.8-11.8-89.3-12.5c-173.1-1.6-266.6,417-293.7,447.3
		c-70.6,79.2-223.3-117.4-263.7,78.4"/>
	<path id="dark" class="st44" d="M1662.6,544.7c-173.1,0-287.7,380.6-312.3,413c-73.5,96.8-244.5-108.4-274.1,71.6l429.4,11.6
		l212.2-486.7C1717.8,554.3,1697.3,544.7,1662.6,544.7z"/>
</g>

		<g id="fly" style="display:inherit;">
			<path id="wing_2" class="st9" d="M299.6,388.5c0,0,5-19.3-11.8-26.2C271,355.5,288.3,385.4,299.6,388.5z"/>
			<ellipse id="fly_base" class="st45" cx="299.5" cy="388.5" rx="10.5" ry="9.9"/>
			<ellipse id="fly_head" class="st45" cx="310" cy="388.5" rx="5" ry="7"/>
			<path id="wing_1" class="st9" d="M303,388.5c0,0-5-19.3,11.8-26.2C331.6,355.5,314.4,385.4,303,388.5z"/>
			<g id="fly_legs">
				<line class="st46" x1="305.1" y1="394.5" x2="307.8" y2="401.7"/>
				<line class="st46" x1="302" y1="396.6" x2="302.9" y2="404.4"/>
				<line class="st46" x1="297.9" y1="396.8" x2="297.5" y2="405.4"/>
				<line class="st46" x1="294.3" y1="395.8" x2="293.2" y2="403.3"/>
			</g>
		</g>
	<g>
		<ellipse stroke="null" ry="40" rx="40" id="sun" cy="300" cx="1500" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#F7CD45" onmouseover="setTimeout(easterEgg, 7000)"/>
	</g>
	<path stroke="null" transform="rotate(-19.693361282348633 916.3942871093752,715.0756835937502) " id="tune1" d="m908.64431,731.6515c-1.70146,-0.24216 -3.28184,-1.55929 -2.96086,-3.09683c0.16245,-1.6879 1.75366,-3.04638 3.35465,-3.94143c2.13071,-1.22307 5.044,-1.67742 7.39209,-0.62254c0.13758,-8.50808 0.05917,-17.01829 0.08001,-25.52733c1.48072,-0.3023 1.00196,1.33232 1.33825,2.08825c0.3209,2.22287 2.08912,3.96707 3.84919,5.52456c2.18365,1.95769 4.50237,4.03344 5.21213,6.7457c0.77504,3.14681 -0.46399,6.36603 -2.07193,9.18617c-0.11644,0.90383 -2.08268,2.21146 -1.14589,0.57819c1.57739,-2.79398 2.88051,-6.01172 1.80384,-9.10562c-1.0253,-3.08713 -4.22108,-5.66534 -8.02543,-6.12764c-0.02459,6.5187 0.05987,13.03864 -0.09016,19.5563c-0.37401,1.91987 -2.3517,3.3444 -4.33497,4.15782c-1.36756,0.50205 -2.91104,0.80581 -4.40093,0.58438l0,0z" stroke-width="1.5" fill="#000"/>
  	<path stroke="null" transform="rotate(0.09539549797773361 968.3942871092447,717.0756835937208) " id="tune2" d="m960.64431,733.6515c-1.70146,-0.24216 -3.28185,-1.55929 -2.96087,-3.09683c0.16246,-1.6879 1.75366,-3.04638 3.35466,-3.94143c2.13071,-1.22307 5.044,-1.67742 7.39209,-0.62254c0.13758,-8.50808 0.05917,-17.01829 0.08001,-25.52733c1.48072,-0.30231 1.00196,1.33231 1.33825,2.08825c0.3209,2.22287 2.08912,3.96708 3.84919,5.52457c2.18365,1.95769 4.50237,4.03344 5.21213,6.7457c0.77505,3.14681 -0.46399,6.36602 -2.07192,9.18617c-0.11644,0.90383 -2.08268,2.21146 -1.14589,0.57819c1.57738,-2.79398 2.8805,-6.01172 1.80384,-9.10562c-1.0253,-3.08713 -4.22108,-5.66534 -8.02543,-6.12764c-0.02459,6.51871 0.05987,13.03864 -0.09017,19.5563c-0.37401,1.91988 -2.35169,3.34441 -4.33496,4.15783c-1.36756,0.50205 -2.91104,0.80581 -4.40093,0.58438l0,0z" stroke-width="1.5" fill="#000"/>
  	<path stroke="null" transform="rotate(26.30997085571289 1022.3942871093751,725.0756835937499) " id="tune3" d="m1014.64431,741.6515c-1.70146,-0.24216 -3.28185,-1.55929 -2.96087,-3.09683c0.16246,-1.6879 1.75366,-3.04638 3.35466,-3.94143c2.13071,-1.22307 5.044,-1.67742 7.39209,-0.62254c0.13758,-8.50808 0.05917,-17.01829 0.08001,-25.52733c1.48072,-0.30231 1.00196,1.33231 1.33825,2.08825c0.3209,2.22287 2.08912,3.96708 3.84919,5.52457c2.18365,1.95769 4.50237,4.03344 5.21213,6.7457c0.77505,3.14681 -0.46399,6.36602 -2.07192,9.18617c-0.11644,0.90383 -2.08268,2.21146 -1.14589,0.57819c1.57738,-2.79398 2.8805,-6.01172 1.80384,-9.10562c-1.0253,-3.08713 -4.22108,-5.66534 -8.02543,-6.12764c-0.02459,6.51871 0.05987,13.03864 -0.09017,19.5563c-0.37401,1.91988 -2.35169,3.34441 -4.33496,4.15783c-1.36756,0.50205 -2.91104,0.80581 -4.40093,0.58438l0,0z" stroke-width="1.5" fill="#000"/>

	<g id="text">
		<path stroke="#b2b2b2" id="svg_82" d="m915.21185,254.33206c-113.77166,0 -206.00057,44.77319 -206.00057,100.00198c0,18.87328 10.90338,36.50455 29.66508,51.55968l-29.66508,42.09588l82.59108,-13.72558c34.41666,12.54451 77.05924,20.06857 123.40949,20.06857c113.77177,0 206.00063,-44.77323 206.00063,-99.99856c0,-55.22879 -92.22885,-100.00198 -206.00063,-100.00198l0,0.00001z" stroke-width="2" fill="#ffffff"/>
		<text stroke="null" font-style="normal" xml:space="preserve" text-anchor="start" font-family="Arial, sans-serif" font-size="35" id="svg_83" y="316.83269" x="860.48442" stroke-opacity="null" stroke-width="0" fill="#4c4c4c">Relax</text>
	  	<text stroke="null" font-style="normal" xml:space="preserve" text-anchor="start" font-family="Arial, sans-serif" font-size="35" id="svg_84" y="396.8353" x="747.92665" stroke-opacity="null" stroke-width="0" fill="#4c4c4c">welcome to our team!</text>
	  	<text stroke="null" font-style="normal" xml:space="preserve" text-anchor="start" font-family="Arial, sans-serif" font-size="35" id="svg_85" y="356.84395" x="876.02888" stroke-opacity="null" stroke-width="0" fill="#4c4c4c">and</text>
	</g>

	<style type="text/css">
	.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;
    }
</style>
</svg>

</body>
</html>
            
          
!
            
              /* interviewer */

#head {
    animation: head-moving 10s;
    -webkit-animation: head-moving 10s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes head-moving {
    0%, 100% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(5deg);
    }
    70% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-8deg);
    }
    80% {
        transform: rotate(10deg);
    }
}

@-webkit-keyframes head-moving {
    0%, 100% {
        -webkit-transform: rotate(0deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
    }
    70% {
        -webkit-transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(-8deg);
    }
    80% {
        -webkit-transform: rotate(10deg);
    }
}

#interviewer_shadow {
    transform-origin: 100% 100%;
    animation: shadow-moving 10s;
    -webkit-animation: shadow-moving 10s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
}

@keyframes shadow-moving {
    0%, 100% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(-2deg);
    }
    70% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(3deg);
    }
    80% {
        transform: rotate(-5deg);
    }
}
@-webkit-keyframes shadow-moving {
    0%, 100% {
        -webkit-transform: rotate(0deg);
    }
    60% {
        -webkit-transform: rotate(-2deg);
    }
    70% {
        -webkit-transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(3deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
    }
}

#shoe_2 {
    animation: foot-moving 10s;
    -webkit-animation: foot-moving 10s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes foot-moving {
    0%, 20%, 40%, 70%, 100% {
        transform: rotate(0deg);
    }
    10%, 30%, 50% {
        transform: rotate(7deg);
    }
}

@-webkit-keyframes foot-moving {
    0%, 20%, 40%, 70%, 100% {
        -webkit-transform: rotate(0deg);
    }
    10%, 30%, 50% {
        -webkit-transform: rotate(7deg);
    }
}

#eyebrows {
    animation: eyebroes-moving 6s;
    -webkit-animation: eyebroes-moving 6s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes eyebroes-moving {
    0%, 25%, 75%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -5px);
    }
}

@-webkit-keyframes eyebroes-moving {
    0%, 25%, 75%, 100% {
        -webkit-transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(0, -5px);
    }
}

#forehand_mug {
    animation: mug-move 10s;
    -webkit-animation: mug-move 10s;
    -moz-animation: mug-move 10s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes mug-move {
    0%, 20%, 40%, 60%, 100% {
        transform: rotate(0deg);
    }
    10%, 50% {
        transform: rotate(5deg);
    }
    30%, 70% {
        transform: rotate(-5deg);
    }
    72% {
        transform: rotate(10deg);
    }
}

@-webkit-keyframes mug-move {
    0%, 20%, 40%, 60%, 100% {
        -webkit-transform: rotate(0deg);
    }
    10%, 50% {
        -webkit-transform: rotate(5deg);
    }
    30%, 70% {
        -webkit-transform: rotate(-5deg);
    }
    72% {
        -webkit-transform: rotate(10deg);
    }
}

#forehand_and_paper {
    animation: right-hand 10s;
    -webkit-animation: right-hand 10s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transform-origin: 10% 40%;
    -webkit-transform-origin: 10% 40%;
}

@keyframes right-hand {
    0%, 70%, 85%, 100% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(4deg);
    }
    70% {
        transform: rotate(-2deg);
    }
}

@-webkit-keyframes right-hand {
    0%, 70%, 85%, 100% {
        -webkit-transform: rotate(0deg);
    }
    75% {
        -webkit-transform: rotate(4deg);
    }
    70% {
        -webkit-transform: rotate(-2deg);
    }
}

#mouth {
    animation: mouth-path 10s linear 1;
    -webkit-animation: mouth-path 10s linear 1;
}

@keyframes mouth-path {
    70%, 80% {
        opacity: 0;
    }
    0%, 69%, 81% {
        opacity: 1;
    }
}

@-webkit-keyframes mouth-path {
    70%, 80% {
        opacity: 0;
    }
    0%, 69%, 81% {
        opacity: 1;
    }
}

#mouth1 {
    animation: mouth-path1 10s linear 1;
    -webkit-animation: mouth-path1 10s linear 1;
    opacity: 0;
}

@keyframes mouth-path1 {
    70%, 80% {
        opacity: 1;
    }
    0%, 69%, 81% {
        opacity: 0;
    }
}

@-webkit-keyframes mouth-path1 {
    70%, 80% {
        opacity: 1;
    }
    0%, 69%, 81% {
        opacity: 0;
    }
}

/* ginger */

#leg {
    animation: move-leg 0.1s;
    -webkit-animation: move-leg 0.1s;
    animation-iteration-count: 110;
    -webkit-animation-iteration-count: 110;
}

@keyframes move-leg {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(2px, 0);
    }
}

@-webkit-keyframes move-leg {
    0%, 100% {
        -webkit-transform: translate(0, 0);
    }
    50% {
        -webkit-transform: translate(2px, 0);
    }
}

#drops > * {
    animation: drop-fall 3s;
    -webkit-animation: drop-fall 3s;
    animation-iteration-count: 4;
    -webkit-animation-iteration-count: 4;
    opacity: 0;
}

#drop1 {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}

#drop3 {
    animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}

@keyframes drop-fall {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0, 20px);
        opacity: 0;
    }
}

@-webkit-keyframes drop-fall {
    0%, 100% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
}

#new-hair {
    transform: scaleY(0.1) scaleX(0.5);
    -webkit-transform: scaleY(0.1) scaleX(0.5);
    animation: hair-rise 10s ease-out 1;
    -webkit-animation: hair-rise 10s ease-out 1;
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
}

@keyframes hair-rise {
    70%, 85% {
        transform: scaleY(0.1) scaleX(0.5);;
    }
    75%, 80% {
        transform: scaleY(1) scaleX(1);;
    }
}

@-webkit-keyframes hair-rise {
    70%, 85% {
        -webkit-transform: scaleY(0.1) scaleX(0.5);;
    }
    75%, 80% {
        -webkit-transform: scaleY(1) scaleX(1);;
    }
}

#ginger_dude {
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
    animation: ginger-head 10s ease-out 1;
    -webkit-animation: ginger-head 10s ease-out 1;
}

@keyframes ginger-head {
    70%, 85% {
        transform: rotate(0);
    }
    75%, 80% {
        transform: rotate(10deg);
    }
}

@-webkit-keyframes ginger-head {
    70%, 85% {
        -webkit-transform: rotate(0);
    }
    75%, 80% {
        -webkit-transform: rotate(10deg);
    }
}

/* clock */

#clock_hand {
    animation: clock 60s;
    -webkit-animation: clock 60s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes clock {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes clock {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

/* fly */

#wing_1, #wing_2 {
    animation: fly-wings 0.1s;
    -webkit-animation: fly-wings 0.1s;
    animation-iteration-count: 20;
    -webkit-animation-iteration-count: 20;
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
}

#wing_1 {
    transform-origin: 16% 100%;
    -webkit-transform-origin: 16% 100%;
}

#wing_2 {
    transform-origin: 16% 70%;
    -webkit-transform-origin: 16% 70%;
}

@keyframes fly-wings {
    0%, 100% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(90deg);
    }
}

@-webkit-keyframes fly-wings {
    0%, 100% {
        -webkit-transform: rotate(0);
    }
    50% {
        -webkit-transform: rotate(90deg);
    }
}

#fly {
    /*
    offset-path: path('m100,200c0,-27 30,-35 58,-37c28,-2 257,76 300,74c43,-2 144,-19 142,-47c-2,-28 -44,-36 -85,-38c-41,-2 -302,81 -342,77c-40,-4 -73,-2 -73,-29z');
    offset-distance: path('m100,200c0,-27 30,-35 58,-37c28,-2 257,76 300,74c43,-2 144,-19 142,-47c-2,-28 -44,-36 -85,-38c-41,-2 -302,81 -342,77c-40,-4 -73,-2 -73,-29z');
    */
    animation: fly-move 10s ease 1;
    -webkit-animation: fly-move 10s ease 1;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    transform: translate(132px, 52px);
    -webkit-transform: translate(132px, 52px);
}

@keyframes fly-move {
    0%, 70%, 88%, 100% {
        transform: translate(132px, 52px);
    }
    70.5%, 71%, 84% {
        transform: translate(100px, 20px);
    }
}

@-webkit-keyframes fly-move {
    0%, 70%, 88%, 100% {
        -webkit-transform: translate(132px, 52px);
    }
    70.5%, 71%, 84% {
        -webkit-transform: translate(100px, 20px);
    }
}

/* eyes */

#eyes > .st39 {
    animation: blink-eye 4s;
    -webkit-animation: blink-eye 4s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

#eye {
    animation: blink-eye 3.5s;
    -webkit-animation: blink-eye 3.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@keyframes blink-eye {
    0%, 24%, 26%, 50%, 100% {
        fill: #424254;
    }
    25% {
        fill: #f9b175;
    }
}

@-webkit-keyframes blink-eye {
    0%, 24%, 26%, 50%, 100% {
        fill: #424254;
    }
    25% {
        fill: #f9b175;
    }
}

/* coffee */

#smoke1 {
    animation: smoking 10s;
    -webkit-animation: smoking 10s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

#smoke2 {
    animation: smoking 10s;
    -webkit-animation: smoking 10s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@keyframes smoking {
    0%, 31% {
        opacity: 0;
        transform: translate(0, 0);
    }
    10%, 40% {
        opacity: 1;
    }
    30%, 50% {
        opacity: 0;
        transform: translate(0, -20px);
    }
    60%, 100% {
        opacity: 0;
    }
}

@-webkit-keyframes smoking {
    0%, 31% {
        opacity: 0;
        -webkit-transform: translate(0, 0);
    }
    10%, 40% {
        opacity: 1;
    }
    30%, 50% {
        opacity: 0;
        -webkit-transform: translate(0, -20px);
    }
    60%, 100% {
        opacity: 0;
    }
}

/* sun */

#sun {
    animation: sunshine 10s ease-out infinite;
    -webkit-animation: sunshine 10s ease-out infinite;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
}

@keyframes sunshine {
    0%, 100% {
        transform: scale(1.3);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

@-webkit-keyframes sunshine {
    0%, 100% {
        -webkit-transform: scale(1.3);
        opacity: 0.5;
    }
    50% {
        -webkit-transform: scale(1.5);
        opacity: 1;
    }
}

#drop-coffee {
    animation: coffee-action 10s linear 1;
    -webkit-animation: coffee-action 10s linear 1;
    offset-path: path('m700.5,550.5c-28.48276,-60 -29.16092,78 -29.5,76.5');
    offset-distance: path('m700.5,550.5c-28.48276,-60 -29.16092,78 -29.5,76.5');
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    opacity: 0;
}

#spot {
    animation: coffee-splash 10s linear 1;
    -webkit-animation: coffee-splash 10s linear 1;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    opacity: 0;
}

@keyframes coffee-splash {
    0%, 100% {
        opacity: 0;
    }
    75% {
        opacity: 0;
        transform: scale(1);
    }
    76% {
        opacity: 0.5;
    }
    100% {
        transform: scale(2) translate(2px, 2px);
    }
}

@-webkit-keyframes coffee-splash {
    0%, 100% {
        opacity: 0;
    }
    75% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    76% {
        opacity: 0.5;
    }
    100% {
        -webkit-transform: scale(2) translate(2px, 2px);
    }
}

@keyframes coffee-action {
    0%, 100% {
        opacity: 0;
    }
    70% {
        opacity: 0;
        offset-path: 0;
        offset-distance: 0;
        transform: rotate(-55deg);
    }
    71% {
        opacity: 1;

    }
    75% {
        opacity: 1;
        offset-path: 100%;
        offset-distance: 100%;
        transform: rotate(-65deg);
    }
    75.1% {
        opacity: 0;
    }
}

@-webkit-keyframes coffee-action {
    0%, 100% {
        opacity: 0;
    }
    70% {
        opacity: 0;
        offset-path: 0;
        offset-distance: 0;
        -webkit-transform: rotate(-55deg);
    }
    71% {
        opacity: 1;

    }
    75% {
        opacity: 1;
        offset-path: 100%;
        offset-distance: 100%;
        -webkit-transform: rotate(-65deg);
    }
    75.1% {
        opacity: 0;
    }
}

/* phone */

#phone {
    animation: phone-ring 10s linear 1;
    -webkit-animation: phone-ring 10s linear 1;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

#phone > .st10 {
    animation: phone-blink 10s linear 1;
    -webkit-animation: phone-blink 10s linear 1;
}

@keyframes phone-ring {
    0%, 65%, 67%, 69%, 71%, 73%, 75%, 77% {
        transform: rotate(0deg);
    }
    66%, 70%, 74% {
        transform: rotate(-5deg);
    }
    68%, 72%, 76% {
        transform: rotate(5deg);
    }
}

@-webkit-keyframes phone-ring {
    0%, 65%, 67%, 69%, 71%, 73%, 75%, 77% {
        -webkit-transform: rotate(0deg);
    }
    66%, 70%, 74% {
        -webkit-transform: rotate(-5deg);
    }
    68%, 72%, 76% {
        -webkit-transform: rotate(5deg);
    }
}

@keyframes phone-blink {
    0%, 65%, 80% {
        opacity: 1;
    }
    66%, 79% {
        opacity: 0.1;
    }
}

@-webkit-keyframes phone-blink {
    0%, 65%, 80% {
        opacity: 1;
    }
    66%, 79% {
        opacity: 0.1;
    }
}

#tune1  {
    animation: phone-sound1 10s ease 1;
    -webkit-animation: phone-sound1 10s ease 1;
    opacity: 0;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
}

#tune2  {
    animation: phone-sound2 10s ease 1;
    -webkit-animation: phone-sound2 10s ease 1;
    opacity: 0;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
}

#tune3  {
    animation: phone-sound3 10s ease 1;
    -webkit-animation: phone-sound3 10s ease 1;
    opacity: 0;
    transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
}

@keyframes phone-sound1 {
    65% {
        opacity: 0;
        transform: rotate(0) translate(0, 0) scale(0.3);
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        transform: rotate(-15deg) translate(0, -10px) scale(1.5);
    }
    100% {
        transform: rotate(-15deg) translate(0, -10px) scale(0.7);
    }
}

@keyframes phone-sound2 {
    65% {
        opacity: 0;
        transform: rotate(0) translate(0, 0) scale(0.3);
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        transform: rotate(10deg) translate(0, -20px) scale(1.5);
    }
    100% {
        transform: rotate(10deg) translate(0, -20px) scale(0.7);
    }
}

@keyframes phone-sound3 {
    65% {
        opacity: 0;
        transform: rotate(0) translate(0, 0) scale(0.3);
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        transform: rotate(-15deg) translate(0, -10px) scale(1.5);
    }
    100% {
        transform: rotate(-15deg) translate(0, -10px) scale(0.7);
    }
}

@-webkit-keyframes phone-sound1 {
    65% {
        opacity: 0;
        -webkit-transform: rotate(0) translate(0, 0) scale(0.3);
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        -webkit-transform: rotate(-15deg) translate(0, -10px) scale(1.5);
    }
    100% {
        -webkit-transform: rotate(-15deg) translate(0, -10px) scale(0.7);
    }
}

@-webkit-keyframes phone-sound2 {
    65% {
        opacity: 0;
        -webkit-transform: rotate(0) translate(0, 0) scale(0.3);
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        -webkit-transform: rotate(10deg) translate(0, -20px) scale(1.5);
    }
    100% {
        -webkit-transform: rotate(10deg) translate(0, -20px) scale(0.7);
    }
}

@-webkit-keyframes phone-sound3 {
    65% {
        opacity: 0;
        -webkit-transform: rotate(0) translate(0, 0) scale(0.3);
    }
    68% {
        opacity: 1;
    }
    75% {
        opacity: 0;
        -webkit-transform: rotate(-15deg) translate(0, -10px) scale(1.5);
    }
    100% {
        -webkit-transform: rotate(-15deg) translate(0, -10px) scale(0.7);
    }
}

/* text*/

#text {
    animation: cloud-text 3s linear 1;
    -webkit-animation: cloud-text 3s linear 1;
    opacity: 0;
    animation-delay: 10s;
    -webkit-animation-delay: 10s;
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
}

@keyframes cloud-text {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    5%, 95% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes cloud-text {
    0%, 100% {
        opacity: 0;
        -webkit-transform: scale(0.8);
    }
    5%, 90% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

            
          
!
999px
Loading ..................

Console