Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px" height="350px" viewBox="0 0 350 350" enable-background="new 0 0 350 350" xml:space="preserve">
<g id="shadow">
	<ellipse opacity="0.1" fill="#5D5E5E" cx="157.731" cy="273.072" rx="41.5" ry="5.666"/>
</g>
<g id="_x31_">

		<path fill="#FDDFCF" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M215.056,200.375c-8.801,21.26-30.551,36.31-55.99,36.31c-33.23,0-60.17-25.66-60.17-57.33c0-14.14,5.37-27.09,14.28-37.08
		c0,0,0.64-11.9,3.85-14.24c4.94,2.99,15.541-0.01,15.541-0.01s5.16,16.62,43.83,11.95c0,0-1.88,12.41,12.189,17.65l6.561,1.98
		c0,0-1.801,6.81,3.449,6.06h0.011c1.22-0.94,2.819-1.52,4.96-1.41c6.569,0.33,6.779,9.03,6.04,14.44c0,0,0,0.011,0,0.04
		C209.705,179.685,211.405,196.925,215.056,200.375z"/>
	<path fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M215.146,200.154c-0.03,0.07-0.061,0.15-0.091,0.221"/>
	<path fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M192.896,183.354c0,0,1.329,5.33,7,5.33c5.67,0,7.869-3.33,8.909-6.19c0.25-0.68,0.57-2.06,0.801-3.76"/>
	<path fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M194.896,174.685c0,0,0-6.16,3.699-9.02"/>
	<path id="eye-1R" fill="#5D5E5E" d="M163.172,177.799c-0.78,2.456-3.617,3.747-6.337,2.883l0,0
		c-2.72-0.865-4.292-3.557-3.511-6.014l3.83-12.05c0.781-2.457,3.618-3.748,6.338-2.884l0,0c2.72,0.865,4.291,3.558,3.51,6.014
		L163.172,177.799z"/>
	<path id="eye-1L" fill="#5D5E5E" d="M126.422,166.424c-0.78,2.456-3.617,3.747-6.337,2.883l0,0
		c-2.72-0.866-4.292-3.557-3.511-6.014l3.83-12.05c0.781-2.457,3.618-3.748,6.338-2.884l0,0c2.72,0.865,4.291,3.558,3.51,6.014
		L126.422,166.424z"/>
	<path fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M135.832,165.667c0,0-4.375,5.081-4.5,8.04c-0.125,2.96,5,8.653,5,8.653"/>
	
		<path id="eyebrow-1R" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M156.332,149.533c0,0,13.032-3.273,18.851,8.95"/>
	
		<path id="eyebrow-1L" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M133.985,141.49c0,0-8.81-5.102-15.868-2.24"/>
	
		<path fill="#F15E63" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M219.225,198.354c-1.6,2.811-2.989,3.15-4.169,2.021c-3.65-3.45-5.351-20.69-5.45-21.641c0-0.029,0-0.04,0-0.04
		c0.739-5.41,0.529-14.11-6.04-14.44c-2.141-0.11-3.74,0.47-4.96,1.41h-0.011c-5.25,0.75-3.449-6.06-3.449-6.06l-6.561-1.98
		c-14.069-5.24-12.189-17.65-12.189-17.65c-38.67,4.67-43.83-11.95-43.83-11.95s-10.6,3-15.541,0.01
		c-1.43-0.87-2.39-2.25-2.459-4.35c-0.34-9.33,14-12,22.33-13c8.33-1,8.33-22.33,51-9c42.67,13.34,29.67,40.59,29.67,40.59
		S251.396,141.854,219.225,198.354z"/>
  
  
 	<g id="inner-mouth-1" display="inline">
		<path fill="#5D5E5E" stroke='#5D5E5E' stroke-width="2" d="M118.852,189.451c0.857-2.198,3.002-1.287,10.724,0.322c7.721,1.607,17.854,5.361,17.854,5.361
			s7.346,1.877,5.523,10.671c-1.823,8.793-12.118,9.114-16.998,6.702c-2.537-1.255-6.348-3.908-9.33-6.81
			c-2.752-2.679-4.76-5.626-5.338-6.566C120.084,197.173,117.993,191.649,118.852,189.451z"/>
	</g>
	<path id="teeth-1" display="inline" fill="#FFFFFF" d="M117.832,189.73c0,0,7.188,9.75,37.5,12.75l-1.375-5.938l-16.688-8.062
		l-16.5-2.312C120.77,186.168,117.582,187.98,117.832,189.73z"/>
	<g id="outer-mouth-1" display="inline">

			<path fill="#5D5E5E" d="M120.954,188.147c1.566,0,4.165,0.697,8.622,1.626c7.721,1.607,17.854,5.361,17.854,5.361
				s7.346,1.877,5.523,10.671c-1.225,5.907-6.273,7.991-10.935,7.991c-2.277,0-4.462-0.498-6.063-1.289
				c-2.537-1.255-6.348-3.908-9.33-6.81c-2.752-2.679-4.76-5.626-5.338-6.566c-1.203-1.959-3.294-7.482-2.436-9.681
				C119.214,188.521,119.807,188.148,120.954,188.147 M120.954,183.148c-3.184,0-5.648,1.635-6.76,4.485
				c-2.135,5.467,2.782,14.031,2.833,14.114c0.25,0.405,2.529,4.046,6.111,7.533c3.084,3,7.344,6.097,10.601,7.708
				c2.357,1.166,5.298,1.808,8.28,1.808c8.233,0,14.299-4.589,15.831-11.977c2.008-9.688-4.118-15.084-8.894-16.452
				c-1.56-0.57-10.898-3.937-18.36-5.49c-1.186-0.247-2.239-0.478-3.175-0.683C124.54,183.564,122.637,183.148,120.954,183.148
				L120.954,183.148z"/>

	</g>
	<polygon id="tooth-gap-1" display="inline" fill="#5D5E5E" points="131.377,198.355 133.457,190.424 126.092,188.148 
		124.645,195.625 	"/>
  
  
  
  
  
  
  
  
<!-- 	<g id="inner-mouth-1">
		<path fill="#5D5E5E" d="M118.852,189.451c0.857-2.198,3.002-1.287,10.724,0.322c7.721,1.607,26.55,7.452,26.55,7.452
			s-5.611,12.022-19.793,8.441C124.339,202.639,117.993,191.649,118.852,189.451z"/>
	</g> -->
<!-- 	<path id="teeth-1" fill="#FFFFFF" d="M117.832,189.73c0,0,7.188,9.75,37.5,12.75l-1.375-5.938l-16.688-8.062l-16.5-2.312
		C120.77,186.168,117.582,187.98,117.832,189.73z"/>
	<g>
		
			<path id="outer-mouth-1" fill="#5D5E5E" d="M120.954,188.148c1.566,0,4.165,0.696,8.622,1.625c5.273,1.098,14.878,4.191,20.439,6.043
				c2.463,0.82,3.388,3.886,1.704,5.861c-1.967,2.307-5.232,4.657-10.366,4.657c-1.507,0-3.175-0.202-5.02-0.668
				c-11.993-3.028-18.339-14.018-17.48-16.216C119.214,188.521,119.807,188.148,120.954,188.148 M120.954,183.148L120.954,183.148
				c-3.184,0-5.648,1.635-6.76,4.486c-0.809,2.072-0.453,4.537,1.091,7.535c2.824,5.482,9.709,12.791,19.823,15.345
				c2.156,0.545,4.256,0.82,6.244,0.82c7.192,0,11.676-3.487,14.171-6.413c1.855-2.176,2.502-5.127,1.731-7.896
				c-0.782-2.809-2.897-5.034-5.659-5.954c-6.664-2.219-15.716-5.094-21-6.194c-1.186-0.247-2.239-0.478-3.175-0.683
				C124.54,183.564,122.637,183.148,120.954,183.148L120.954,183.148z"/>

	</g>
	<polygon id="tooth-gap-1" fill="#5D5E5E" points="131.377,198.355 133.457,190.424 126.092,188.148 124.645,195.625 	"/> -->
  	<g id="pencil-movement-group" display="inline">
		
			<line id="pm-tr" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="234.231" y1="106.318" x2="263.167" y2="78.318"/>
		
			<line id="pm-t" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="268.32" y1="57.743" x2="278.921" y2="47.484"/>
		
			<line id="pm-br" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="245.121" y1="103.651" x2="260.277" y2="88.984"/>
		
			<line id="pm-bl" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="218.24" y1="90.849" x2="247.303" y2="62.98"/>
		
			<line id="pm-tl" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="221.312" y1="80.067" x2="236.535" y2="65.469"/>
	</g>
	<g id="face-movement-group" display="inline">
		
			<path id="fm-t" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M158.687,244.696c-37.97,0-68.751-30.78-68.751-68.751"/>
		
			<path id="fm-b" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M124.316,242.547c-13.357-6.425-24.319-17.039-31.18-30.14"/>
	</g>
  		<g id="hair-line-group">
		<path id="top" fill="none" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-miterlimit="10" d="
			M188.529,115.646c0,0-0.18,5.87,2.601,11.58"/>
		
			<path id="bottom" fill="none" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M197.119,134.096c4.851,2.82,10.41,2.18,10.41,2.18"/>
	</g>
<!--   		<path id="hair-line-2" display="inline" fill="none" stroke="#F05D62" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M188.196,116.134c0,0-0.18,5.87,2.601,11.58c0.53,1.11,1.17,2.21,1.96,3.25l0.51,0.66c1.04,1.27,2.26,2.23,3.521,2.96
		c4.85,2.82,10.409,2.18,10.409,2.18"/> -->
	<g id="pencil-group-1">
    <g id="pencil-top-1">
		<polygon fill="#F37F8F" stroke="#5D5E5E" stroke-width="4.75" stroke-miterlimit="10" points="294.975,36.781 286.725,44.941 
			280.305,38.521 288.555,30.361 		"/>
		<polygon fill="#808285" stroke="#5D5E5E" stroke-width="4.75" stroke-linejoin="round" stroke-miterlimit="10" points="
			286.725,44.941 281.745,49.851 275.335,43.431 280.305,38.521 		"/>
		</g>
			<polygon id="pencil-point-1" fill="#FDDFCF" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
			234.055,97.185 231.175,100.045 220.93,103.18 225.186,93.175 227.625,90.755 		"/>
		
			<polygon id="pencil-shaft-1" fill="#FBB040" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
			281.745,49.855 234.055,97.185 227.625,90.755 275.335,43.435 		"/>
	
  
  
  </g>
  	  		<ellipse id="outer-mouth-2" transform="matrix(0.8939 0.4482 -0.4482 0.8939 102.9787 -37.1649)" display="inline" fill="none" stroke="#5D5E5E" stroke-width="4.8282" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="130.004" cy="198.97" rx="12.42" ry="10.461"/>
  

  
<g id="_x32_" display="none">
	  		<ellipse id="outer-mouth-2" transform="matrix(0.8939 0.4482 -0.4482 0.8939 102.9787 -37.1649)" display="inline" fill="none" stroke="#5D5E5E" stroke-width="4.8282" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="130.004" cy="198.97" rx="12.42" ry="10.461"/>
		<path display="inline" fill="#FDDFCF" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M214.722,200.859c-8.8,21.26-30.55,36.31-55.99,36.31c-33.23,0-60.17-25.66-60.17-57.33c0-14.14,5.37-27.09,14.28-37.08
		c0,0,0.64-11.9,3.85-14.24c4.94,2.99,15.54-0.01,15.54-0.01s5.16,16.62,43.83,11.95c0,0-1.88,12.41,12.19,17.65l6.56,1.98
		c0,0-1.8,6.81,3.45,6.06h0.01c1.221-0.94,2.82-1.52,4.96-1.41c6.57,0.33,6.78,9.03,6.04,14.439c0,0,0,0.011,0,0.04
		C209.372,180.169,211.072,197.409,214.722,200.859z"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M214.812,200.64c-0.029,0.069-0.06,0.149-0.09,0.22"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M192.562,183.839c0,0,1.33,5.33,7,5.33s7.87-3.33,8.91-6.189c0.25-0.681,0.57-2.061,0.8-3.761"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M194.562,175.169c0,0,0-6.16,3.7-9.02"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M135.499,166.152c0,0-4.375,5.08-4.5,8.04s5,8.652,5,8.652"/>
	
		<ellipse id="inner-mouth-2" transform="matrix(0.9433 0.332 -0.332 0.9433 73.4301 -31.8752)" display="inline" fill="#5D5E5E" cx="130.004" cy="198.969" rx="12.421" ry="10.461"/>
	
		<path display="inline" fill="#F15E63" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M218.892,198.839c-1.6,2.811-2.99,3.15-4.17,2.021c-3.649-3.45-5.35-20.69-5.45-21.641c0-0.029,0-0.04,0-0.04
		c0.74-5.41,0.53-14.109-6.04-14.439c-2.14-0.11-3.739,0.47-4.96,1.41h-0.01c-5.25,0.75-3.45-6.06-3.45-6.06l-6.56-1.98
		c-14.07-5.24-12.19-17.65-12.19-17.65c-38.67,4.67-43.83-11.95-43.83-11.95s-10.6,3-15.54,0.01c-1.43-0.87-2.39-2.25-2.46-4.35
		c-0.34-9.33,14-12,22.33-13c8.33-1,8.33-22.33,51-9c42.67,13.34,29.67,40.59,29.67,40.59S251.062,142.339,218.892,198.839z"/>
	<path id="teeth-2" display="inline" fill="#FFFFFF" d="M119.576,192.175c2.893,2.274,9.229,6.049,21.556,8.685
		c3.972,0.85-4.196-11.895-4.196-11.895l-11.633-1.63C125.304,187.335,118.072,190.992,119.576,192.175z"/>
	<polygon id="tooth-gap-2" display="inline" fill="#5D5E5E" points="131.044,198.84 133.124,190.908 125.759,188.633 
		124.312,196.109 	"/>
	
		<path id="hair-line-2" display="inline" fill="none" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M188.196,116.134c0,0-0.18,5.87,2.601,11.58c0.53,1.11,1.17,2.21,1.96,3.25l0.51,0.66c1.04,1.27,2.26,2.23,3.521,2.96
		c4.85,2.82,10.409,2.18,10.409,2.18"/>
	<path display="inline" fill="#DA5559" d="M216.717,197.604c-0.26,0.45-0.47,0.771-0.65,0.99c-1.05-1.561-2.17-5.53-3.08-10.74
		c4.99-10.3,9.021-21.4,10.78-28.74c1.43-5.94,0.4-10.44-2.43-13.14c2.3,0.74,5.08,2.25,6.899,5.33
		C231.677,157.154,232.477,169.924,216.717,197.604z"/>
	<path display="inline" fill="#E5CBBE" d="M211.847,201.215c-9.06,20.37-29.74,33.449-53.12,33.449c-9.37,0-18.21-2.13-26.04-5.92
		c-0.21-0.189-0.31-0.3-0.31-0.3c40.69,16.75,70.982-22.396,76.902-33.916C209.969,197.179,210.826,199.564,211.847,201.215z"/>
	<g id="pencil-group-2" display="inline">
		<polygon fill="#F37F8F" stroke="#5D5E5E" stroke-width="4.75" stroke-miterlimit="10" points="266.397,65.51 258.147,73.67 
			251.728,67.25 259.978,59.09 		"/>
		<polygon fill="#808285" stroke="#5D5E5E" stroke-width="4.75" stroke-linejoin="round" stroke-miterlimit="10" points="
			258.147,73.67 253.167,78.58 246.757,72.16 251.728,67.25 		"/>
		
			<path fill="#FDDFCF" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M205.477,125.915l-2.88,2.86l-9.33,2.85c-0.1-0.11-0.19-0.22-0.28-0.34c-0.08-0.1-0.16-0.21-0.229-0.32l3.85-9.06l2.44-2.42
			L205.477,125.915z"/>
		
			<polygon fill="#FBB040" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
			253.168,78.583 205.478,125.914 199.048,119.484 246.758,72.164 		"/>
	</g>
	
		<ellipse id="outer-mouth-2" transform="matrix(0.8939 0.4482 -0.4482 0.8939 102.9787 -37.1649)" display="inline" fill="none" stroke="#5D5E5E" stroke-width="4.8282" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="130.004" cy="198.97" rx="12.42" ry="10.461"/>
	
		<path id="eyebrow-2R" display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M167.701,152.163c0,0,11.889,6.263,8.062,19.248"/>
	
		<path id="eyebrow-2L" display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M128.626,139.589c0,0-11.897-0.75-17.803,5.934"/>
	<path display="inline" fill="#5D5E5E" d="M162.839,178.283c-0.78,2.456-3.617,3.747-6.337,2.883l0,0
		c-2.72-0.865-4.292-3.557-3.511-6.014l3.83-12.05c0.781-2.457,3.618-3.748,6.338-2.884l0,0c2.72,0.865,4.291,3.558,3.51,6.014
		L162.839,178.283z"/>
	<path display="inline" fill="#5D5E5E" d="M126.089,166.908c-0.78,2.456-3.617,3.747-6.337,2.883l0,0
		c-2.72-0.865-4.292-3.557-3.511-6.014l3.83-12.05c0.781-2.457,3.618-3.748,6.338-2.884l0,0c2.72,0.865,4.291,3.558,3.51,6.014
		L126.089,166.908z"/>
	<g id="pencil-movement-group" display="inline">
		
			<line id="pm-tr" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="234.231" y1="106.318" x2="263.167" y2="78.318"/>
		
			<line id="pm-t" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="268.32" y1="57.743" x2="278.921" y2="47.484"/>
		
			<line id="pm-br" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="245.121" y1="103.651" x2="260.277" y2="88.984"/>
		
			<line id="pm-bl" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="218.24" y1="90.849" x2="247.303" y2="62.98"/>
		
			<line id="pm-tl" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="221.312" y1="80.067" x2="236.535" y2="65.469"/>
	</g>
	<g id="face-movement-group" display="inline">
		
			<path id="fm-t" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M158.687,244.696c-37.97,0-68.751-30.78-68.751-68.751"/>
		
			<path id="fm-b" opacity="0.1" fill="none" stroke="#5D5E5E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
			M124.316,242.547c-13.357-6.425-24.319-17.039-31.18-30.14"/>
	</g>
</g>
<g id="_x33_-final" display="none">
	
		<path display="inline" fill="#FDDFCF" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M215.056,200.375c-8.801,21.26-30.551,36.31-55.99,36.31c-33.23,0-60.17-25.66-60.17-57.33c0-14.14,5.37-27.09,14.28-37.08
		c0,0,0.64-11.9,3.85-14.24c4.94,2.99,15.541-0.01,15.541-0.01s5.16,16.62,43.83,11.95c0,0-1.88,12.41,12.189,17.65l6.561,1.98
		c0,0-1.801,6.81,3.449,6.06h0.011c1.22-0.94,2.819-1.52,4.96-1.41c6.569,0.33,6.779,9.03,6.04,14.44c0,0,0,0.011,0,0.04
		C209.705,179.685,211.405,196.925,215.056,200.375z"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M215.146,200.154c-0.03,0.07-0.061,0.15-0.091,0.221"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M192.896,183.354c0,0,1.329,5.33,7,5.33c5.67,0,7.869-3.33,8.909-6.19c0.25-0.68,0.57-2.06,0.801-3.76"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M194.896,174.685c0,0,0-6.16,3.699-9.02"/>
	<path display="inline" fill="#5D5E5E" d="M163.172,177.799c-0.78,2.456-3.617,3.747-6.337,2.883l0,0
		c-2.72-0.865-4.292-3.557-3.511-6.014l3.83-12.05c0.781-2.457,3.618-3.748,6.338-2.884l0,0c2.72,0.865,4.291,3.558,3.51,6.014
		L163.172,177.799z"/>
	<path display="inline" fill="#5D5E5E" d="M126.422,166.424c-0.78,2.456-3.617,3.747-6.337,2.883l0,0
		c-2.72-0.866-4.292-3.557-3.511-6.014l3.83-12.05c0.781-2.457,3.618-3.748,6.338-2.884l0,0c2.72,0.865,4.291,3.558,3.51,6.014
		L126.422,166.424z"/>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M135.832,165.667c0,0-4.375,5.081-4.5,8.04c-0.125,2.96,5,8.653,5,8.653"/>
	<g id="inner-mouth-3" display="inline">
		<path fill="#5D5E5E" stroke='#5D5E5E' stroke-width="2" d="M118.852,189.451c0.857-2.198,3.002-1.287,10.724,0.322c7.721,1.607,17.854,5.361,17.854,5.361
			s7.346,1.877,5.523,10.671c-1.823,8.793-12.118,9.114-16.998,6.702c-2.537-1.255-6.348-3.908-9.33-6.81
			c-2.752-2.679-4.76-5.626-5.338-6.566C120.084,197.173,117.993,191.649,118.852,189.451z"/>
	</g>
	
		<path id="eyebrow-3R" display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M161.08,148.091c0,0,13.333,1.666,14.333,15.166"/>
	
		<path id="eyebrow-3L" display="inline" fill="none" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M133.457,138.355c0,0-10.043-1.667-15.639,3.5"/>
	
		<path display="inline" fill="#F15E63" stroke="#5D5E5E" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M219.225,198.354c-1.6,2.811-2.989,3.15-4.169,2.021c-3.65-3.45-5.351-20.69-5.45-21.641c0-0.029,0-0.04,0-0.04
		c0.739-5.41,0.529-14.11-6.04-14.44c-2.141-0.11-3.74,0.47-4.96,1.41h-0.011c-5.25,0.75-3.449-6.06-3.449-6.06l-6.561-1.98
		c-14.069-5.24-12.189-17.65-12.189-17.65c-38.67,4.67-43.83-11.95-43.83-11.95s-10.6,3-15.541,0.01
		c-1.43-0.87-2.39-2.25-2.459-4.35c-0.34-9.33,14-12,22.33-13c8.33-1,8.33-22.33,51-9c42.67,13.34,29.67,40.59,29.67,40.59
		S251.396,141.854,219.225,198.354z"/>
	<path id="teeth-3" display="inline" fill="#FFFFFF" d="M117.832,189.73c0,0,7.188,9.75,37.5,12.75l-1.375-5.938l-16.688-8.062
		l-16.5-2.312C120.77,186.168,117.582,187.98,117.832,189.73z"/>
	<g id="outer-mouth-3" display="inline">
		<g>
			<path fill="#5D5E5E" d="M120.954,188.147c1.566,0,4.165,0.697,8.622,1.626c7.721,1.607,17.854,5.361,17.854,5.361
				s7.346,1.877,5.523,10.671c-1.225,5.907-6.273,7.991-10.935,7.991c-2.277,0-4.462-0.498-6.063-1.289
				c-2.537-1.255-6.348-3.908-9.33-6.81c-2.752-2.679-4.76-5.626-5.338-6.566c-1.203-1.959-3.294-7.482-2.436-9.681
				C119.214,188.521,119.807,188.148,120.954,188.147 M120.954,183.148c-3.184,0-5.648,1.635-6.76,4.485
				c-2.135,5.467,2.782,14.031,2.833,14.114c0.25,0.405,2.529,4.046,6.111,7.533c3.084,3,7.344,6.097,10.601,7.708
				c2.357,1.166,5.298,1.808,8.28,1.808c8.233,0,14.299-4.589,15.831-11.977c2.008-9.688-4.118-15.084-8.894-16.452
				c-1.56-0.57-10.898-3.937-18.36-5.49c-1.186-0.247-2.239-0.478-3.175-0.683C124.54,183.564,122.637,183.148,120.954,183.148
				L120.954,183.148z"/>
		</g>
	</g>
	<polygon id="tooth-gap-3" display="inline" fill="#5D5E5E" points="131.377,198.355 133.457,190.424 126.092,188.148 
		124.645,195.625 	"/>
	<g id="pencil-group-3" display="inline">
		<polygon fill="#F37F8F" stroke="#5D5E5E" stroke-width="4.75" stroke-miterlimit="10" points="243.899,87.856 235.649,96.017 
			229.229,89.596 237.479,81.437 		"/>
		<polygon fill="#808285" stroke="#5D5E5E" stroke-width="4.75" stroke-linejoin="round" stroke-miterlimit="10" points="
			235.649,96.017 230.67,100.926 224.26,94.506 229.229,89.596 		"/>
		
			<path id="pencil-shaft-3" fill="#FBB040" stroke="#5D5E5E" stroke-width="4.75" stroke-linejoin="round" stroke-miterlimit="10" d="
			M230.67,100.926l-33.551,33.17c-1.369-0.79-2.689-1.86-3.8-3.3c-0.89-1.14-1.609-2.35-2.189-3.57l33.13-32.72L230.67,100.926z"/>
	</g>
	
		<path display="inline" fill="none" stroke="#5D5E5E" stroke-width="4.75" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
		M207.529,136.276c0,0-5.56,0.64-10.41-2.18l-5.989-6.87c-2.78-5.71-2.601-11.58-2.601-11.58"/>
	<path display="inline" fill="#DA5559" d="M217.05,197.12c-0.26,0.45-0.47,0.77-0.649,0.99c-1.051-1.561-2.17-5.53-3.08-10.74
		c4.989-10.3,9.02-21.4,10.779-28.74c1.431-5.94,0.4-10.44-2.43-13.14c2.3,0.74,5.08,2.25,6.9,5.33
		C232.01,156.67,232.81,169.44,217.05,197.12z"/>
	<path display="inline" fill="#E5CBBE" d="M212.18,200.73c-9.06,20.369-29.739,33.449-53.12,33.449c-9.37,0-18.21-2.13-26.04-5.92
		c-0.21-0.189-0.31-0.3-0.31-0.3c40.69,16.75,70.981-22.396,76.901-33.916C210.302,196.694,211.16,199.08,212.18,200.73z"/>
</g>
</svg>

  
</body>
              
            
!

CSS

              
                body{
  background: #3badde;
}

svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%,-60%);
  transform: scale(2.5);
  // #pencil-group-1{
  //   transform: translate(28px,-28px)
  // }
  #face-movement-group, #pencil-movement-group{
    line, path{
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
    }
  }
  #hair-line-group path{
    opacity:0;
  }
  #outer-mouth-2{
    opacity: 0;
  }
}


              
            
!

JS

              
                $(document).ready(function() {

  MorphSVGPlugin.convertToPath("#pencil-shaft-1");
MorphSVGPlugin.convertToPath("#outer-mouth-2");
  

var biGuy = new TimelineMax({
  repeat:-1
});
  // function biGuyAnim(){
    biGuy
    .to("#pencil-group-1", .28, {
      x: "-28px",
      y: "28px",
      // autoAlpha: '1',
      ease: Power3.easeIn
    }, '-=.2')
    .to("#pencil-point-1", .29, {
      autoAlpha: '0',
      x: "28px",
      y: "-28px",
      ease: Power3.easeIn
    }, '-=.1')
    .to("#pencil-top-1", .29, {
      x: "-22px",
      y: "22px"
    }, '-=.29')
    .to("#pencil-shaft-1", .29, {
      x: "28px",
      y: "-28px",
      morphSVG: "#pencil-shaft-3"
    }, '-=.29')

  //hair lines
  .fromTo("#hair-line-group > #top", .12, {
      drawSVG: "90% 90%",
      autoAlpha: '0'
    }, {
      drawSVG: '100% 0%',
      autoAlpha: '1',
      ease: Power2.easeInOut
    }, '-=.162')
    .fromTo("#hair-line-group > #bottom", .12, {
      drawSVG: '0%'
    }, {
      drawSVG: "0% 100%",
      autoAlpha: '1',
      ease: Power2.easeInOut
    }, '-=.18')
    .to("#eyebrow-1L", .13, {
      morphSVG: "#eyebrow-2L",
      ease: Power4.easeOut
    }, '-=.11')
    .to("#eyebrow-1R", .13, {
      morphSVG: "#eyebrow-2R",
      ease: Power4.easeOut
    }, '-=.11')
    .to("#inner-mouth-1 path", .15, {
      morphSVG: "#inner-mouth-2",
      ease: Power4.easeIn
    }, '-=.21')
    .to("#outer-mouth-1", .15, {
      autoAlpha: '0',
      ease: Power4.easeIn
    }, '-=.21')
    .to("#outer-mouth-2", .15, {
      autoAlpha: '1',
      ease: Power4.easeIn
    }, '-=.21')
    .to("#teeth-1", .15, {
      morphSVG: "#teeth-2",
      ease: Power4.easeIn
    }, '-=.15')

  //movement lines
   .fromTo("#pencil-movement-group line", .3, {
      drawSVG: "0%",
      autoAlpha: '0'
    }, {
      drawSVG: '100% 0%',
      autoAlpha: '.2',
      x: '-18px',
      y: '18px',
      ease: Power4.easeOut
    }, '-=.26')
    
    
    
    .fromTo("#face-movement-group > path", .3, {
      drawSVG: '0%'
    }, {
      drawSVG: "0% 100%",
      autoAlpha: '.2',
      ease: Power4.easeOut
    }, '-=.26')

  .to("#pencil-movement-group line", .1, {
      drawSVG: "0% 0%",
      autoAlpha: '0',
      ease: Power3.easeIn
    }, '+=.08')
    .to("#face-movement-group > path", .1, {
      drawSVG: '0%',
      ease: Power3.easeIn
    }, '-=.08')

  //face bounce
  .to("svg", .22, {
      scale: "2.6",
      ease: Power2.easeOut
    }, '-=.36')

  //third face
  .to("#eyebrow-1L", .08, {
      morphSVG: "#eyebrow-3L",
      ease: Power2.easeOut
    }, '+=.01')
    .to("#eyebrow-1R", .08, {
      morphSVG: "#eyebrow-3R",
      ease: Power2.easeOut
    }, '-=.08')
    .to("#outer-mouth-2", .08, {
      autoAlpha: '0',
      ease: Power2.easeOut
    }, '-=.08')
    .to("#inner-mouth-1 path", .08, {
      morphSVG: "#inner-mouth-3 path",
      ease: Power2.easeOut
    }, '-=.08')
    .to("#teeth-1", .1, {
      morphSVG: "#teeth-3",
      ease: Power2.easeOut
    }, '-=.1')
    .to("#outer-mouth-1", .1, {
      autoAlpha: '1',
      morphSVG: "#outer-mouth-3 path",
      ease: Power2.easeOut
    }, '-=.1')
    .to("svg", .22, {
      scale: "2.5",
      ease: Power2.easeIn
    }, '-=.22');


});
              
            
!
999px

Console