กวาง

✨ CHANISARA WATCHARAPONKUL

<html>
  <head>
    <title>เนส ชนิสรา วัชรพรกุล (63070031)
    </title>
    <style>
      body{
        background:#2F4F4F;
        margin:0px;
      }
      svg{
        width:100%;
      }
      #moon:hover{
      filter:drop-shadow(0px 0px 10px hsla(180,100%,50%,1));
 		transition:2s
      }
      #deer{
        
        animation: kayay 5s  
      }
      @keyframes kayay{
        0% {transform: scale(0); transform-origin: 50% 50%}
		 100%{transform: scale(1);transform-origin: 50% 50%}
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <circle r="45" fill="pink" cx="50" cy="48" id="moon"/>
      
      <path fill="#34282c" 
            d="M10,100  L5,95 L20,85
               M10,100 h20 L45,90 L10,100
               M60,80 h10 L55,90 L55,100 L45,90 L60,80
               M85,80 L95,90 L85,100 L80,90 L85,80"/>
 
    <path fill="#4c4646" 
            d="M10,100 L20,85 L45,90 L10,100
               M70,80 L80,90 L55,100 L55,90 L70,80
               M95,90 L95,100 h-10 L85,100"  />
	<path fill="#25383c" 
            d="M20,85 L30,80 h30 L45,90 L20,85
               M55,100 h30 L80,90 L55,100"  />
      <path fill="#2b1b17" 
            d="M45,90 L55,100 h-25 L45,90
               M70,80 h15 L80,90 L70,80" />
        <g id="deer">
      
      <path fill="#362312" 
            d="M35,80 h3 L35,75 L35,80
               M35,75 v-10 L38,70 "/>
      <path fill="#4b3a26" 
            d="M38,80 v-10 L35,75
               M38,70 v-5 L40,60 L35,65"/>
      
       <path fill="#48260D" 
            d="M35,65 L33,59  L40,60 "/>
     
      <path fill="#48260D" 
            d="M45,77 L48,80 h3 L47,77 h-2
               M43,75 v-5 L45,75
               M43,70 v-5 L40,60 L48,65"/>
      <path fill="#362312" 
            d="M45,77 h2 L45,75 h-2
               M45,75 L43,70 L48,65
               M48,65 L50,60 L40,60"/>
       
      <path fill="#362312"
            d="M65,80 L70,70 L68,80
               M70,70 v-5 L65,60 L75,65"/>
      <path fill="#4b3a26" 
            d="M65,80 h3 L67,76
               M68,80 L75,65 L70,70 
               M75,65 v-5 L65,60"/>
      
      <path fill="#4b3a26" 
            d="M75,80 v-10 L78,80
               M75,70 v-5 L80,65"/>
      <path fill="#362312" 
            d="M78,80 L80,65 L75,70
               M80,65 L75,60 v5"/>
      
      <path fill="#362312" 
            d="M33,59 L30,55 L40,50 L40,60
               M33,45 h20 L40,50
               M60,55 L65,60 h-20
               M75,45 h-15 L60,55 L70,55"/>
      <path fill="#48260D" 
            d="M30,55 L33,45 L40,50
               M53,45 L60,55 L50,60 L40,50
               M60,55 L75,60 h-10
               M80,55 v-5 L75,45 L70,50"/>
      <path fill="#4b3a26" 
            d="M40,60 h10 L40,50
               M53,45  h10 L60,55
               M75,60 L80,55 L70,50 L60,55"/>
      
      <path fill="#362312" 
            d="M30,40 h-10 L25,45 v7 L30,55
               M30,28 L38,25 L40,22 L35,22 L30,25
               M23,28 L15,25 L13,22 L18,22 L23,25"/>
       <path fill="#5c2c06" stroke="#5c2c06" stroke-width="0.5" stroke-linecap="round"
            d="M20,40 L30,25 v12
               M30,25 L38,25 L30,28
               M23,25 L23,28 L15,25"/>
      <path fill="#4b3a26" 
            d="M30,55  L33,45 L30,40 L25,45
               M30,40 v-3 L20,40
               M20,40 v-10 L23,25 h7"/>
     <path fill="#48260D" 
            d="M20,40 L25,52 v-7
               M25,52 L33,59 L30,55
               M30,40 v-3 h10 L33,30 L30,25"/>
      
       <path fill="#362312" stroke="#362312" stroke-width="0.5" stroke-linecap="round" 
            d="M14,15 L12,10 L17,5 L16,8 L13,11 
               M22,22 L23,17 L24,25
               M39,15 L41,10 L38,5 L37,8 L40,11
               M30,22 L29,17 L28,24"/>
      <path fill="#48260D" stroke="#4b3a26" stroke-width="0.5" stroke-linecap="round"
            d="M25,25 L23,22 L14,15 L24,25 
               M27,25 L30,22 L39,15 L29,25"/>
          <path fill="#362312"  >
        <animate attributeName="d" 
                 values="M80,50 L83,48 L85,50 L83,52 L80,50;
                         M80,50 L83,50 L85,52 L83,54 L80,50;
                         M80,50 L83,46 L85,48 L83,50 L80,50;
                         M80,50 L83,48 L85,50 L83,52 L80,50;"
                 dur="2s" repeatCount="indefinite"/>
</path>
      </g>
      <path stroke="black"  stroke="black" stroke-width="0.5" stroke-linecap="round">
        <animate attributeName="d" 
                 values="M52,20 q2,0 3,3;
                         M52,22 q2,0 3,3;
                         M52,20 q2,0 3,3;"
                 dur="3s" repeatCount="indefinite"/>
</path>
         <path stroke="black"  stroke="black" stroke-width="0.5" stroke-linecap="round" >
        <animate attributeName="d" 
                 values="M58,20 q-2,0 -3,3;
                         M58,22 q-2,0 -3,3;
                         M58,20 q-2,0 -3,3;"
                 dur="3s" repeatCount="indefinite"/>
</path>
		 <path stroke="black"  stroke="black" stroke-width="0.5" stroke-linecap="round">
        <animate attributeName="d" 
                 values="M63,24 q2,0 2,3;
                         M63,26 q2,0 2,3;
                         M63,24 q2,0 2,3;"
                 dur="3s" repeatCount="indefinite"/>
</path>
      <path stroke="black"  stroke="black" stroke-width="0.5" stroke-linecap="round">
        <animate attributeName="d" 
                 values="M67,24 q-2,0 -2,3;
                         M67,26 q-2,0 -2,3;
                         M67,24 q-2,0 -2,3;"
                 dur="3s" repeatCount="indefinite"/>
</path>
       <path stroke="black"  stroke="black" stroke-width="0.5" stroke-linecap="round">
        <animate attributeName="d" 
                 values="M57,30 q2,0 3,3;
                         M57,32 q2,0 3,3;
                         M57,30 q2,0 3,3;"
                 dur="3s" repeatCount="indefinite"/>
</path>
       <path stroke="black" stroke="black" stroke-width="0.5" stroke-linecap="round">
        <animate attributeName="d" 
                 values="M63,30 q-2,0 -3,3;
                         M63,32 q-2,0 -3,3;
                         M63,30 q-2,0 -3,3;"
                 dur="3s" repeatCount="indefinite"/>
</path>
    </svg>
  </body>
</html>