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. 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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <div class="svgWrap">
<svg version="1.1" id="cat-god" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="40vw" height="30.4vw" viewBox="0 0 172.9 131.4" style="enable-background:new 0 0 172.9 131.4;" xml:space="preserve"
	>
<style type="text/css">
	.st0{fill:#E9E4EA;}
	.st1{fill:#040E41;}
	.st2{fill:#EDE8E2;}
	.st3{fill:#FDD64A;}
	.st4{fill:#221714;}
	.st5{fill:#060001;}
	.st6{fill:#D4394F;}
	.st7{fill:#D43855;}
	.st8{fill:#F7B3C2;}
	.st9{fill:#ED71A3;}
  .st10{fill:#CFCAE2;}
  .st11{fill:#ffffff;}

</style>
<defs>
  <filter id="goo" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -10" result="cm" />
  </filter>

  <!-- <filter id = "lightning">
      <feSpecularLighting result="specOut"
          specularExponent="100" lighting-color="#D4394E">
        <fePointLight id="fePointLight" x="86.3" y="15.8" z="10"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="specOut"
          operator="arithmetic" k1="1" k2="1" k3="1" k4="0"/>
  </filter> -->

  <filter id="breath" x="-50%" y="-50%" width="200%" height="200%">
      <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"/>
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G"/>
  </filter>

  <circle id="bubbleL1" class="st1" cx="122.8" cy="55" r="4"/>
  <circle id="bubbleL2" class="st1" cx="141.9" cy="52" r="3.5"/>
  <circle id="bubbleL3" class="st1" cx="161" cy="59" r="3.5"/>
  <circle id="bubbleR1" class="st1" cx="50" cy="55" r="4"/>
  <circle id="bubbleR2" class="st1" cx="31" cy="52" r="3.5"/>
  <circle id="bubbleR3" class="st1" cx="12" cy="59" r="3.5"/>
  <!-- <circle id="bubble-l-3" class="st9" cx="150" cy="55" r="4"/> -->
  <circle id="breathL" opacity="0.2" class="st11" cx="95" cy="90" r="3.5"/>
  <circle id="breathR" opacity="0.2" class="st11" cx=76 cy="90" r="3"/>

  <path id="eyeSKin-l-close" class="st4" d="M34.5,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
  C44.6,61.4,39.5,57.6,34.5,57.6z"/>
  <path id="eyeSKin-r-close" class="st4" d="M138.8,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
  C148.9,61.4,143.7,57.6,138.8,57.6z"/>
</defs>


<path id="bg" class="st0" d="M162.1,131.4H10.8c-6,0-10.8-4.8-10.8-10.8V10.8C0,4.8,4.8,0,10.8,0h151.2c6,0,10.8,4.8,10.8,10.8
	v109.8C172.9,126.6,168,131.4,162.1,131.4z"/>
<path id="ec-r" class="st1" d="M150.7,55.7c-4.2-1-6-6.4-3.5-10.1c0.6-0.9-6.5,2.3-9.8,5.2c-2.3,2-5,2.8-7.2,1.4
	c-2.3-1.5-1.8-3.9-1.5-6.2c0.2-1.7,0.5-3.4,0.7-5.1c-0.8-0.1-1.4,0-1.9,0.4c0,0-16.7,13.9-9.5,40.5c0.7,2.7,1.8,5.4,4.2,7.2
	c-1.4-5.6,2.4-6.9,6.4-6.4c2.6,0.3,5.1,0.6,7.7,0.8c7.2,0.4,13.4-2.1,17.9-7.8c3.8-4.8,6.6-10.4,10-15.5c2.4-3.5,5-6.8,7.6-10
	c0.3-0.4,0.7-0.8,1.1-1.2v-1.4c-3.4,2.1-6.9,4.3-10.3,6.4C158.9,56.1,154.8,56.7,150.7,55.7z"/>
<path id="ec-l" class="st1" d="M0.9,49.9c2.6,3.3,5.3,6.6,7.6,10c3.4,5.1,6.2,10.7,10,15.5c4.5,5.7,10.7,8.2,17.9,7.8
	c2.6-0.1,5.1-0.4,7.7-0.8c3.9-0.5,7.8,0.8,6.4,6.4c2.4-1.8,3.4-4.5,4.2-7.2c7.2-26.6-9.5-40.5-9.5-40.5c-0.4-0.4-1.1-0.4-1.9-0.4
	c0.2,1.7,0.5,3.4,0.7,5.1c0.3,2.3,0.8,4.7-1.5,6.2c-2.1,1.4-4.8,0.6-7.2-1.4c-3.4-2.9-10.4-6.1-9.8-5.2c2.5,3.7,0.7,9.1-3.5,10.1
	c-4.2,1-8.2,0.4-11.9-2C6.7,51.6,3.4,49.5,0,47.5V49C0.3,49.3,0.6,49.6,0.9,49.9z"/>

  <g id="eye-r">
	
		<ellipse transform="matrix(0.9871 -0.1602 0.1602 0.9871 -9.0334 23.1013)" class="st2" cx="138.8" cy="67.6" rx="12.4" ry="12.4"/>
	<g>
		<path class="st3" d="M138.8,76.7c-5,0-9.2-4.1-9.2-9.2c0-5,4.1-9.2,9.2-9.2c5,0,9.2,4.1,9.2,9.2C147.9,72.6,143.8,76.7,138.8,76.7
			z"/>
		<g>
			<path class="st4" d="M138.8,59.9c4.3,0,7.7,3.5,7.7,7.7s-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7S134.5,59.9,138.8,59.9
				 M138.8,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6C149.4,61.7,144.6,57,138.8,57L138.8,57
				z"/>
		</g>
	</g>
	<g id="eye-r-0">
		<path class="st5" d="M135.8,67.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9c0-1.6-1.3-2.9-2.9-2.9
			C137.2,64.7,135.8,66,135.8,67.6z"/>
		<path class="st4" d="M138.8,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4C142.2,69.5,140.6,71,138.8,71z
			 M138.8,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C141.2,66.2,140.1,65.1,138.8,65.1z"/>
	</g>
</g>
<path class="st6" d="M99.1,34.3c-0.7,0.8-1,1.2-1.4,1.6c-3.9,4.1-5.4,8.8-4.4,14.4c0.5,2.6,0.9,5.2,1.1,7.9c0.1,1.4-0.2,2.8-0.7,4.1
	c-1.2,3.1-4.1,3.6-6.4,1.1c-0.3-0.3-0.5-0.6-0.9-1.1c-0.9,2.2-2.5,3-4.6,2.5c-2.1-0.5-3.2-2.1-3.4-4.1c-0.1-2,0-4,0.3-5.9
	c0.5-3.8,1-7.7-0.4-11.4c-0.7-1.9-1.9-3.6-3-5.4c-0.5-0.8-1.1-1.5-1.7-2.2c0.2-0.2,0.3-0.3,0.5-0.5c1.2,1.2,2.5,2.3,3.5,3.7
	c3,4.3,3.9,9,2.9,14.2c-0.3,1.6-0.5,3.3-0.8,4.9c0,0.2-0.1,0.5-0.1,0.7c0,2.1,1,3.8,2.4,4.1c1.5,0.2,2.2-0.6,2.6-1.8
	c0.7-2.3,0-4-2-4.8c-0.2-0.1-0.4-0.2-0.7-0.4c2.2-0.7,3.2,0.1,4.3,3.6c0.8-2.1,1.4-3.9,3.6-4c-0.7,1.3-1.5,2.5-1.9,3.8
	c-0.5,1.5,0.8,3.2,2.2,3.5c1.4,0.3,2.5-0.6,2.8-2.5c0.2-1.1,0.1-2.2,0-3.3c-0.4-2.8-0.7-5.6-1.3-8.4C90.7,44.1,94.4,36.3,99.1,34.3z
	"/>
<path id="eb-l-2" class="st3" d="M21.9,44.9c0-0.1-0.1-0.3-0.1-0.4c0,0,0,0,0-0.1c-1.5-3.2,0.4-5.5,4.6-4c1.4,0.5,2.4,0.8,3.1,1.1
	c0.3,0.1,0.7,0.2,1,0.4c1.1,0.5,2,1.2,2.9,2c0,0,0,0,0,0c2.7,2.1,7.6,2.8,7.3-0.2c0,0,0,0,0,0c-0.2-1.2-0.3-2.4-0.4-3.5
	c-0.5-9.3-5.2-15.6-13.6-19.4c-4.8-2.2-12.1-0.2-15.8,3.9c-3,3.3-3.8,7.5-4.2,11.7C6.1,43,8.7,49.7,15.1,52c4.1,1.5,7.4-0.5,7.4-4.8
	C22.5,46.4,22.1,45.6,21.9,44.9z"/>
<g id="eye-dot-l">
	<path id="eye-dot-l-2" class="st6" d="M27.7,27.3c0,1.3-1.1,2.4-2.4,2.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4
		C26.7,24.9,27.7,26,27.7,27.3z"/>
	<path id="eye-dot-l-5" class="st6" d="M34.2,34.9c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
		C33.1,32.4,34.2,33.5,34.2,34.9z"/>
	<circle id="eye-dot-l-1" class="st6" cx="13.7" cy="30.6" r="2.5"/>
	<path id="eye-dot-l-3" class="st6" d="M23,34.3c0,1.2-0.9,2.1-2.1,2.1c-1.2,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1
		C22.1,32.2,23,33.1,23,34.3z"/>
	<circle id="eye-dot-l-4" class="st6" cx="13.7" cy="42.3" r="2.5"/>
</g>
<path id="eb-r-2" class="st3" d="M165.9,36.4c-0.4-4.2-1.1-8.4-4.2-11.7c-3.7-4.1-11-6.1-15.8-3.9c-8.4,3.8-13.1,10-13.6,19.4
	c-0.1,1.2-0.2,2.3-0.4,3.5c0,0,0,0,0,0c-0.3,3,4.6,2.3,7.3,0.2c0,0,0,0,0,0c0.9-0.8,1.8-1.5,2.9-2c0.3-0.1,0.7-0.3,1-0.4
	c0.8-0.3,1.7-0.6,3.1-1.1c4.1-1.5,6,0.8,4.6,4c0,0,0,0,0,0.1c0,0.1,0,0.3-0.1,0.4c-0.3,0.8-0.7,1.5-0.7,2.3c0,4.4,3.3,6.3,7.4,4.8
	C164,49.7,166.5,43,165.9,36.4z"/>
<g id="eye-dot-r">
	<path id="eye-dot-r-2" class="st6" d="M144.9,27.3c0,1.3,1.1,2.4,2.4,2.4c1.3,0,2.4-1.1,2.4-2.4c0-1.3-1.1-2.4-2.4-2.4
		C146,24.9,144.9,26,144.9,27.3z"/>
	<path id="eye-dot-r-5" class="st6" d="M138.4,34.9c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5
		C139.6,32.4,138.4,33.5,138.4,34.9z"/>
	<circle id="eye-dot-r-1" class="st6" cx="159" cy="30.6" r="2.5"/>
	<path id="eye-dot-r-3" class="st6" d="M149.6,34.3c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1c0-1.2-0.9-2.1-2.1-2.1
		C150.6,32.2,149.6,33.1,149.6,34.3z"/>
	<circle id="eye-dot-r-4" class="st6" cx="159" cy="42.3" r="2.5"/>
</g>
<g id="eye-l">
	
	<ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 -39.2087 85.6189)" class="st2" cx="34.5" cy="67.6" rx="12.4" ry="12.4"/>
	<g id="eyeBall-l">
		<ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.6855 44.1805)" class="st3" cx="34.5" cy="67.6" rx="9.2" ry="9.2"/>
		<g>
			<path class="st4" d="M34.5,59.9c4.3,0,7.7,3.5,7.7,7.7c0,4.3-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7
				C26.8,63.3,30.2,59.9,34.5,59.9 M34.5,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6
				C45.1,61.7,40.3,57,34.5,57L34.5,57z"/>
		</g>
	
    <g id="eye-l-0">
      <path class="st5" d="M37.4,67.6c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9C36.1,64.7,37.4,66,37.4,67.6
        z"/>
      <path class="st4" d="M34.5,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C37.9,69.5,36.4,71,34.5,71z
        M34.5,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C36.9,66.2,35.8,65.1,34.5,65.1z"/>
    </g>
  </g>
</g>
<g id="sun">
	<circle id="sun0" opacity=1 class="st7" cx="86.3" cy="15.8" r="12.1"/>
	<path id="sun1" class="st8" d="M86.3,28.8c-7.2,0-13.1-5.9-13.1-13.1c0-7.2,5.9-13.1,13.1-13.1c7.2,0,13.1,5.9,13.1,13.1
		C99.4,23,93.5,28.8,86.3,28.8z M86.3,4.7c-6.1,0-11.1,5-11.1,11.1s5,11.1,11.1,11.1c6.1,0,11.1-5,11.1-11.1S92.4,4.7,86.3,4.7z"/>
</g>
<path class="st9" d="M100.4,80.3c-0.9-0.1-3.1,0.4-6-3.1c-2.8-3.3-7.7-3.3-7.7-3.3s-5,0-7.7,3.3c-2.9,3.4-5.1,3-6,3.1
	c-3,0.4-4.8,2.4-4.8,6.9c0,4,11.2,10.3,18.6,5.8c7.4,4.5,18.6-1.8,18.6-5.8C105.2,82.7,103.4,80.6,100.4,80.3z"/>
<g>
	<path class="st1" d="M105.3,93.1c1.1-1.1,2-2.4,2.5-3.9c0.2-0.7,0.3-1.5,0.3-2.2c-0.1-0.8-0.1-1.5-0.3-2.3
		c-0.3-1.5-0.8-2.9-1.7-4.1c-0.8-1.2-2-2-3.3-2.6c-0.7-0.3-1.4-0.4-2.1-0.5c-0.4-0.1-0.7,0-1.1-0.1c-0.4,0-1.1-0.1-1.5-0.4
		c-0.9-0.5-1.5-1.1-2.1-1.7c-0.5-0.5-1-1-1.6-1.4c-2.3-1.7-5.3-2.6-8.1-2.7c-2.9,0.1-5.9,0.9-8.1,2.7c-0.6,0.4-1.1,0.9-1.6,1.4
		c-0.6,0.6-1.1,1.3-2.1,1.7c-0.4,0.2-1.1,0.4-1.5,0.4c-0.4,0-0.7,0-1.1,0.1c-0.7,0.1-1.4,0.3-2.1,0.5c-1.3,0.5-2.5,1.4-3.3,2.5
		c-0.8,1.2-1.4,2.6-1.7,4.1c-0.2,0.7-0.2,1.5-0.3,2.3c-0.1,0.7,0.1,1.5,0.3,2.2c0.5,1.4,1.4,2.7,2.5,3.9c-1.2-1-2.3-2.2-3-3.7
		c-0.3-0.7-0.5-1.6-0.6-2.4c0-0.8,0-1.6,0.1-2.4c0.2-1.6,0.6-3.2,1.5-4.7c0.9-1.4,2.3-2.6,3.8-3.3c0.8-0.4,1.6-0.6,2.4-0.8
		c0.4-0.1,0.9-0.1,1.3-0.1c0.3,0,0.5-0.1,0.7-0.2c0.5-0.3,1-0.8,1.4-1.3c0.6-0.6,1.1-1.3,1.8-1.8c1.3-1,2.9-1.8,4.4-2.3
		c1.6-0.5,3.2-0.8,4.9-0.8c1.7,0,3.3,0.3,4.9,0.8c1.6,0.5,3.1,1.3,4.4,2.3c0.7,0.5,1.3,1.1,1.8,1.8c0.5,0.6,1,1.1,1.4,1.3
		c0.2,0.1,0.4,0.2,0.7,0.2c0.4,0,0.9,0,1.3,0.1c0.8,0.1,1.7,0.4,2.4,0.7c1.6,0.7,2.9,1.8,3.8,3.3c0.9,1.4,1.4,3.1,1.5,4.7
		c0.1,0.8,0.1,1.6,0.1,2.4c0,0.8-0.2,1.6-0.6,2.4C107.6,90.9,106.5,92.1,105.3,93.1z"/>
</g>
<path id="mouth" class="st7" d="M100.8,116.3c-13.3-4.7-14.1-18-14.1-18s-0.8,13.3-14.1,18c-13.3,4.7-21.6,4.8-27.4-3.4
	c0,0,0.5,8,13.1,8.8c12.6,0.8,20.5-8.8,28.4-8.5c7.9-0.3,15.8,9.3,28.4,8.5c12.6-0.8,13.1-8.8,13.1-8.8
	C122.4,121.1,114.1,121.1,100.8,116.3z"/>
<path class="st1" d="M99.4,85.9c-0.9-0.8-4.5-2.7-6.7,1.9c-2.2,4.7-6,4.2-6,4.2s-3.8,0.5-6-4.2c-2.2-4.7-5.8-2.7-6.7-1.9
	c-0.9,0.8-3.1,4.6,4.9,9.1c8,4.5,7.9,9.2,7.9,9.2s-0.1-4.7,7.9-9.2C102.5,90.5,100.3,86.7,99.4,85.9z"/>
<path class="st1" d="M108.9,123.4c-5,1-9.7,0.6-14.1-2.2c-0.6-0.4-1.2-0.7-1.9-0.9c-2.1-0.7-4.2-1.2-6.3-1.3c-2.1,0-4.2,0.5-6.3,1.3
	c-0.7,0.2-1.3,0.5-1.9,0.9c-4.4,2.9-9.1,3.2-14.1,2.2c0,0.2-0.1,0.4-0.1,0.6c1.9,0.5,3.8,1.1,5.8,1.3c4.2,0.6,7.8-1.4,11.4-3.2
	c1.7-0.9,3.5-1.2,5.2-1c1.8-0.2,3.5,0.1,5.2,1c3.6,1.8,7.2,3.8,11.4,3.2c2-0.3,3.9-0.9,5.8-1.3C109,123.8,109,123.6,108.9,123.4z"/>
<path class="st1" d="M105.5,127.1c-0.9,0.2-1.8,0.3-2.7,0.6c-3,0.9-5.9,0.4-8.4-1.2c-2.6-1.7-5.2-2.2-7.7-2c-2.5-0.2-5.1,0.4-7.7,2
	c-2.5,1.6-5.4,2.1-8.4,1.2c-0.9-0.3-1.8-0.4-2.7-0.6c-0.1,0.2-0.1,0.3-0.2,0.5c1.4,0.6,2.8,1.5,4.3,1.8c2.7,0.5,5.3,0.3,7.8-0.9
	c2.2-1.1,4.5-1.5,6.8-1.5c2.3-0.1,4.6,0.4,6.8,1.5c2.5,1.2,5.2,1.5,7.8,0.9c1.5-0.3,2.9-1.2,4.3-1.8
	C105.6,127.4,105.6,127.2,105.5,127.1z"/>
<g id="beard-l-1">
	<g id="beard-root-l-1">
		<path class="st1" d="M73.2,104.4c-0.2,0-0.4,0-0.6-0.1c-1.1-0.4-1.6-1.8-1.1-3.1c0.4-1.1,1.3-1.8,2.2-1.8c0.2,0,0.4,0,0.6,0.1
			c1.1,0.4,1.6,1.8,1.1,3.1C75.1,103.7,74.2,104.4,73.2,104.4z"/>
		<path class="st10" d="M73.7,100.1c0.1,0,0.3,0,0.4,0.1c0.8,0.3,1.1,1.3,0.7,2.2c-0.3,0.8-1,1.3-1.6,1.3c-0.1,0-0.3,0-0.4-0.1
			c-0.8-0.3-1.1-1.3-0.7-2.2C72.4,100.6,73.1,100.1,73.7,100.1 M73.7,98.8L73.7,98.8c-1.2,0-2.4,0.9-2.8,2.2
			c-0.6,1.7,0.1,3.4,1.5,3.9c0.3,0.1,0.6,0.1,0.8,0.1c1.2,0,2.4-0.9,2.8-2.2c0.6-1.7-0.1-3.4-1.5-3.9C74.3,98.8,74,98.8,73.7,98.8
			L73.7,98.8z"/>
	</g>
	<path id="beard-tip-l-1" class="st1" d="M72.8,102.3c-0.9-1.7-2.2-3.3-3.6-4.7c-1.4-1.4-3-2.7-4.7-3.8c-1.7-1.1-3.5-2-5.5-2.8
		c-0.9-0.4-1.9-0.7-2.9-1c-1-0.3-2-0.5-3-0.8c1,0.2,2,0.4,3,0.6c1,0.3,2,0.5,3,0.9c2,0.6,3.9,1.5,5.7,2.5c1.8,1,3.5,2.2,5.1,3.6
		c1.6,1.4,3,2.9,4.1,4.9L72.8,102.3z"/>
</g>
<g id="beard-l-2">
	<g id="beard-root-l-2">
		<path class="st1" d="M66.2,112.7c-0.3,0-0.5,0-0.8-0.1c-1.2-0.4-1.8-1.9-1.4-3.2c0.4-1,1.3-1.7,2.3-1.7c0.3,0,0.5,0,0.8,0.1
			c0.6,0.2,1.1,0.7,1.3,1.3c0.2,0.6,0.2,1.3,0,1.9C68.2,112,67.3,112.7,66.2,112.7z"/>
		<path class="st10" d="M66.5,108.3c0.2,0,0.3,0,0.5,0.1c0.9,0.3,1.3,1.3,0.9,2.3c-0.3,0.8-1,1.3-1.7,1.3c-0.2,0-0.3,0-0.5-0.1
			c-0.9-0.3-1.3-1.3-0.9-2.3C65.1,108.8,65.8,108.3,66.5,108.3 M66.5,106.9L66.5,106.9c-1.3,0-2.5,0.9-3,2.2c-0.3,0.8-0.3,1.7,0,2.4
			c0.3,0.8,1,1.4,1.8,1.7c0.3,0.1,0.7,0.2,1,0.2c1.3,0,2.5-0.9,3-2.2c0.6-1.7-0.2-3.6-1.8-4.1C67.2,106.9,66.8,106.9,66.5,106.9
			L66.5,106.9z"/>
	</g>
	<path id="beard-tip-l-2" class="st1" d="M65.9,110.8c-3.2-2.6-6.8-4.9-10.5-7c-3.7-2.1-7.5-3.9-11.5-5.3c-4-1.5-8.1-2.5-12.2-3.1
		c-4.2-0.6-8.4-0.6-12.7-0.1c4.2-0.6,8.5-0.8,12.7-0.3c4.2,0.5,8.4,1.4,12.4,2.8c4,1.4,8,3.1,11.7,5.1c3.8,2,7.4,4.2,10.9,6.8
		L65.9,110.8z"/>
</g>
<g id="beard-l-4">
	<g id="beard-root-l-4">
		<path class="st1" d="M54.7,110.2c-0.2,0-0.3,0-0.5-0.1c-0.5-0.2-0.8-0.6-1-1.1c-0.1-0.5-0.1-1,0.1-1.5c0.3-0.9,1.1-1.5,1.9-1.5
			c0.2,0,0.3,0,0.5,0.1c0.9,0.3,1.3,1.5,0.9,2.6C56.2,109.6,55.5,110.2,54.7,110.2z"/>
		<path class="st10" d="M55.2,106.5c0.1,0,0.2,0,0.3,0.1c0.6,0.2,0.9,1.1,0.6,1.9c-0.3,0.7-0.8,1.2-1.3,1.2c-0.1,0-0.2,0-0.3-0.1
			c-0.6-0.2-0.9-1.1-0.6-1.9C54.1,107,54.7,106.5,55.2,106.5 M55.2,105.4c-1,0-2,0.8-2.4,1.9c-0.5,1.4,0,2.9,1.2,3.3
			c0.2,0.1,0.4,0.1,0.7,0.1c1,0,2-0.8,2.4-1.9c0.5-1.4,0-2.9-1.2-3.3C55.6,105.5,55.4,105.4,55.2,105.4L55.2,105.4z"/>
	</g>
	<path id="beard-tip-l-4" class="st1" d="M54.7,108.7c-2.2-1.1-4.7-2-7.1-2.7c-2.4-0.7-4.9-1.3-7.5-1.7c-1.3-0.2-2.5-0.3-3.8-0.5
		c-1.3-0.1-2.5-0.2-3.8-0.1c-2.6-0.1-5.1,0.2-7.7,0.6c2.5-0.5,5.1-0.8,7.6-0.9c1.3-0.1,2.6,0,3.9,0c1.3,0.1,2.6,0.1,3.9,0.3
		c2.6,0.3,5.1,0.7,7.6,1.4c2.5,0.6,5,1.4,7.4,2.5L54.7,108.7z"/>
</g>
<g id="beard-l-3">
	<g id="beard-root-l-3">
		<path class="st1" d="M58.9,102.5c-0.2,0-0.4,0-0.6-0.1c-0.5-0.2-0.9-0.7-1.1-1.3c-0.2-0.5-0.1-1.2,0.1-1.8
			c0.4-1.1,1.3-1.8,2.2-1.8c0.2,0,0.4,0,0.6,0.1c1.1,0.4,1.5,1.7,1,3C60.7,101.8,59.8,102.5,58.9,102.5z"/>
		<path class="st10" d="M59.5,98.3c0.1,0,0.2,0,0.3,0.1c0.7,0.3,1,1.2,0.6,2.2c-0.3,0.8-0.9,1.3-1.6,1.3c-0.1,0-0.2,0-0.3-0.1
			c-0.7-0.3-1-1.2-0.6-2.2C58.2,98.8,58.9,98.3,59.5,98.3 M59.5,97L59.5,97c-1.2,0-2.3,0.9-2.8,2.2c-0.3,0.7-0.3,1.5-0.1,2.2
			c0.2,0.8,0.8,1.4,1.5,1.7c0.3,0.1,0.5,0.1,0.8,0.1c1.2,0,2.3-0.9,2.8-2.2c0.6-1.7,0-3.3-1.4-3.9C60,97,59.8,97,59.5,97L59.5,97z"
			/>
	</g>
	<path id="beard-tip-l-3" class="st1" d="M58.2,99.8c-0.5-0.7-1.3-1.5-2.1-2.1c-0.8-0.7-1.7-1.2-2.6-1.8c-1.8-1.1-3.7-2-5.7-2.8
		c-2-0.8-4-1.4-6.1-2l-3.1-0.7l-3.2-0.6l3.2,0.4l3.2,0.6c2.1,0.5,4.2,0.9,6.3,1.6c2.1,0.7,4.1,1.5,6,2.5c1,0.5,1.9,1.1,2.8,1.7
		c0.9,0.7,1.8,1.3,2.6,2.3L58.2,99.8z"/>
</g>
<g id="beard-r-1">
	<g id="beard-root-r-1">
		<path class="st1" d="M99.4,104.4c-0.9,0-1.8-0.7-2.2-1.8c-0.5-1.3,0-2.7,1.1-3.1c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.8,0.7,2.2,1.8
			c0.5,1.3,0,2.7-1.1,3.1C99.8,104.4,99.6,104.4,99.4,104.4L99.4,104.4z"/>
		<path class="st10" d="M98.9,100.1c0.6,0,1.3,0.5,1.6,1.3c0.3,1,0,2-0.7,2.2c-0.1,0-0.3,0.1-0.4,0.1c-0.6,0-1.3-0.5-1.6-1.3
			c-0.3-1,0-2,0.7-2.2C98.7,100.1,98.8,100.1,98.9,100.1 M98.9,98.8c-0.3,0-0.6,0-0.8,0.1c-1.4,0.5-2.1,2.3-1.5,3.9
			c0.5,1.3,1.6,2.2,2.8,2.2c0.3,0,0.6,0,0.8-0.1c1.4-0.5,2.1-2.3,1.5-3.9C101.3,99.7,100.2,98.8,98.9,98.8L98.9,98.8z"/>
	</g>
	<path id="beard-tip-r-1" class="st1" d="M98.5,101.6c1.2-1.9,2.6-3.4,4.1-4.9c1.6-1.4,3.3-2.6,5.1-3.6c1.8-1,3.7-1.9,5.7-2.5
		c1-0.4,2-0.6,3-0.9c1-0.2,2-0.4,3-0.6c-1,0.3-2,0.5-3,0.8c-1,0.4-2,0.6-2.9,1c-1.9,0.7-3.7,1.7-5.5,2.8c-1.7,1.1-3.3,2.4-4.7,3.8
		c-1.4,1.4-2.7,3.1-3.6,4.7L98.5,101.6z"/>
</g>
<g id="beard-r-2">
	<g id="beard-root-r-2">
		<path class="st1" d="M106.4,112.7c-1,0-2-0.7-2.3-1.7c-0.5-1.3,0.1-2.8,1.4-3.2c0.2-0.1,0.5-0.1,0.8-0.1c1,0,2,0.7,2.3,1.7
			c0.5,1.3-0.1,2.8-1.4,3.2C106.9,112.6,106.7,112.7,106.4,112.7L106.4,112.7z"/>
		<path class="st10" d="M106.2,108.3c0.7,0,1.4,0.5,1.7,1.3c0.3,1-0.1,2-0.9,2.3c-0.2,0.1-0.3,0.1-0.5,0.1c-0.7,0-1.4-0.5-1.7-1.3
			c-0.3-1,0.1-2,0.9-2.3C105.8,108.3,106,108.3,106.2,108.3 M106.2,106.9c-0.3,0-0.7,0.1-1,0.2c-1.6,0.6-2.4,2.4-1.8,4.1
			c0.5,1.3,1.7,2.2,3,2.2c0.3,0,0.7-0.1,1-0.2c1.6-0.6,2.4-2.4,1.8-4.1C108.7,107.8,107.5,106.9,106.2,106.9L106.2,106.9z"/>
	</g>
	<path id="beard-tip-r-2" class="st1" d="M105.8,109.6c3.5-2.6,7.1-4.8,10.9-6.8c3.8-2,7.7-3.7,11.7-5.1c4-1.4,8.2-2.3,12.4-2.8
		c4.2-0.5,8.5-0.3,12.7,0.3c-4.2-0.5-8.5-0.5-12.7,0.1c-4.2,0.6-8.3,1.7-12.2,3.1c-4,1.5-7.8,3.3-11.5,5.3c-3.7,2.1-7.2,4.4-10.5,7
		L105.8,109.6z"/>
</g>
<g id="beard-r-4">
	<g id="beard-root-r-4">
		<path class="st1" d="M118,110.2c-0.8,0-1.5-0.6-1.9-1.5c-0.4-1.1,0-2.3,0.9-2.6c0.2-0.1,0.3-0.1,0.5-0.1c0.8,0,1.5,0.6,1.9,1.5
			c0.2,0.5,0.2,1.1,0.1,1.5c-0.2,0.5-0.5,0.9-1,1.1C118.3,110.2,118.1,110.2,118,110.2z"/>
		<path class="st10" d="M117.5,106.5c0.5,0,1.1,0.5,1.3,1.2c0.3,0.8,0.1,1.7-0.6,1.9c-0.1,0-0.2,0.1-0.3,0.1c-0.5,0-1.1-0.5-1.3-1.2
			c-0.3-0.8-0.1-1.7,0.6-1.9C117.3,106.6,117.4,106.5,117.5,106.5 M117.5,105.4c-0.2,0-0.5,0-0.7,0.1c-1.2,0.4-1.7,1.9-1.2,3.3
			c0.4,1.1,1.4,1.9,2.4,1.9c0.2,0,0.5,0,0.7-0.1c1.2-0.4,1.7-1.9,1.2-3.3C119.4,106.2,118.5,105.4,117.5,105.4L117.5,105.4z"/>
	</g>
	<path id="beard-tip-r-4" class="st1" d="M117.4,107.5c2.4-1,4.9-1.8,7.4-2.5c2.5-0.6,5.1-1.1,7.6-1.4c1.3-0.2,2.6-0.2,3.9-0.3
		c1.3,0,2.6-0.1,3.9,0c2.6,0.1,5.1,0.4,7.6,0.9c-2.5-0.3-5.1-0.6-7.7-0.6c-1.3,0-2.6,0.1-3.8,0.1c-1.3,0.1-2.5,0.2-3.8,0.5
		c-2.5,0.4-5,0.9-7.5,1.7c-2.4,0.7-4.8,1.6-7.1,2.7L117.4,107.5z"/>
</g>
<g id="beard-r-3">
	<g id="beard-root-r-3">
		<path class="st1" d="M113.7,102.5c-0.9,0-1.8-0.7-2.2-1.8c-0.5-1.3,0-2.6,1-3c0.2-0.1,0.4-0.1,0.6-0.1c0.9,0,1.8,0.7,2.2,1.8
			c0.2,0.6,0.2,1.2,0.1,1.8c-0.2,0.6-0.6,1.1-1.1,1.3C114.1,102.5,113.9,102.5,113.7,102.5L113.7,102.5z"/>
		<path class="st10" d="M113.2,98.3c0.6,0,1.3,0.5,1.6,1.3c0.3,1,0.1,2-0.6,2.2c-0.1,0-0.2,0.1-0.3,0.1c-0.6,0-1.3-0.5-1.6-1.3
			c-0.3-1-0.1-2,0.6-2.2C112.9,98.3,113,98.3,113.2,98.3 M113.2,97c-0.3,0-0.5,0-0.8,0.1c-1.4,0.5-2,2.2-1.4,3.9
			c0.5,1.3,1.6,2.2,2.8,2.2c0.3,0,0.5,0,0.8-0.1c0.7-0.3,1.3-0.9,1.5-1.7c0.2-0.7,0.2-1.4-0.1-2.2C115.5,97.8,114.3,97,113.2,97
			L113.2,97z"/>
	</g>
	<path id="beard-tip-r-3" class="st1" d="M113.3,99c0.8-1,1.7-1.6,2.6-2.3c0.9-0.6,1.9-1.2,2.8-1.7c1.9-1,4-1.9,6-2.5
		c2.1-0.7,4.2-1.2,6.3-1.6l3.2-0.6l3.2-0.4l-3.2,0.6l-3.1,0.7c-2.1,0.6-4.1,1.2-6.1,2c-2,0.8-3.9,1.7-5.7,2.8
		c-0.9,0.6-1.8,1.1-2.6,1.8c-0.8,0.6-1.6,1.4-2.1,2.1L113.3,99z"/>
</g>
<path id="cheek-l" class="st1" d="M7.3,68.4c2.8,0.7,4.5,2.8,6.1,4.9c2.6,3.4,5.1,7,7.9,10.2c4,4.4,9.1,4.5,14.4,2.9
	c2.1-0.6,4.2-1.5,6.3-1.9c1-0.2,2.2,0.4,3.3,1c-4.1-0.3-7.4,1.7-10.9,3.1c-3.8,1.5-7.9,2.3-11.6-0.1c-3.4-2.1-5.9-5.1-7.8-8.7
	C12.9,75.8,11.5,71.1,7.3,68.4z"/>
<path id="cheek-r" class="st1" d="M165.3,68.4c-2.8,0.7-4.5,2.8-6.1,4.9c-2.6,3.4-5.1,7-7.9,10.2c-4,4.4-9.1,4.5-14.4,2.9
	c-2.1-0.6-4.2-1.5-6.3-1.9c-1-0.2-2.2,0.4-3.3,1c4.1-0.3,7.4,1.7,10.9,3.1c3.8,1.5,7.9,2.3,11.6-0.1c3.4-2.1,5.9-5.1,7.8-8.7
	C159.8,75.8,161.1,71.1,165.3,68.4z"/>
<path id="eb-l-1" class="st6" d="M42.2,29c-0.2-0.5-0.5-1-0.7-1.5c-0.2-0.4-0.4-0.9-0.6-1.3c-0.3-0.7-0.6-1.5-0.9-2.2
	c-0.6-1.4-1.2-2.9-1.9-4.3c-0.7-1.4-1.4-2.8-2.2-4.1c-0.8-1.4-1.6-2.7-2.5-4c-0.4-0.7-0.9-1.3-1.3-1.9c-0.8-1.2-1.8-2.3-2.7-3.3
	c-0.5-0.5-1-1-1.5-1.4c-1.1-0.9-2.2-1.7-3.4-2.4c-1.2-0.7-2.5-1.3-3.9-1.7c-0.7-0.2-1.4-0.5-2.1-0.6c-0.3-0.1-0.6-0.1-0.8-0.2
	C17.3,0,17.1,0,16.8,0s-0.5,0-0.7,0c-0.2,0-0.5,0.1-0.7,0.1c-0.7,0.2-1.3,0.5-1.9,0.9c-0.2,0.1-0.4,0.3-0.6,0.4
	c-1,0.7-1.8,1.5-2.6,2.4C9.6,4.7,8.9,5.7,8.3,6.6C7.7,7.5,7.1,8.5,6.5,9.5c-0.5,1-1.1,2-1.6,3c-0.4,0.8-0.8,1.6-1.2,2.4
	c-0.3,0.6-0.6,1.4-0.9,2.3c-0.2,0.6-0.4,1.2-0.6,1.8c-0.1,0.3-0.2,0.7-0.3,1c-0.4,1.4-0.7,3-1,4.7c-0.4,2.6-0.6,5.6-0.4,8.9
	c0,0.6,0.1,1.2,0.1,1.8c0,0.5,0.1,0.9,0.1,1.4c0,0.4,0.1,0.7,0.1,1.1c0,0.1,0,0.2,0,0.3c0.4,2.7,1,5.4,2.1,7.9c0,0,0,0,0,0
	c0.1,0.2,0.2,0.4,0.2,0.6c0.2,0,0.4,0,0.6-0.1C4,45,4.2,43.3,4.2,41.7c0.2-5.5,1.1-10.8,4.1-15.5c2.9-4.6,6.8-7.5,12.8-7.5
	c7.7,0,13.2,3.6,18.1,8.8c0.9,1,1.9,1.8,3.2,2.9c0-0.6,0.1-0.8,0-1c-0.1-0.1-0.1-0.2-0.2-0.4c0,0,0,0,0,0C42.2,29,42.2,29,42.2,29
	C42.2,29,42.2,29,42.2,29C42.2,29,42.2,29,42.2,29z"/>
<path id="eb-l-0" class="st8" d="M1,38.2c0-0.1,0-0.2,0-0.3c0-0.4-0.1-0.7-0.1-1.1c0-0.5-0.1-0.9-0.1-1.4c-0.1-0.6-0.1-1.2-0.1-1.8
	c-0.1-3.3,0.1-6.2,0.4-8.9c0.3-1.7,0.6-3.3,1-4.7c0.1-0.4,0.2-0.7,0.3-1c0.2-0.7,0.4-1.3,0.6-1.8c0.3-0.9,0.6-1.6,0.9-2.3
	c0.4-0.8,0.8-1.6,1.2-2.4c0.5-1,1-2,1.6-3c0.5-1,1.1-2,1.7-2.9c0.6-0.9,1.3-1.8,2.1-2.7C11.1,3,12,2.3,12.9,1.5
	c0.2-0.2,0.4-0.3,0.6-0.4c0.6-0.4,1.2-0.7,1.9-0.9c0.2-0.1,0.4-0.1,0.7-0.1c0.2,0,0.5,0,0.7,0s0.5,0,0.8,0.1c0.3,0,0.5,0.1,0.8,0.2
	c0.7,0.2,1.4,0.4,2.1,0.6c1.4,0.5,2.7,1.1,3.9,1.7c1.2,0.7,2.3,1.5,3.4,2.4c0.5,0.4,1,0.9,1.5,1.4c1,1,1.9,2.1,2.7,3.3
	c0.5,0.6,0.9,1.3,1.3,1.9c0.9,1.3,1.7,2.6,2.5,4c0.8,1.4,1.5,2.7,2.2,4.1c0.7,1.4,1.3,2.8,1.9,4.3c0.3,0.7,0.6,1.4,0.9,2.2
	c0.2,0.4,0.4,0.9,0.6,1.3c0.2,0.5,0.5,1,0.7,1.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-0.1-2.7-0.4-3.7-0.4-3.7
	c-2.3-6.1-4.7-11.4-8.3-16.5C30.6,4.7,27.2,1.8,23,0H12.1c-0.1,0.1-0.2,0.1-0.2,0.2c-4,3-6.1,7-8.1,10.9l-0.3,0.6
	c-0.4,0.7-0.7,1.4-1,2.1l-0.2,0.5C1.4,16,0.6,18.3,0,21v19c0.9,2.2,2.1,4,3.1,6C2,43.6,1.3,40.9,1,38.2z"/>
<path id="eb-r-1" class="st6" d="M171.7,37.9c0-0.4,0.1-0.7,0.1-1.1c0-0.5,0.1-0.9,0.1-1.4c0.1-0.6,0.1-1.2,0.1-1.8
	c0.4-8.8-1.7-15.3-3.2-18.7c-0.4-0.8-0.8-1.6-1.2-2.4c-0.5-1-1-2-1.6-3c-0.3-0.5-0.5-1-0.8-1.5c-0.9-1.5-1.8-2.9-3-4.1
	c-0.8-0.8-1.6-1.6-2.6-2.4c-0.2-0.2-0.4-0.3-0.6-0.4c-0.6-0.4-1.2-0.7-1.9-0.9c-0.4-0.1-0.9-0.2-1.4-0.2s-1,0.1-1.6,0.2
	c-0.7,0.2-1.4,0.4-2.1,0.6c-0.7,0.2-1.4,0.5-2,0.8c-3.9,1.7-7,4.4-9.5,8c-1.4,1.9-2.6,3.9-3.8,5.9c-1.5,2.7-2.9,5.5-4.1,8.4
	c-0.3,0.7-0.6,1.4-0.9,2.2c-0.2,0.4-0.4,0.9-0.6,1.3c-0.2,0.5-0.5,1-0.7,1.5c0,0.1-0.1,0.1-0.1,0.2c0,0.1-0.1,0.2-0.1,0.3
	c0,0,0,0,0,0c0,0,0,0,0,0c-0.1,0.2,0,0.4,0,1c1.2-1.1,2.3-1.9,3.2-2.9c4.8-5.2,10.3-8.9,18.1-8.8c6,0,9.9,2.9,12.8,7.5
	c3,4.7,3.9,10.1,4.1,15.5c0.1,1.6,0.2,3.3,0.3,4.9c0.2,0,0.4,0,0.6,0.1c0.1-0.2,0.2-0.4,0.2-0.6c1.1-2.5,1.7-5.2,2.1-7.9
	C171.7,38.1,171.7,38,171.7,37.9z"/>
<path id="eb-r-0" class="st8" d="M139.2,8.6c-3.6,5.1-6,10.4-8.3,16.5c0,0-0.3,1.1-0.4,3.7c0,0,0,0,0,0c0,0,0,0,0,0
	c0.2-0.5,0.5-1,0.7-1.5c0.2-0.4,0.4-0.9,0.6-1.3c0.3-0.7,0.6-1.5,0.9-2.2c1.2-2.9,2.6-5.7,4.1-8.4c1.2-2,2.4-4,3.8-5.9
	c2.5-3.6,5.7-6.2,9.5-8c0.6-0.3,1.3-0.6,2-0.8c0.7-0.2,1.4-0.5,2.1-0.6c0.6-0.2,1.1-0.2,1.6-0.2s1,0.1,1.4,0.2
	c0.7,0.2,1.3,0.5,1.9,0.9c0.2,0.1,0.4,0.3,0.6,0.4c1,0.7,1.8,1.5,2.6,2.4c1.1,1.3,2.1,2.7,3,4.1c0.3,0.5,0.6,1,0.8,1.5
	c0.5,1,1.1,2,1.6,3c0.4,0.8,0.8,1.6,1.2,2.4c1.5,3.5,3.6,10,3.2,18.7c0,0.6-0.1,1.2-0.1,1.8c0,0.5-0.1,0.9-0.1,1.4
	c0,0.4-0.1,0.7-0.1,1.1c0,0.1,0,0.2,0,0.3c-0.4,2.7-1,5.4-2.1,7.9c0,0,0,0,0,0c1.1-2.3,2.4-4.1,3.3-6.7V22.1
	c-0.7-3.2-1.6-5.8-2.4-7.8l-0.2-0.5c-0.3-0.7-0.7-1.4-1-2.1l-0.3-0.6c-2-3.9-4.1-8-8.1-10.9c-0.1-0.1-0.2-0.1-0.2-0.2h-10.8
  C145.5,1.8,142,4.7,139.2,8.6z"/>
<g id="eyeSKin">
	<path id="eyeSKin-l-open" class="st4" d="M34.5,57.6c-3.7,0.1-9.2,2.3-10,10c-0.3-0.2,3.6-8.8,10-9.2c6.7,0.1,10.7,8.9,9.9,9.2
		C44.1,60.8,38.9,57.3,34.5,57.6z"/>
	<path id="eyeSKin-r-open" class="st4" d="M138.7,57.6c-3.7,0.1-9.2,2.3-10,10c-0.3-0.2,3.6-8.8,10-9.2c6.7,0.1,10.7,8.9,9.9,9.2
		C148.4,60.8,143.1,57.3,138.7,57.6z"/>
</g>
<g class="bubbleWrap" filter="url(#goo)"></g>
<g class="breathWrap" filter="url(#breath)"></g>
</svg>
<div class="credits">
  <p>Designed by <a href="https://dribbble.com/shots/6544480-Chinese-Opera-Faces-89" target="_blank">Wang KongKong</a>. Animated by <a href="https://twitter.com/ChenXin_nth" target="_blank">Chen Xin</a></p>
</div>
</div>
              
            
!

CSS

              
                body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  background: no-repeat 50%/cover url("https://user-images.githubusercontent.com/45284685/62537388-dfb5be80-b882-11e9-952f-cb2b88f49425.jpeg");
  display: flex;
  justify-content: center;
  align-items: center;
}
svg {
  display: block;
  width: 40vw;
  height: 30.4vw;
}
.svgWrap {
  border-radius: 3vw;
  box-shadow: 0px 0px 5vw 2.4vw rgba(247,179,194,0.25), 
    3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
    0px 5vw 3vw -3vw rgba(216,157,170,0.9),
    inset 0px 0px 5vw 2.4vw rgba(247,179,194,0.3), 
    inset 3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
    inset 0px 5vw 2.7vw -3vw rgba(216,157,170,1);
}
.credits {
  position: fixed;
  bottom: 0;
  right: 0;
  font-size: 14px;
}
p {
  text-align: right;
  margin: 2px;
  color: #D4394F;
}
a {
  color: #040E41;
}


              
            
!

JS

              
                const xmlns = "http://www.w3.org/2000/svg";
const xlinkns = "http://www.w3.org/1999/xlink";

const bubbleWrap = document.querySelector(".bubbleWrap");
const breathWrap = document.querySelector(".breathWrap");
const fePointLight = document.querySelector("#fePointLight");
// let fePointLight_Z = fePointLight.z.animVal;
// console.log(fePointLight.z)

const masterTl = new TimelineMax();

// const animatedObject = {
//   fePointLightZ: 12,
// }

const leftEyeTl = new TimelineMax({paused: true});
const rightEyeTl = new TimelineMax({paused: true});
leftEyeTl.to("#eyeSKin-l-open", 0.06, {
  morphSVG:"#eyeSKin-l-close"
})
  .to("#eyeSKin-l-open", 0.06, {
  morphSVG:"#eyeSKin-l-open"
})
rightEyeTl.to("#eyeSKin-r-open", 0.06, {
  morphSVG:"#eyeSKin-r-close"
})
  .to("#eyeSKin-r-open", 0.06, {
  morphSVG:"#eyeSKin-r-open"
})

const id = setInterval(blinkEye, 1000);
function blinkEye() {
  if (Math.random() > 0.7) {
    leftEyeTl.restart();
    rightEyeTl.restart();
  }
}


// sun
// const tl = new TimelineMax({onUpdate: render, repeat: -1});
// tl.to(animatedObject, 8, {
//   fePointLightZ: 5,
//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
// })
// .to(animatedObject, 8, {
//   fePointLightZ: 12,
//   ease: CustomEase.create("custom", "M0,0 C0,0 0.037,0.772 0.04,0.782 0.04,0.77 0.084,-0.027 0.085,-0.053 0.094,-0.039 0.108,0.408 0.148,0.466 0.174,0.422 0.238,0.067 0.24,0.076 0.24,0.071 0.254,0.194 0.255,0.191 0.255,0.196 0.264,0.503 0.265,0.522 0.27,0.515 0.29,0.343 0.31,0.316 0.325,0.265 0.362,0.194 0.365,0.185 0.367,0.195 0.379,0.925 0.388,0.964 0.414,0.912 0.528,0.094 0.545,0.066 0.568,0.142 0.598,0.456 0.598,0.546 0.599,0.593 0.605,0.753 0.606,0.754 0.606,0.753 0.685,0.316 0.686,0.312 0.688,0.323 0.746,0.899 0.75,0.912 0.75,0.903 0.786,0.738 0.79,0.702 0.804,0.644 0.868,0.444 0.89,0.408 0.906,0.5 0.986,0.998 0.995,1.018 0.995,1.018 1,1 1,1"),
// })
// function render(){
//   fePointLight.z.baseVal = animatedObject.fePointLightZ;
// }

// bubble around eyes
let bubbleCount = 40;
const bubble = {
  bubbleL1: null,
  bubbleL2: null,
  bubbleL3: null,
  bubbleR1: null,
  bubbleR2: null,
  bubbleR3: null,
};
const bubbleTl = {
  bubbleL1_Tl: null,
  bubbleL2_Tl: null,
  bubbleL3_Tl: null,
  bubbleR1_Tl: null,
  bubbleR2_Tl: null,
  bubbleR3_Tl: null,
}

while(bubbleCount-- > 0) {

  for (let bubbleName in bubble) {
    bubble[bubbleName] = document.createElementNS(xmlns, "use");
    bubble[bubbleName].setAttributeNS(xlinkns, "xlink:href", `#${bubbleName}`);       
    bubbleWrap.appendChild(bubble[bubbleName]);
    TweenMax.set(bubble[bubbleName], {
      transformOrigin: "50% 50%",
    })
  }

  for (let bubbleTlName in bubbleTl) {
    bubbleTl[bubbleTlName] = new TimelineMax();
  }

  bubbleTl.bubbleL1_Tl.to(bubble.bubbleL1, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-65, -75),
      gravity: 0
    },
    scale:0.4,
    repeat:-1,
  });

  bubbleTl.bubbleL2_Tl.to(bubble.bubbleL2, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-52, -68),
      gravity: 0
    },
    scale:0.1,
    repeat:-1,
  });

  bubbleTl.bubbleL3_Tl.to(bubble.bubbleL3, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-38, -50),
      gravity: 0
    },
    scale:0.2,
    repeat:-1,
  });

  bubbleTl.bubbleR1_Tl.to(bubble.bubbleR1, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-105, -115),
      gravity: 0
    },
    scale:0.4,
    repeat:-1,
  });

  bubbleTl.bubbleR2_Tl.to(bubble.bubbleR2, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-112, -128),
      gravity: 0
    },
    scale:0.1,
    repeat:-1,
  });

  bubbleTl.bubbleR3_Tl.to(bubble.bubbleR3, 0.5, {
    physics2D: {
      velocity: randomBetween(10, 70),
      angle: randomBetween(-130, -142),
      gravity: 0
    },
    scale:0.2,
    repeat:-1,
  });

  for (let bubbleTlName in bubbleTl) {
    masterTl.add(bubbleTl[bubbleTlName].timeScale(0.4), bubbleCount/20);   
  }

}

// breath under nose
let breathCount = 20;
const breath = {
  breathL: null,
  breathR: null,
}
while(breathCount-- > 0) {
  for (let breathName in breath) {
    breath[breathName] = document.createElementNS(xmlns, "use");
    breath[breathName].setAttributeNS(xlinkns, "xlink:href", `#${breathName}`);       
    breathWrap.appendChild(breath[breathName]);
    TweenMax.set(breath[breathName], {
      transformOrigin: "50% 50%",
    })
  }
  // console.log(breath)

  const breathLTl = new TimelineMax();
  const breathRTl = new TimelineMax();
  // const bubbleL2_Tl = new TimelineMax();

  breathLTl.to(breath.breathL, 2, {
    physics2D: {
      velocity: randomBetween(10, 30),
      angle: randomBetween(60, 80),
      gravity: 0
    },
    ease: Power2.easeIn,
    scale: 4,
    opacity: 0,
    repeat:-1,
    // repeatDelay:1,
  });

  breathRTl.to(breath.breathR, 2, {
    physics2D: {
      velocity: randomBetween(10, 30),
      angle: randomBetween(100, 120),
      gravity: 0
    },
    ease: Power2.easeIn,
    scale: 4,
    opacity: 0,
    repeat:-1,
    // repeatDelay:1,
  });

  masterTl.add(breathLTl, breathCount/100);   
  masterTl.add(breathRTl, breathCount/100);   
}






// masterTl.seek(100);


function randomBetween(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
              
            
!
999px

Console