codepens/the-cat-god/dist/index.html

343 lines
24 KiB
HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>The Cat God</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.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>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src="./script.js"></script>
</body>
</html>