SVG

✨ PAKIN CHANTHONG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
      }
      svg{
        background:#FFFFE0;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 180 250">
      
      <path fill="#A0522D" stroke="#E9967A" stroke-width="1.5" stroke-		linecap="round">
        <animate 
			attributeName="d" 
			values="
			M65 65 q20,10 10 150 q-1,25 -20,35 q0,0 70,0  
        	q-20,0 -25,-35 q-1.4,0 0,-130 q0,-20 5,-35.5 
        	q-10,5 -14,10 q-10,-5 -18,-8 L80,64  z
			" dur="5s" 
			repeatCount="indefinite" />
      </path>
      
      <path fill="#FFB6C1" stroke="#8B4513" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M95 110 l0 103"
			repeatCount="indefinite" />
      </path>
      <path fill="#FFB6C1" stroke="#8B4513" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M91 95 l0 53"
			repeatCount="indefinite" />
      </path>
       <path fill="#FFB6C1" stroke="#8B4513" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M91 170 l0 15"
			repeatCount="indefinite" />
      </path>
      <path fill="#FFB6C1" stroke="#8B4513" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M91 190 l0 5"
			repeatCount="indefinite" />
      </path>
      <path fill="none" stroke="#8B4513" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M80 210 l0 20 q0,5 -5,7"
			repeatCount="indefinite" />
      </path>
      <path fill="none" stroke="#8B4513" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M83 210 l0 5"
			repeatCount="indefinite" />
        </path>
      
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m20,10
		c-5,10 5,10 0,0;
		m70,130
		c-5,10 10,5 0,0;
		m50,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="3.8s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m20,10
		c-5,10 5,10 0,0;
		m40,100
		c-5,10 10,5 0,0;
		m160,240
		c-10,0 0,5 0,0;
		" dur="10s" 
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m20,10
		c-5,10 5,10 0,0;
		m53,100
		c-5,10 10,5 0,0;
		m140,240
		c-10,0 0,5 0,0;
		" dur="10s"
        begin="1.8s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m20,10
		c-5,10 5,10 0,0;
		m67,100
		c-5,10 10,5 0,0;
		m120,240
		c-10,0 0,5 0,0;
		" dur="10s"
        begin="3.8s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m20,10
		c-5,10 5,10 0,0;
		m40,100
		c-5,10 10,5 0,0;
		m16,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="7.8s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m20,10
		c-5,10 5,10 0,0;
		m10,130
		c-5,10 10,5 0,0;
		m20,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="5.8s"
		repeatCount="indefinite" />
		</path>  
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m0,10
		c-5,10 5,10 0,0;
		m20,110
		c-5,10 10,5 0,0;
		m10,240
		c-10,0 0,5 0,0;
		" dur="10s"
      begin="1s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m30,10
		c-5,10 5,10 0,0;
		m60,140
		c-5,10 10,5 0,0;
		m40,240
		c-10,0 0,5 0,0;
		" dur="10s"
      begin="2s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m30,10
		c-5,10 10,5 0,0;
		m60,140
		c-5,10 10,5 0,0;
		m40,240
		c-10,0 0,5 0,0;
		" dur="10s" 
		repeatCount="indefinite" />
		</path>
      
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m130,10
		c-5,10 5,10 0,0;
		m120,140
		c-5,10 10,5 0,0;
		m110,240
		c-10,0 0,5 0,0;
		" dur="10s" 
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m170,10
		c-5,10 5,10 0,0;
		m160,140
		c-5,10 10,5 0,0;
		m140,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="7.5s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m120,10
		c-5,10 5,10 0,0;
		m85,140
		c-5,10 10,5 0,0;
		m60,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="3.2s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m135,10
		c-5,10 5,10 0,0;
		m175,140
		c-5,10 10,5 0,0;
		m160,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="5.2s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m135,10
		c-5,10 5,10 0,0;
		m125,125
		c-5,10 10,5 0,0;
		m110,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="3.2s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m135,10
		c-5,10 5,10 0,0;
		m145,110
		c-5,10 10,5 0,0;
		m110,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="4.2s"
		repeatCount="indefinite" />
		</path>
      <path fill="pink">
		<animate 
		attributeName="d" 
		values="
		m135,10
		c-5,10 5,10 0,0;
		m105,70
		c-5,10 10,5 0,0;
		m160,240
		c-10,0 0,5 0,0;
		" dur="10s" 
        begin="4.2s"
		repeatCount="indefinite" />
		</path>
      
      <path fill="#FFB6C1" stroke="pink" stroke-width="4" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M0 40 q10,20 25,12 q10,20 25,15 q10,20 25,10
         q10,15 18,0 q10,15 18,0 q20,9 25,-11  q20,10 	
         25,-13.5 q20,10 30,-12   L190 0 L0 0;
        	M-3 35 q10,20 25,12 q10,20 25,15 q10,20 25,10
         q10,15 18,0 q10,15 18,0 q20,9 25,-11  q20,10 	
         25,-13.5 q20,10 30,-12   L190 0 L0 0;
        	M0 40 q10,20 25,12 q10,20 25,15 q10,20 25,10
         q10,15 18,0 q10,15 18,0 q20,9 25,-11  q20,10 	
         25,-13.5 q20,10 30,-12   L190 0 L0 0;
        	M-3 45 q10,20 25,12 q10,20 25,15 q10,20 25,10
         q10,15 18,0 q10,15 18,0 q20,9 25,-11  q20,10 	
         25,-13.5 q20,10 30,-12   L190 0 L0 0;
        	M0 40 q10,20 25,12 q10,20 25,15 q10,20 25,10
         q10,15 18,0 q10,15 18,0 q20,9 25,-11  q20,10 	
         25,-13.5 q20,10 30,-12   L190 0 L0 0;
			" dur="4.5s" 
			repeatCount="indefinite" />
      </path>
      <path fill="#FFB6C1" stroke="pink" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M20 20 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;
        	M18 18 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;
        	M20 20 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;"
        	dur="4.5s"
			repeatCount="indefinite" />
      </path>
      <path fill="#FFB6C1" stroke="pink" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M112 20 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;
        	M110 18 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;
        	M112 20 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;"
        	dur="4.5s"
			repeatCount="indefinite" />
      </path>
      <path fill="#FFB6C1" stroke="pink" stroke-width="2" stroke-linecap="round">
        <animate 
			attributeName="d" 
			values="
			M72 50 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;
        	M70 48 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;
        	M72 50 q-2,4 4,1 q2,2 2,2 q2,2 3,-1;"
        	dur="4.5s"
			repeatCount="indefinite" />
      </path>
    </svg>
  </body>
</html>