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.

            
              <h1>Animated by <a class="blue-link" href="http://sowaprogramuje.pl/">SowaProgramuje.pl</a><h1>

<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: none;">
		<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"/>
	</g>
	<g id="callendar">
		<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" id="screen" 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="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 id="eye1"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 id="eye2" 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 id="eyebrow1" 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 id="eyebrow2" 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"/>
	</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">
			<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="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">
	<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>
<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>
<h2>Graphic design: <a class="violet-link" href="http://kodu.je/">Kodu.je</a><h2>
            
          
!
            
              /* This animation is not working properly on Firefox yet. The transform-origin property with percentage units in not accepted in this browser */

@import url('https://fonts.googleapis.com/css?family=Lato');

body {
  font-family: Lato;
  margin: 50px;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 15px;
}

.blue-link {
    color: #2eb2ff;
    text-decoration: none;
}

.violet-link {
    color: #727BAB;
    text-decoration: none;
}

#smoke1, 
#smoke2,
#red_armchair_back,
#red_armchair_highlight,
#interviewer_shadow,
#head,
.forehand_and_paper, 
.ginger_head,
.shoe_1,
#wing_2, 
#wing_1 {
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%; 
}

.eye1, 
.eye2, 
.eyebrow1,
.eyebrow2, 
.mouth,
#fly {
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
}

#smoke1 {
    -webkit-animation: 5s ease-in infinite smoke1_move;
            animation: 5s ease-in infinite smoke1_move;
}

#smoke2 {
    -webkit-animation: 5s ease-out 1s infinite smoke2_move;
            animation: 5s ease-out 1s infinite smoke2_move;
}

#red_armchair_back, 
#red_armchair_highlight, 
#interviewer_shadow { 
    -webkit-animation: 5s ease-in infinite armchair_move; 
            animation: 5s ease-in infinite armchair_move;
}

#head {
    -webkit-animation: 5s ease-in infinite head_move;
            animation: 5s ease-in infinite head_move;
}

.forehand_and_paper {
    -webkit-animation: 5s ease-in 1 hand_and_paper_move;
            animation: 5s ease-in 1 hand_and_paper_move;
}

.eyes 
 {
    -webkit-animation: 5s ease-in 1 eye_move;
            animation: 5s ease-in 1 eye_move;
}

.eyebrows {
    -webkit-animation: 5s ease-in 1 eyebrow_move;
            animation: 5s ease-in 1 eyebrow_move;
}

.ginger_head {
    -webkit-animation: 0.6s ease-out 3 ginger-guy_head_move;
            animation: 0.6s ease-out 3 ginger-guy_head_move;
}

.mouth {
    -webkit-animation: 0.6s cubic-bezier(.47,.27,0,.87) infinite mouth_move;
            animation: 0.6s cubic-bezier(.47,.27,0,.87) infinite mouth_move;
}

.shoe_1 {
    -webkit-animation: 0.7s ease-in 3 shoe1_move;
            animation: 0.7s ease-in 3 shoe1_move;
}

#fly {
    -webkit-animation: 2s ease-out infinite fly_move;
            animation: 2s ease-out infinite fly_move;
}

#wing_2, 
#wing_1 {
    -webkit-animation: 0.1s linear infinite wing_move;
            animation: 0.1s linear infinite wing_move;
}

@-webkit-keyframes smoke1_move {
    50%  {
      opacity: 0; 
      -webkit-transform: translateY(-10px); 
      transform: translateY(-10px)
    }
  
    75% {
      opacity: 0; 
      -webkit-transform: translateY(0px); 
      transform: translateY(0px)
    }
}

@keyframes smoke1_move {
    50%  {
      opacity: 0; 
      -webkit-transform: translateY(-10px); 
      transform: translateY(-10px);
    }
  
    75% { 
      opacity: 0; 
      -webkit-transform: translateY(0px); 
      transform: translateY(0px)
  }
}

@-webkit-keyframes smoke2_move{
    50%  {
      opacity: 0; 
      -webkit-transform: translateY(-10px); 
      transform: translateY(-10px)
    }
  
    75% {
      opacity: 0; 
      -webkit-transform: translateY(0px); 
      transform: translateY(0px)
    }
}

@keyframes smoke2_move {
    50%  {
      opacity: 0; 
      -webkit-transform: translateY(-10px); 
      transform: translateY(-10px)
    }
  
    75% {
      opacity: 0; 
      -webkit-transform: translateY(0px); 
      transform: translateY(0px)
    }
}

@-webkit-keyframes armchair_move {
    50%  {
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg);
    }
  
    75%  {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
}

@keyframes armchair_move {
    50%  {
      -webkit-transform: rotate(2deg);
      transform: rotate(2deg);
    }
    75%  {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
}

@-webkit-keyframes head_move {
    50%  {
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
    75%  {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
}

@keyframes head_move {
    50%  {
      -webkit-transform: rotate(1deg);
      transform: rotate(1deg);
    }
    75%  {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
}

@-webkit-keyframes hand_and_paper_move {
    30%  {
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg);
    }
    90%  {
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg);
    }
}

@keyframes hand_and_paper_move {
    30%  {
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg);
    }
    90%  {
      -webkit-transform: rotate(-20deg);
      transform: rotate(-20deg);
    }
}

@-webkit-keyframes eye_move {
    20%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
    90%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
}

@keyframes eye_move {
    20%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
    90%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
}

@-webkit-keyframes eyebrow_move {
    20%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
    60%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
    65%  {
      -webkit-transform: translateY(-5px);
      transform: translateY(-5px);
    }
}

@keyframes eyebrow_move {
    20%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
    60%  {
      -webkit-transform: translateY(5px);
      transform: translateY(5px);
    }
    65%  {
      -webkit-transform: translateY(-5px);
      transform: translateY(-5px);
    }
}

@-webkit-keyframes ginger-guy_head_move {
    40%  {
      -webkit-transform: rotateZ(-5deg);
      transform: rotateZ(-5deg);
    }
}

@keyframes ginger-guy_head_move {
    40%  {
      -webkit-transform: rotateZ(-5deg);
      transform: rotateZ(-5deg);
    }
}

@-webkit-keyframes shoe1_move {
    40%  {
      -webkit-transform: rotateZ(10deg);
      transform: rotateZ(10deg);
    }
}

@keyframes shoe1_move {
    40%  {
      -webkit-transform: rotateZ(10deg);
      transform: rotateZ(10deg);
    }
}

@-webkit-keyframes mouth_move {
    20%  {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    30%  {
      -webkit-transform: scaleY(1.9);
      transform: scaleY(1.9);
    }
    40%  {
      -webkit-transform: scaleX(0.7);
      transform: scaleX(0.7); 
      -webkit-transform: scaleY(3.7); 
      transform: scaleY(3.7);
    }
    60%  {
      -webkit-transform: scaleY(1.2);
      transform: scaleY(1.2);
    }
    90%  {
      -webkit-transform: scaleX(0.9);
      transform: scaleX(0.9);
    }
}

@keyframes mouth_move {
    20%  {
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    30%  {-webkit-transform: scaleY(1.9);
      transform: scaleY(1.9);
    }
    40%  {
      -webkit-transform: scaleX(0.7);
      transform: scaleX(0.7); 
      -webkit-transform: scaleY(3.7); 
      transform: scaleY(3.7);
    }
    60%  {
      -webkit-transform: scaleY(1.2);
      transform: scaleY(1.2);
    }
    90%  {
      -webkit-transform: scaleX(0.9);
      transform: scaleX(0.9);
    }
}

@-webkit-keyframes fly_move {
    20%  {
      -webkit-transform: translate(50px, 100px);
      transform: translate(50px, 100px);
    }
    40%  {
      -webkit-transform: translate(-20px, -100px);
      transform: translate(-20px, -100px);
    }
    60%  {
      -webkit-transform: translate(0px, -100px);
      transform: translate(0px, -100px);
    }
}

@keyframes fly_move {
    20%  {
      -webkit-transform: translate(50px, 100px);
      transform: translate(50px, 100px);
    }
    40%  {
      -webkit-transform: translate(-20px, -100px);
      transform: translate(-20px, -100px);
    }
    60%  {
      -webkit-transform: translate(0px, -100px);
      transform: translate(0px, -100px);
    }
}

@-webkit-keyframes wing_move {
    40%  {
      -webkit-transform: rotateZ(15deg);
      transform: rotateZ(15deg);
    }
}

@keyframes wing_move {
    40%  {
      -webkit-transform: rotateZ(15deg);
      transform: rotateZ(15deg);
    }
}
            
          
!
            
              function reactivateAnimation(config) {
  var element = document.getElementById(config.id);
  config.animationDelay = config.animationDelay ? config.animationDelay : 1;
  config.class = config.class ? config.class : config.id;
  
  setTimeout(function() {
    
    function animation() {
      element.classList.add(config.class);
      setTimeout(function() {
        element.classList.remove(config.class);
      }, config.animationTime)
    }
    
    animation();
   
    setInterval(function() {
      animation();
    }, config.animationTime + config.interval);
    
  }, config.animationDelay);
}

function setAnimationOnMultipleElements(multipleIds, parameters) {
  for (var i = 0; i < multipleIds.length; i++){
    parameters.id = multipleIds[i];
    reactivateAnimation(parameters);
  }
}
 
setAnimationOnMultipleElements([
  'eye1', 'eye2'
], {
  animationTime: 5000,
  interval: 6000,
  animationDelay: 3000,
  class: 'eyes'
})

setAnimationOnMultipleElements([
  'eyebrow1', 'eyebrow2'
], {
  animationTime: 5000,
  interval: 6000,
  animationDelay: 3000,
  class: 'eyebrows'
})

reactivateAnimation({
  id: 'forehand_and_paper',
  animationTime: 5000,
  interval: 6000,
  animationDelay: 1000
})

reactivateAnimation({
  id: 'ginger_head',
  animationTime: 1800,
  interval: 6000,
  animationDelay: 8000
})

reactivateAnimation({
  id: 'shoe_1',
  animationTime: 2100,
  interval: 8000,
  animationDelay: 4000
})

reactivateAnimation({
  id: 'mouth',
  animationTime: 2400,
  interval: 6000,
  animationDelay: 2000
})
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console