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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

            
              <div class="container">
  <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<style type="text/css">
	.st0{fill:#F4EFF3;}
	.st1{opacity:0.3;}
	.st2{fill:#5C234E;}
	.st3{fill:#883277;}
	.st4{fill:none;stroke:#007185;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;}
	.st5{fill:#983D82;}
	.st6{fill:#E5004E;}
	.st7{fill:#EB584D;}
	.st8{fill:#FFCE00;}
	.st9{display:none;fill:#5C234E;stroke:#5C234E;stroke-miterlimit:10;}
	.st10{fill:none;stroke:#5C234E;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
	.st11{fill:none;stroke:#5C234E;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
	.st12{display:none;}
	.st13{display:inline;fill:#5C234E;}
.st14{display:inline;fill:none;stroke:#5C234E;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
  .st15 {stroke-width:8;}
.st16{display:inline;fill:none;stroke:#5C234E;stroke-width:6;stroke-miterlimit:10;}
	.st18{fill:#007185;}
	.st19{opacity:0.75;fill:#6AB187;}
  .st17{opacity:0.5;fill:#FFFFFF;}
  .st20{fill:#FBE1CB;}
  .st21{fill:#e49a05; opacity:0.5}
  .st22{fill:#A1408E;} 
  .st23{fill:#C88BBC;}
</style>
<defs>
</defs>

<g id="window_1_" class="st1">
	<rect x="150.5" y="47.4" class="st20" width="301.8" height="479.4"/>
	<path class="st23" d="M151.3,207.6c0,0,35.1-37.7,58.9-33.4c30.4,5.6,44.6,43.6,59.8,41.8c15.2-1.9,30-19.9,46.1-21.4
		s29.8,18.6,49.5,8.4c19.6-10.3,33.6-33.9,55.4-40.2c29.2-8.4,31.2,19.6,31.2,19.6v344.4c0,0-211.6,0.8-298.2,0
		C133.9,526.6,151.3,207.6,151.3,207.6z"/>
	<path class="st22" d="M150.5,352.7c0,0,22.3-52.7,83-52.7s64.8,32.2,112.5,26.4c30-3.7,73.2-43.4,106.2-26.4c0,41.1,0,226.8,0,226.8
		H154L150.5,352.7z"/>
	<g>
		<path class="st2" d="M450.2,289.3v201H165.3V317v-27.7H450.2 M458.2,281.3h-8H165.3h-8v8V317v173.3v8h8h284.9h8v-8v-201V281.3
			L458.2,281.3z"/>
	</g>
	<g>
		<path class="st3" d="M443.6,282.9v201H158.6v-201H443.6 M463.6,262.9h-20H158.6h-20v20v201v20h20h284.9h20v-20v-201V262.9
			L463.6,262.9z"/>
	</g>
	<g>
		<path class="st2" d="M451.2,60.9v201H166.3v-201H451.2 M459.2,52.9h-8H166.3h-8v8v201v8h8h284.9h8v-8v-201V52.9L459.2,52.9z"/>
	</g>
	<g>
		<path class="st3" d="M443.6,54.3v201H158.6v-201H443.6 M463.6,34.3h-20H158.6h-20v20v201v20h20h284.9h20v-20v-201V34.3L463.6,34.3
			z"/>
	</g>
	<rect x="95.7" y="499.3" class="st2" width="409.8" height="45.3"/>
</g>

<path id="tige" class="st4 st15" d="M300.8,398.4c0,0,2.1-60.3,1.7-80.3c-0.5-23-6.2-92-6.2-92"/>
  <path id="tige-3" class="st12" d="M298.1,398.4c0,0-2.1-60.3-1.7-80.3c0.5-23,6.2-92,6.2-92"/>
  <path id="tige-2" class="st12" d="M300.5,399.8c3.1-5.4,9-15,12.1-20.3c5.5-9.6,9.2-23.4,8-34.4c-1.8-15.6-12.5-28.4-21.5-41.2
	c-5.9-8.5-20.9-19.3-21.3-32.7c-0.4-16.4,14.1-35.8,21.3-46.3"/>
<path id="tige-1" class="st12" d="M298.2,399.8c-3.1-5.4-9-15-12.1-20.3c-5.5-9.6-9.2-23.4-8-34.4c1.8-15.6,12.5-28.4,21.5-41.2
	c5.9-8.5,20.9-19.3,21.3-32.7c0.4-16.4-14.1-35.8-21.3-46.3"/>
<g id="pot">
	<path id="bottom" class="st5" d="M269.9,499.3h59.6c6.1,0,11.3-4.4,12.3-10.4l11.6-71.6h-108l12.2,71.7
		C258.7,495,263.9,499.3,269.9,499.3z"/>
	<polygon id="shadow" class="st2" points="245.3,419.3 349.5,442 353.3,419.3 	"/>
	<path id="top" class="st5" d="M357.9,419.3H241c-4,0-7.2-3.2-7.2-7.2v-13.6c0-4,3.2-7.2,7.2-7.2h117c4,0,7.2,3.2,7.2,7.2v13.6
		C365.1,416.1,361.9,419.3,357.9,419.3z"/>
</g>
<g id="head">
	<g>
		<g>
			<path class="st6" d="M333.1,185.3c-0.9-0.9-1.8-1.8-2.7-2.6c1.2-0.2,2.5-0.5,3.7-0.8c18.6-4.9,31.7-16.6,29.2-26.3
				c-2.5-9.7-19.6-13.6-38.2-8.7c-1.2,0.3-2.5,0.7-3.6,1.1c0.4-1.2,0.8-2.4,1.1-3.6c5.1-18.6,1.5-35.8-8.1-38.5
				c-9.6-2.7-21.5,10.3-26.6,28.9c-0.3,1.2-0.6,2.5-0.9,3.7c-0.8-0.9-1.7-1.9-2.6-2.8c-13.5-13.8-30.1-19.2-37.2-12.2
				c-7.1,7-1.9,23.8,11.5,37.6c0.9,0.9,1.8,1.8,2.7,2.6c-1.2,0.2-2.5,0.5-3.7,0.8c-18.6,4.9-31.7,16.6-29.2,26.3
				c2.5,9.7,19.6,13.6,38.2,8.7c1.2-0.3,2.5-0.7,3.6-1.1c-0.4,1.2-0.8,2.4-1.1,3.6c-5.1,18.6-1.5,35.8,8.1,38.5
				c9.6,2.7,21.5-10.3,26.6-28.9c0.3-1.2,0.6-2.5,0.9-3.7c0.8,0.9,1.7,1.9,2.6,2.8c13.5,13.8,30.1,19.2,37.2,12.2
				C351.8,215.9,346.6,199.1,333.1,185.3z"/>
			<path class="st7" d="M334,163.8c-1.2-0.3-2.5-0.6-3.7-0.8c0.9-0.9,1.8-1.7,2.7-2.7c13.3-14,18.2-30.9,11.1-37.8
				c-7.2-6.9-23.8-1.2-37.1,12.8c-0.9,0.9-1.7,1.9-2.5,2.8c-0.3-1.2-0.6-2.5-1-3.7c-5.4-18.5-17.5-31.3-27-28.5
				c-9.5,2.8-12.9,20.1-7.6,38.6c0.4,1.2,0.8,2.4,1.2,3.6c-1.2-0.4-2.4-0.7-3.7-1c-18.7-4.6-35.7-0.4-38.1,9.3s10.8,21.3,29.5,25.9
				c1.2,0.3,2.5,0.6,3.7,0.8c-0.9,0.9-1.8,1.7-2.7,2.7c-13.3,14-18.2,30.9-11.1,37.8c7.2,6.9,23.8,1.2,37.1-12.8
				c0.9-0.9,1.7-1.9,2.5-2.8c0.3,1.2,0.6,2.5,1,3.7c5.4,18.5,17.5,31.3,27,28.5c9.5-2.8,12.9-20.1,7.6-38.6
				c-0.4-1.2-0.8-2.4-1.2-3.6c1.2,0.4,2.4,0.7,3.7,1c18.7,4.6,35.7,0.4,38.1-9.3C365.8,180,352.6,168.4,334,163.8z"/>
		</g>
		<g id="face-group">
			
				<ellipse transform="matrix(0.3765 -0.9264 0.9264 0.3765 23.0697 382.7565)" class="st8" cx="295.9" cy="174.2" rx="38.2" ry="38.2"/>
			<g id="face">
				<path id="mouth-crazy" class="st9" d="M315.3,179.2c0,11.9-8.6,21.6-19.2,21.6s-19.3-9.6-19.3-21.6L315.3,179.2z"/>
				<path id="mouth-sexy" class="st2 st12" d="M310.2,192.5c-2.7,2.3-9.7,5.1-14.2,5.1c-4.4,0-11.5-2.8-14.2-5.1
					c-0.6-0.5-0.6-1.4,0-1.9c2.6-2.1,9.4-6.7,14.1-1.4c4.7-5.2,11.5-0.7,14.1,1.4C310.8,191.1,310.8,192,310.2,192.5z"/>
				<path id="mouth-happy" class="st10" d="M307.5,188.6c0,5.1-5.1,9.3-11.4,9.3c-6.3,0-11.4-4.1-11.4-9.3"/>
				<line id="mouth-cool" class="st10 st12" x1="286.6" y1="193.7" x2="305.2" y2="193.7"/>
				<g id="eyes-crazy" class="st12">
					<circle id="eye-left_7_" class="st2" cx="278.8" cy="163.3" r="6.2"/>
					<circle id="eye-right_11_" class="st2" cx="312.3" cy="159.3" r="6.9"/>
				</g>
				<g id="eyes-sexy" class="st12">
					<g id="eye-left_6_">
						<path id="eye-right_10_" class="st10" d="M286.6,161.4c0,2.5-2.5,4.6-5.6,4.6c-1.5,0-2.9-0.5-3.9-1.2c-1.1-0.8-1.8-2-1.8-3.4"
							/>
						<line class="st11" x1="274.1" y1="167.2" x2="276.4" y2="164.7"/>
						<line class="st11" x1="280.7" y1="169.6" x2="280.9" y2="166.2"/>
						<line class="st11" x1="287.9" y1="167.1" x2="285.5" y2="164.7"/>
					</g>
					<g id="eye-right_8_">
						<path id="eye-right_9_" class="st10" d="M316.4,161.5c0,2.5-2.5,4.6-5.6,4.6c-1.5,0-2.9-0.5-3.9-1.2c-1.1-0.8-1.8-2-1.8-3.4"
							/>
						<line class="st11" x1="303.9" y1="167.2" x2="306.3" y2="164.7"/>
						<line class="st11" x1="310.6" y1="169.7" x2="310.8" y2="166.3"/>
						<line class="st11" x1="317.7" y1="167.2" x2="315.3" y2="164.8"/>
					</g>
				</g>
				<g id="eyes-happy" class="st10">
					<path id="eye-left_5_" d="M305.1,166.1c0-2.5,2.5-4.6,5.6-4.6c3.1,0,5.7,2.1,5.7,4.6"/>
					<path id="eye-right_7_"  d="M275.4,166.1c0-2.5,2.5-4.6,5.6-4.6s5.7,2.1,5.7,4.6"/>
				</g>
				<g id="cheeks" class="st19">
					<circle class="st7" cx="274.6" cy="178.6" r="6.4"/>
					<circle class="st7" cx="316.7" cy="178.6" r="6.4"/>
				</g>
			</g>
			<g id="glasses" class="st2 st12">
				<g>
					<path class="st2" d="M311.7,179.8h6.6c6.9,0,12.5-5.6,12.5-12.5v-6.2c0-4.2-3.4-7.6-7.6-7.6h-15.4c-4.7,0-8.6,3.9-8.6,8.6v5.3
						C299.2,174.2,304.8,179.8,311.7,179.8z"/>
					<path class="st2" d="M279.7,179.8h-6.6c-6.9,0-12.5-5.6-12.5-12.5v-6.2c0-4.2,3.4-7.6,7.6-7.6h15.4c4.7,0,8.6,3.9,8.6,8.6v5.3
						C292.2,174.2,286.6,179.8,279.7,179.8z"/>
          		
			
				<path class="st16" d="M289.8,164.2c0,0,4.3-0.8,5.8-0.8s5.8,0.8,5.8,0.8"/>
				<path class="st17" d="M322.4,159.4L322.4,159.4c-1-1-2.7-1-3.7,0l-10.7,10.7c-1,1-1,2.7,0,3.7v0c1,1,2.7,1,3.7,0l10.7-10.7
					C323.4,162.1,323.4,160.4,322.4,159.4z"/>
				<path class="st17" d="M284.6,165.7L284.6,165.7c-0.9-0.9-2.3-0.9-3.1,0l-5.8,5.8c-0.9,0.9-0.9,2.3,0,3.1l0,0
					c0.9,0.9,2.3,0.9,3.1,0l5.8-5.8C285.5,168,285.5,166.6,284.6,165.7z"/>
				<path class="st17" d="M280.8,157.6L280.8,157.6c-1-1-2.7-1-3.7,0l-10.7,10.7c-1,1-1,2.7,0,3.7l0,0c1,1,2.7,1,3.7,0l10.7-10.7
					C281.9,160.3,281.9,158.6,280.8,157.6z"/>
				</g>
				<path class="st10" d="M289.6,164.2c0,0,4.3-0.8,5.8-0.8c1.5,0,5.8,0.8,5.8,0.8"/>
			</g>
			<path id="shadow" class="st21" d="M320.8,145.3c-0.3-0.3-0.7-0.6-1-0.9c13.9,14,14.9,36.6,1.8,51.8
				c-13.5,15.7-36.9,17.7-52.9,4.9c0.7,0.7,1.4,1.4,2.2,2.1c16,13.8,40.1,12,53.9-4C338.6,183.2,336.8,159,320.8,145.3z"/>
		</g>
	</g>
</g>

<g id="leaf-group-1">
	<line id="leaf-stem-1" class="st4" x1="300" y1="366" x2="289" y2="360" />
	<g id="leaf-1">
			<path class="st18" d="M224.7,331.3c0,0,22.5-9.6,43.5-3.4c17.6,5.2,28,20.1,24.1,30.5c-3.9,10.4-22,15.8-38.2,7.1
				C234.6,355.1,224.7,331.3,224.7,331.3z"/>
			<path class="st19" d="M288.1,359.2c0,0-3.1-2-7.9-5c-1.2-0.7-2.5-1.5-3.8-2.3c-1.4-0.8-2.8-1.7-4.3-2.5c-1.5-0.9-3.1-1.7-4.7-2.6
				c-1.6-0.9-3.3-1.7-4.9-2.4c-0.8-0.4-1.7-0.8-2.5-1.1c-0.8-0.3-1.7-0.7-2.5-1c-1.7-0.6-3.4-1.3-5-1.8c-1.6-0.5-3.2-1.1-4.8-1.5
				c-1.5-0.5-3-0.9-4.3-1.3c-5.4-1.6-9-2.6-9-2.6s0.2,0,0.7,0.1c0.4,0.1,1.1,0.1,1.9,0.2c1.6,0.2,3.9,0.6,6.7,1.2
				c1.4,0.3,2.9,0.6,4.4,1c1.6,0.4,3.2,0.8,4.9,1.3c1.7,0.5,3.4,1,5.2,1.7c0.9,0.3,1.8,0.7,2.6,1c0.9,0.4,1.7,0.7,2.6,1.1
				c1.7,0.8,3.4,1.7,5,2.6c1.6,0.9,3.2,1.8,4.7,2.8c3,1.9,5.7,3.8,7.9,5.4C285.4,356.6,288.1,359.2,288.1,359.2z"/>
	</g>
</g>
<g id="leaf-group-2">
	<line  id="leaf-stem-2"  class="st4" x1="300" y1="293.8" x2="287.2" y2="287"/>
	<g id="leaf-2">
		<path class="st18" d="M224.1,259.6c0,0,22.7-9.3,43.5-2.9c17.6,5.4,27.8,20.5,23.7,30.8c-4,10.3-22.2,15.5-38.3,6.6
			C233.7,283.6,224.1,259.6,224.1,259.6z"/>
		<path class="st19" d="M287.5,287.2c0,0-3.2-1.9-8.1-4.7c-1.2-0.7-2.5-1.4-3.9-2.2c-1.4-0.8-2.9-1.5-4.4-2.4
			c-1.5-0.8-3.2-1.6-4.8-2.4c-1.6-0.8-3.3-1.5-5-2.3c-0.8-0.3-1.7-0.7-2.6-1c-0.9-0.3-1.7-0.6-2.6-0.9c-1.7-0.6-3.4-1.1-5.1-1.6
			c-1.7-0.5-3.3-0.9-4.8-1.4c-1.5-0.4-3-0.8-4.4-1.1c-5.4-1.4-9.1-2.3-9.1-2.3s0.2,0,0.7,0.1c0.4,0,1.1,0.1,1.9,0.2
			c1.6,0.2,4,0.4,6.7,0.9c1.4,0.2,2.9,0.5,4.5,0.8c1.6,0.3,3.2,0.7,4.9,1.1c1.7,0.4,3.5,0.9,5.2,1.5c0.9,0.3,1.8,0.6,2.7,0.9
			c0.9,0.3,1.7,0.7,2.6,1c1.7,0.8,3.4,1.5,5.1,2.4c1.7,0.8,3.2,1.7,4.8,2.6c3.1,1.7,5.8,3.5,8.1,5.1
			C284.7,284.7,287.5,287.2,287.5,287.2z"/>
	</g>
</g>
<g id="leaf-group-3">
	<line id="leaf-stem-3" class="st4" x1="301.5" y1="287.1" x2="313.3" y2="278.1"/>
	<g id="leaf-3">
		<path class="st18" d="M377.7,249.2c0,0-8.7,22.9-27.7,33.7c-16,9.1-33.9,6.2-38.7-3.8c-4.8-10,3.9-26.8,21.4-32.5
			C353.6,239.8,377.7,249.2,377.7,249.2z"/>
		<path class="st19" d="M368.4,252.7c0,0-3.6,1-9,2.6c-1.3,0.4-2.8,0.9-4.3,1.3c-1.5,0.5-3.1,1-4.8,1.6c-1.6,0.6-3.3,1.2-5,1.8
					c-1.7,0.6-3.4,1.3-5.1,2.1c-0.8,0.4-1.7,0.8-2.5,1.2c-0.8,0.4-1.6,0.8-2.4,1.2c-1.6,0.9-3.2,1.7-4.7,2.6
					c-1.5,0.9-2.9,1.7-4.3,2.6c-1.4,0.8-2.6,1.6-3.8,2.4c-4.7,3-7.9,5-7.9,5s0.2-0.2,0.5-0.4c0.3-0.3,0.8-0.7,1.4-1.3
					c1.2-1.1,3-2.6,5.3-4.3c1.1-0.9,2.3-1.8,3.7-2.7c1.3-0.9,2.7-1.9,4.2-2.8c1.5-0.9,3-1.9,4.7-2.8c0.8-0.5,1.7-0.9,2.5-1.3
					c0.9-0.4,1.7-0.8,2.5-1.2c1.7-0.7,3.5-1.4,5.2-2.1c1.7-0.6,3.5-1.2,5.2-1.7c3.4-1,6.6-1.8,9.3-2.4
					C364.7,253,368.4,252.7,368.4,252.7z"/>
  </g>
</g>
<g id="leaf-group-4">
	<line id="leaf-stem-4" class="st4" x1="303" y1="358.1" x2="312.6" y2="351.2"/>
	<g id="leaf-4">
		<path class="st18" d="M378.2,317.7c0,0-7.7,23.2-26.2,34.9c-15.6,9.8-33.6,7.7-38.8-2.1s2.7-26.9,20-33.4
			C353.8,309.3,378.2,317.7,378.2,317.7z"/>
		<path class="st19" d="M369.2,323.2c0,0-3.6,1.1-8.9,2.8c-1.3,0.4-2.8,0.9-4.3,1.4c-1.5,0.5-3.1,1.1-4.7,1.7c-1.6,0.6-3.3,1.3-5,2
					c-1.7,0.7-3.4,1.4-5,2.2c-0.8,0.4-1.7,0.8-2.5,1.2c-0.8,0.4-1.6,0.8-2.4,1.3c-1.6,0.9-3.1,1.8-4.6,2.7c-1.5,0.9-2.9,1.8-4.2,2.7
					c-1.3,0.9-2.6,1.7-3.8,2.5c-4.6,3.1-7.7,5.2-7.7,5.2s0.2-0.2,0.5-0.5c0.3-0.3,0.8-0.7,1.4-1.3c1.2-1.1,3-2.6,5.2-4.4
					c1.1-0.9,2.3-1.8,3.6-2.8c1.3-1,2.7-2,4.1-2.9c1.5-1,3-2,4.6-2.9c0.8-0.5,1.6-0.9,2.5-1.4c0.8-0.5,1.6-0.8,2.5-1.3
					c1.7-0.8,3.5-1.5,5.2-2.2c1.7-0.7,3.4-1.3,5.1-1.8c3.3-1.1,6.5-1.9,9.2-2.6C365.5,323.6,369.2,323.2,369.2,323.2z"/>
	</g>
</g>
</svg>
  <div class="buttons">
    <button id="btn-happy">Happy</button>
    <button id="btn-crazy">Crazy</button>
    <button id="btn-sexy">Sexy</button>
    <button id="btn-cool">Cool</button>
  </div>
</div>
            
          
!
            
              body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #ffeaf1;
}
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
svg {
  width:600px;
  height: 600px;
}
.buttons {
  display: flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
}
button {
  padding: 10px 20px;
  border: none;
  color: white;
  text-transform: uppercase;
  margin: 0 10px 10px 0;
  cursor: pointer;
  letter-spacing: 1px;
  font-size: 20px;
  font-family: "Comfortaa", sans-serif;
  border-radius: 4px;
  transition: all 0.25s ease;
  &#btn-happy {
    background-color: #eb584d;
    &:hover {
      background-color: darken(#eb584d, 10%);
    }
  }
  &#btn-cool {
    background-color: #007185;
    &:hover {
      background-color: darken(#007185, 10%);
    }
  }
  &#btn-sexy {
    background-color: #e5004e;
    &:hover {
      background-color: darken(#e5004e, 10%);
    }
  }
  &#btn-crazy {
    background-color: #883277;
    &:hover {
      background-color: darken(#883277, 10%);
    }
  }
}

button:last-child {
  margin-right: 0;
}
button:focus {
  outline: none;
  border: 0;
}

            
          
!
            
              var select = function(el) {
    return document.getElementById(el);
  },
  svg = select("svg"),
  glasses = select("glasses"),
  eyes_happy = select("eyes-happy"),
  eyes_crazy = select("eyes-crazy"),
  eyes_sexy = select("eyes-sexy"),
  mouth_happy = select("mouth-happy"),
  mouth_crazy = select("mouth-crazy"),
  mouth_cool = select("mouth-cool"),
  mouth_sexy = select("mouth-sexy"),
  cheeks = select("cheeks"),
  stem_1 = select("tige"),
  stem_2 = select("tige-1"),
  stem_3 = select("tige-2"),
  stem_4 = select("tige-3"),
  head = select("head"),
  face = select("face"),
  leaf_group_1 = select("leaf-group-1"),
  leaf_group_2 = select("leaf-group-2"),
  leaf_group_3 = select("leaf-group-3"),
  leaf_group_4 = select("leaf-group-4"),
  leaf_stem_1 = select("leaf-stem-1"),
  leaf_stem_2 = select("leaf-stem-2"),
  leaf_stem_3 = select("leaf-stem-3"),
  leaf_stem_4 = select("leaf-stem-4"),
  leaf_1 = select("leaf-1"),
  leaf_2 = select("leaf-2"),
  leaf_3 = select("leaf-3"),
  leaf_4 = select("leaf-4"),
  btn_happy = select("btn-happy"),
  btn_cool = select("btn-cool"),
  btn_crazy = select("btn-crazy"),
  btn_sexy = select("btn-sexy");

btn_happy.onclick = function() {
  glasses.style.display = "none";
  eyes_happy.style.display = "block";
  eyes_crazy.style.display = "none";
  eyes_sexy.style.display = "none";
  mouth_happy.style.display = "block";
  mouth_crazy.style.display = "none";
  mouth_cool.style.display = "none";
  mouth_sexy.style.display = "none";
  cheeks.style.display = "block";
  tlCrazy.stop();
  tlCool.stop();
  tlSexy.stop();
  timelineInit();
  tlHappy.play();
};
btn_cool.onclick = function() {
  glasses.style.display = "block";
  eyes_happy.style.display = "none";
  eyes_crazy.style.display = "none";
  eyes_sexy.style.display = "none";
  mouth_happy.style.display = "none";
  mouth_crazy.style.display = "none";
  mouth_cool.style.display = "block";
  mouth_sexy.style.display = "none";
  cheeks.style.display = "none";
  tlHappy.stop();
  tlCrazy.stop();
  tlSexy.stop();
  timelineInit();
  tlCool.play();
};
btn_crazy.onclick = function() {
  glasses.style.display = "none";
  eyes_happy.style.display = "none";
  eyes_sexy.style.display = "none";
  eyes_crazy.style.display = "block";
  mouth_happy.style.display = "none";
  mouth_crazy.style.display = "block";
  mouth_cool.style.display = "none";
  mouth_sexy.style.display = "none";
  cheeks.style.display = "none";
  tlCool.stop();
  tlHappy.stop();
  tlSexy.stop();
  timelineInit();
  tlCrazy.play();
};
btn_sexy.onclick = function() {
  glasses.style.display = "none";
  eyes_happy.style.display = "none";
  eyes_crazy.style.display = "none";
  eyes_sexy.style.display = "block";
  mouth_happy.style.display = "none";
  mouth_crazy.style.display = "none";
  mouth_cool.style.display = "none";
  mouth_sexy.style.display = "block";
  cheeks.style.display = "block";
  tlCool.stop();
  tlHappy.stop();
  tlCrazy.stop();
  timelineInit();
  tlSexy.play();
};

function timelineInit() {
  TweenMax.set(stem_1, {
    scaleY: 1,
    rotation: 0,
    transformOrigin: "center bottom"
  });
  TweenMax.set(head, {
    y: 0,
    x: 0,
    rotation: 0,
    transformOrigin: "center bottom"
  });
  TweenMax.set(leaf_group_1, {
    y: 0,
    x: 0,
    rotation: 0,
    transformOrigin: "right bottom"
  });
  TweenMax.set(leaf_group_2, {
    y: 0,
    x: 0,
    rotation: 0,
    transformOrigin: "right bottom"
  });
  TweenMax.set(leaf_group_3, {
    y: 0,
    x: 0,
    rotation: 0,
    transformOrigin: "left bottom"
  });
  TweenMax.set(leaf_group_4, {
    y: 0,
    x: 0,
    rotation: 0,
    transformOrigin: "left bottom"
  });
  TweenMax.set(head, { y: 0 });
  TweenMax.set(face, { x: 0, y: 0 });
  TweenMax.set(leaf_stem_1, { attr: { x2: 289, y2: 360 } });
  TweenMax.set(leaf_stem_2, { attr: { x2: 287.2, y2: 287 } });
  TweenMax.set(leaf_stem_3, { attr: { x2: 313.3, y2: 278.1 } });
  TweenMax.set(leaf_stem_4, { attr: { x2: 312.6, y2: 351.2 } });
  TweenMax.set(leaf_1, { x: 0, y: 0 });
  TweenMax.set(leaf_2, { x: 0, y: 0 });
  TweenMax.set(leaf_3, { x: 0, y: 0 });
  TweenMax.set(leaf_4, { x: 0, y: 0 });
  TweenMax.set(stem_1, {
    attr: { d: "M300.8,398.4c0,0,2.1-60.3,1.7-80.3c-0.5-23-6.2-92-6.2-92" }
  });
}
timelineInit();
TweenMax.set("svg", { visibility: "visible" });

var tlCrazy = new TimelineMax({ paused: true, repeat: -1 });
tlCrazy
  .to(stem_1, 0.3, { scaleY: 0.65, transformOrigin: "center bottom" }, "one")
  .to(head, 0.3, { y: 60 }, "one")
  .to(face, 0.3, { y: 3 }, "one")
  .to(leaf_group_1, 0.3, { y: 20 }, "one")
  .to(leaf_group_2, 0.3, { y: 45 }, "one")
  .to(leaf_group_3, 0.3, { y: 45 }, "one")
  .to(leaf_group_4, 0.3, { y: 20 }, "one")
  .to(
    stem_1,
    0.3,
    { scaleY: 1, rotation: -15, transformOrigin: "center bottom" },
    "two"
  )
  .to(
    head,
    0.3,
    { y: 5, x: -40, rotation: -15, transformOrigin: "center bottom" },
    "two"
  )
  .to(face, 0.3, { x: -2, y: -3 }, "two")
  .to(
    leaf_group_1,
    0.3,
    { y: 0, x: -7, rotation: -15, transformOrigin: "right bottom" },
    "two"
  )
  .to(
    leaf_group_2,
    0.3,
    { y: 10, x: -22, rotation: -15, transformOrigin: "right bottom" },
    "two"
  )
  .to(
    leaf_group_3,
    0.3,
    { y: 10, x: -24, rotation: -15, transformOrigin: "left bottom" },
    "two"
  )
  .to(
    leaf_group_4,
    0.3,
    { y: 0, x: -7, rotation: -15, transformOrigin: "left bottom" },
    "two"
  )
  .to(
    stem_1,
    0.3,
    { scaleY: 0.65, rotation: 0, transformOrigin: "center bottom" },
    "three"
  )
  .to(
    head,
    0.3,
    { y: 60, x: 0, rotation: 0, transformOrigin: "center bottom" },
    "three"
  )
  .to(face, 0.3, { x: 0, y: 3 }, "three")
  .to(
    leaf_group_1,
    0.3,
    { y: 20, x: 0, rotation: 0, transformOrigin: "right bottom" },
    "three"
  )
  .to(
    leaf_group_2,
    0.3,
    { y: 45, x: 0, rotation: 0, transformOrigin: "right bottom" },
    "three"
  )
  .to(
    leaf_group_3,
    0.3,
    { y: 45, x: 0, rotation: 0, transformOrigin: "left bottom" },
    "three"
  )
  .to(
    leaf_group_4,
    0.3,
    { y: 20, x: 0, rotation: 0, transformOrigin: "left bottom" },
    "three"
  )
  .to(
    stem_1,
    0.3,
    { scaleY: 1, rotation: 15, transformOrigin: "center bottom" },
    "four"
  )
  .to(
    head,
    0.3,
    { y: 5, x: 40, rotation: 15, transformOrigin: "center bottom" },
    "four"
  )
  .to(face, 0.3, { x: 2, y: -3 }, "four")
  .to(
    leaf_group_1,
    0.3,
    { y: 0, x: 7, rotation: 15, transformOrigin: "right bottom" },
    "four"
  )
  .to(
    leaf_group_2,
    0.3,
    { y: 0, x: 24, rotation: 15, transformOrigin: "right bottom" },
    "four"
  )
  .to(
    leaf_group_3,
    0.3,
    { y: 0, x: 28, rotation: 15, transformOrigin: "left bottom" },
    "four"
  )
  .to(
    leaf_group_4,
    0.3,
    { y: 0, x: 12, rotation: 15, transformOrigin: "left bottom" },
    "four"
  )
  .to(
    stem_1,
    0.3,
    { scaleY: 0.65, rotation: 0, transformOrigin: "center bottom" },
    "five"
  )
  .to(
    head,
    0.3,
    { y: 60, x: 0, rotation: 0, transformOrigin: "center bottom" },
    "five"
  )
  .to(face, 0.3, { x: 0, y: 3 }, "five")
  .to(
    leaf_group_1,
    0.3,
    { y: 20, x: 0, rotation: 0, transformOrigin: "right bottom" },
    "five"
  )
  .to(
    leaf_group_2,
    0.3,
    { y: 45, x: 0, rotation: 0, transformOrigin: "right bottom" },
    "five"
  )
  .to(
    leaf_group_3,
    0.3,
    { y: 45, x: 0, rotation: 0, transformOrigin: "left bottom" },
    "five"
  )
  .to(
    leaf_group_4,
    0.3,
    { y: 20, x: 0, rotation: 0, transformOrigin: "left bottom" },
    "five"
  )
  .to(
    stem_1,
    0.3,
    { scaleY: 1, rotation: 0, transformOrigin: "center bottom" },
    "six"
  )
  .to(
    head,
    0.3,
    { y: 0, x: 0, rotation: 0, transformOrigin: "center bottom" },
    "six"
  )
  .to(face, 0.3, { x: 0, y: 0 }, "six")
  .to(
    leaf_group_1,
    0.3,
    { y: 0, x: 0, rotation: 0, transformOrigin: "right bottom" },
    "six"
  )
  .to(
    leaf_group_2,
    0.3,
    { y: 0, x: 0, rotation: 0, transformOrigin: "right bottom" },
    "six"
  )
  .to(
    leaf_group_3,
    0.3,
    { y: 0, x: 0, rotation: 0, transformOrigin: "left bottom" },
    "six"
  )
  .to(
    leaf_group_4,
    0.3,
    { y: 0, x: 0, rotation: 0, transformOrigin: "left bottom" },
    "six"
  );
tlCrazy.timeScale(1.6);

var tlCool = new TimelineMax({ paused: true, repeat: -1 });
tlCool
  .to(head, 0.3, { x: 3, repeat: -1, yoyo: true }, "two")
  .to(
    leaf_group_1,
    0.3,
    { rotation: -1, transformOrigin: "right bottom", repeat: -1, yoyo: true },
    "two"
  )
  .to(
    leaf_group_2,
    0.3,
    { rotation: -1, transformOrigin: "right bottom", repeat: -1, yoyo: true },
    "two"
  )
  .to(
    leaf_group_3,
    0.3,
    { rotation: 1, transformOrigin: "left bottom", repeat: -1, yoyo: true },
    "two"
  )
  .to(
    leaf_group_4,
    0.3,
    { rotation: 1, transformOrigin: "left bottom", repeat: -1, yoyo: true },
    "two"
  );

var tlHappy = new TimelineMax();
tlHappy
  .to(
    leaf_stem_1,
    0.3,
    { attr: { x2: 250, y2: 340 }, transformOrigin: "50% 50%" },
    "one"
  )
  .to(leaf_1, 0.3, { x: -15, y: -7 }, "one")
  .to(
    leaf_stem_2,
    0.3,
    { attr: { x2: 240, y2: 267 }, transformOrigin: "50% 50%" },
    "one"
  )
  .to(leaf_2, 0.3, { x: -15, y: -7 }, "one")
  .add(happy2());

function happy2() {
  var tlHappy2 = new TimelineMax({ repeat: -1 });
  tlHappy2
    .to(
      leaf_stem_3,
      0.3,
      { attr: { x2: 335, y2: 268 }, transformOrigin: "50% 50%" },
      "two+=0.5"
    )
    .to(leaf_3, 0.3, { x: 15, y: -7 }, "two+=0.5")
    .to(
      leaf_stem_4,
      0.3,
      { attr: { x2: 340, y2: 337 }, transformOrigin: "50% 50%" },
      "two+=0.5"
    )
    .to(leaf_4, 0.3, { x: 15, y: -7 }, "two+=0.5")
    .to(
      leaf_stem_1,
      0.3,
      { attr: { x2: 289, y2: 360 }, transformOrigin: "50% 50%" },
      "two+=0.5"
    )
    .to(leaf_1, 0.3, { x: -2, y: 0 }, "two+=0.5")
    .to(
      leaf_stem_2,
      0.3,
      { attr: { x2: 287.2, y2: 287 }, transformOrigin: "50% 50%" },
      "two+=0.5"
    )
    .to(leaf_2, 0.3, { x: -5, y: 0 }, "two+=0.5")
    .to(
      head,
      0.3,
      {
        y: 0,
        x: 5,
        rotation: 5,
        transformOrigin: "center bottom",
        ease: Power0.easeNone
      },
      "two+=0.5"
    )
    .to(
      stem_1,
      0.3,
      { x: 2, morphSVG: stem_4, ease: Power0.easeNone },
      "two+=0.5"
    )
    .to(
      leaf_stem_3,
      0.3,
      { attr: { x2: 313.3, y2: 278.1 }, transformOrigin: "50% 50%" },
      "three+=0.5"
    )
    .to(leaf_3, 0.3, { x: 0, y: 0 }, "three+=0.5")
    .to(
      leaf_stem_4,
      0.3,
      { attr: { x2: 312.6, y2: 351.2 }, transformOrigin: "50% 50%" },
      "three+=0.5"
    )
    .to(leaf_4, 0.3, { x: 0, y: 0 }, "three+=0.5")
    .to(
      leaf_stem_1,
      0.3,
      { attr: { x2: 250, y2: 340 }, transformOrigin: "50% 50%" },
      "three+=0.5"
    )
    .to(leaf_1, 0.3, { x: -15, y: -7 }, "three+=0.5")
    .to(
      leaf_stem_2,
      0.3,
      { attr: { x2: 235, y2: 265 }, transformOrigin: "50% 50%" },
      "three+=0.5"
    )
    .to(leaf_2, 0.3, { x: -15, y: -7 }, "three+=0.5")
    .to(
      head,
      0.3,
      {
        y: 0,
        x: 0,
        rotation: 0,
        transformOrigin: "center bottom",
        ease: Power0.easeNone
      },
      "three+=0.5"
    )
    .to(
      stem_1,
      0.3,
      { x: 0, morphSVG: stem_1, ease: Power0.easeNone },
      "three+=0.5"
    );
  return tlHappy2;
}

tlHappy.timeScale(4);

var tlSexy = new TimelineMax({ paused: true, repeat: -1 });
tlSexy
  .to(stem_1, 0.3, { morphSVG: stem_2, ease: Power0.easeNone }, "one")
  .to(
    head,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: -15,
      transformOrigin: "center bottom",
      ease: Power0.easeNone
    },
    "one"
  )
  .to(
    leaf_group_1,
    0.3,
    {
      y: 0,
      x: -18,
      rotation: -20,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "one"
  )
  .to(
    leaf_group_2,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 15,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "one"
  )
  .to(
    leaf_group_3,
    0.3,
    {
      y: 0,
      x: 8,
      rotation: 30,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "one"
  )
  .to(
    leaf_group_4,
    0.3,
    {
      y: 0,
      x: -22,
      rotation: -5,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "one"
  )
  .to(stem_1, 0.3, { morphSVG: stem_1, ease: Power0.easeNone }, "two")
  .to(
    head,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "center bottom",
      ease: Power0.easeNone
    },
    "two"
  )
  .to(
    leaf_group_1,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "two"
  )
  .to(
    leaf_group_2,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "two"
  )
  .to(
    leaf_group_3,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "two"
  )
  .to(
    leaf_group_4,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "two"
  )
  .to(stem_1, 0.3, { morphSVG: stem_3, ease: Power0.easeNone }, "three")
  .to(
    head,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 15,
      transformOrigin: "center bottom",
      ease: Power0.easeNone
    },
    "three"
  )
  .to(
    leaf_group_1,
    0.3,
    {
      y: 0,
      x: 16,
      rotation: 10,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "three"
  )
  .to(
    leaf_group_2,
    0.3,
    {
      y: 0,
      x: -4,
      rotation: -30,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "three"
  )
  .to(
    leaf_group_3,
    0.3,
    {
      y: 0,
      x: -10,
      rotation: -5,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "three"
  )
  .to(
    leaf_group_4,
    0.3,
    {
      y: 0,
      x: 14,
      rotation: 20,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "three"
  )
  .to(stem_1, 0.3, { morphSVG: stem_1, ease: Power0.easeNone }, "four")
  .to(
    head,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "center bottom",
      ease: Power0.easeNone
    },
    "four"
  )
  .to(
    leaf_group_1,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "four"
  )
  .to(
    leaf_group_2,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "right bottom",
      ease: Power0.easeNone
    },
    "four"
  )
  .to(
    leaf_group_3,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "four"
  )
  .to(
    leaf_group_4,
    0.3,
    {
      y: 0,
      x: 0,
      rotation: 0,
      transformOrigin: "left bottom",
      ease: Power0.easeNone
    },
    "four"
  );
tlSexy.timeScale(0.6);

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

Console