นายจักราภัทร สุดใจ 63070016

✨ Chakraphat Sudjai

<html>
  <head>
        
    
    
    <title>นายจักราภัทร สุดใจ(63070016)</title>
    <style>
      body{
        background:white;
        margin:0;
        
      }
      
      svg {
      background-color:#b7d7ed;
      width:100%;  
      }
      #black{ 
        position:absolute;
        left:90%;
        top:5%;
        width:50px;
        width:60px;
        background:black;
        color:white;
        border: 1px solid;
        
      }
      #skyblue{ 
        position:absolute;
        left:82%;
        top:5%;
        width:50px;
        width:60px;
        background:black;
        color:white;
        border:1px solid;
      }
       
    </style>
    
  </head>
  <body>
    <button  id="black" onclick="change()">Night</button>
    <button  id="skyblue" onclick="change1()">Day</button>
	 
    <svg viewBox="0 0 100 100" id="background">
    
    
    
    
      
      
    <path d="M58.7 27 L58.7 33 L51 32" fill="#dae0e0"/>
    <path d="M48 33 L50.5 29 L52.6 33" fill="#d2d3ce"/>
    <path d="M49 32.3 L47 27.7 L50.4 29.4" fill="#d9d9d9"/>
    <path d="M52 32.4 L54 27.7 L49.6 27.7" fill="#bebfba"/>
    <path d="M42.3 27 L42.3 33 L49 32" fill="#dae0e0"/>
    
      
      
          
    <path d="M40.97 28.9 L35.5 48 L47.6 40.9" fill="#81a2ab"/>
    <path d="M41 29 L47.6 41 L51 33" fill="#abbcc3"/>
    <path d="M50.8 32.7 L47.5 41 L53 41" fill="#b3bfbf"/>
    <path d="M50.7 32.9 L53 41.1 L59.9 29.4" fill="#abbcc3"/>
    <path d="M42.4 20.9 L41 29 L42.5 29.7" fill="#242529"/>
    <path d="M58.6 20.9 L58.5 30 L60 29.5" fill="#242529"/>
    <path d="M59.93 29.4 L52.9 41 L65 48" fill="#81a2ab"/>
      
      
          
     
    <path d="M55.5 21.27 L58.55 25 L58.6 20.8" fill="#cbced7"/>
    <path d="M55.6 21.3 L53.7 24.5 L58 24" fill="#dcddd8"/>
    <path d="M55.6 21.3 L53.7 24.5 L58 24" fill="#dcddd8"/>
    <path d="M42.4 20.69 L45.7 21.4 L42.4 24.8" fill="#cbced7"/>
    <path d="M43 24 L45.6 21.3 L47.9 24.5" fill="#e0e0e2"/>
    
    
    
     
    
    <path d="M42.4 24.7 L42.5 27.3 L49 32.2 L46.5 25.8" fill="#d1d2d4"/>
    <path d="M42.9 23.9 L47.2 24.3 L48 26.3 L42.4 24.9" fill="#d1d2d4"/>
    <path d="M47.3 30 L48.3 25.2 L44.5 25" fill="#d1d2d4"/>
    <path d="M58.55 25 L58.55 28 L52 32.4 L55 25" fill="#d1d2d4"/>
    <path d="M58.5 25 L53.2 25 L53.9 24 L58 24" fill="#d1d2d4"/>
    <path d="M56 25 L53.6 28.5 L51 25" fill="#d1d2d4"/>
      
    
    <path d="M45.7 21.4 L47.7 25.4 L50.6 22" fill="#0e1215"/>
    <path d="M55.65 21.3 L53 25.4 L50.6 22" fill="#0e1215"/>
    <path d="M50.6 21.95 L47.6 25.3 L53 25.3" fill="#101113"/>
      
    
         
    
    <path d="M42.4 20.9 L47.3 16.4 L49.6 22" fill="#202123"/> 
    <path d="M47.25 16.4 L49.4 22 L50.8 22 L53.2 16.5" fill="#1d1e20"/>
    <path d="M53.2 16.5 L50.3 22.1 L58.5 20.9" fill="#15191a"/>
      
    
    
        
    
      
    <path d="M48.3 25.2 L47.4 28 L50.5 29.5 L50.7 25.2" fill="#131919"/>
    <path d="M52.3 24.5 L50.5 25 L50.4 29.5 L53.3 28" fill="#13181b"/>
    <path d="M50.7 25.5 L48.7 27.2 L50.5 29.4" fill="#a96a35"/>
    <path d="M50.7 25.5 L50.4 29.33 L52.5 27.6" fill="#82592d"/> 
    
    
    
  
      
      
    
    <path d="M44.5 24.6 L46.5 24.8 L45.8 25.9" fill="#010100"/>
    <path d="M56.5 24.6 L54.5 24.8 L55.2 25.9" fill="#010100"/> 
      
      
    
    
    <path d="M53 41 L65 48 L49.2 60" fill="#738086"/>  
    <path d="M47 41 L53.3 41 L49.3 60" fill="#7f9298"/>
    <path d="M47.4 41 L35.5 48 L49.3 60" fill="#7d959f"/>
    
    <path d="M49.3 60 L40 78 L49.5 84" fill="#7697a0"/>
    <path d="M49.2 60 L49.4 84 L61 78" fill="#778e96"/>
    <path d="M49.1 60 L65 47.9 L62 80" fill="#6f7c82"/>
    <path d="M35.5 48 L39 81 L49.4 60" fill="#6b818c"/>
    
      
    
    <path d="M35.5 48 L36 80 L39.1 81" fill="#76898f"/>
    <path d="M64.9 48 L61.9 80 L65 79" fill="#76858c"/>

<path d="M70.5 64 L73 65 L66.4 52" fill="#4b555e"/>
    <path d="M35.5 48 L36.1 80 L29 64" fill="#8099a0"/>
    <path d="M64.9 48 L64.9 79.1 L71 64" fill="#83969c"/>
    <path d="M41.1 29 L35.5 48 L28 51" fill="#748694"/>
    <path d="M34.5 48 L28 51 L27 65" fill="#72808d"/>
    <path d="M29 64 L27 65 L34 48.5 L35.6 48" fill="#4b555e"/>
    <path d="M59.8 29 L73 54 L72.9 65 L64.8 49" fill="#798794"/>
      
    
    <path d="M36.8 85.6 L27.8 100 L43.3 88.3" fill="#e0f3fa"/>
    <path d="M27.7 100 L46.2 86.1 L54.6 97.1" fill="#cfedf8"/>
    <path d="M28.5 100 L47.4 100 L53.3 97.1" fill="#f5fdff"/>
    <path d="M47.3 100 L52.9 100 L54.5 97 L53.4 97" fill="#f1fbfd"/>
    <path d="M52.9 100 L54.4 96.8 L59 100" fill="#f3fbfd"/>
    <path d="M54 97 L64 90 L68 100 L58 100" fill="#c0e7f6"/>
    <path d="M53 83.5 L64 90 L55 97" fill="#c3e9f4"/> 
    <path d="M53 83.5 L55 97 L54.5 97 L44 83.5" fill="#ddf1f8"/>
    <path d="M44 83 L46.5 86.2 L43 89 L36.7 85.6" fill="#cbebf8"/>
    <path d="M53 83.5 L64 90 L61 81" fill="#cbebf8"/>
    <path d="M45 83 L36.8 85.7 L38 83" fill="#d4effa"/>
    <path d="M64 91 L69 100 L67 100" fill="#d4effa"/> 
      
      
    
        
    <path d="M38 83 L40.2 78.1 L49.6 84" fill="#282826"/>    
    <path d="M60.8 78 L63.2 82 L49.4 84" fill="#282826"/>
    
    
    <path stroke="white" stroke-width="0.5" fill-opacity="0"
            d="M4,91 
               c3,0 3,-4 6,0
               0,0 2,2 4,-0.5
               2,-2 1,1 4,0.5 " > 
       <animate attributeName="d" 
	values=" M4,91 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5; 
            M4,91 
            c1,0 2,-4 4,0
            0,0 1,2 4,-0.5
            2,-2 0,1 4,0.5;
            M4,91 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5  
          "
   dur="4s" repeatCount="indefinite" />  </path>
      
    
   <path stroke="white" stroke-width="0.5" fill-opacity="0"
            d="M20,86
               c3,0 3,-4 6,0
               0,0 2,2 4,-0.5
               2,-2 1,1 4,0.5 " >
      
    <animate attributeName="d" 
	values=" M20,86 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5; 
            M20,86 
            c1,0 2,-4 4,0
            0,0 1,2 4,-0.5
            2,-2 0,1 4,0.5;
            M20,86 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5  
          "
   dur="4s" repeatCount="indefinite" />   </path>
   <path stroke="white" stroke-width="0.5" fill-opacity="0"           
            d="M86,91
               c3,0 3,-4 6,0
               0,0 2,2 4,-0.5
               2,-2 1,1 4,0.5 "  >
      
      <animate attributeName="d" 
	values=" M86,91 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5; 
            M86,91 
            c-1,2 1,-4 4,0
            0,0 1,2 4,-0.5
            2,-2 0,1 4,0.5;
            M86,91 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5  
          "
   dur="4s" repeatCount="indefinite" />   </path>
  <path stroke="white" stroke-width="0.5" fill-opacity="0"           
            d="M71,85
               c3,0 3,-4 6,0
               0,0 2,2 4,-0.5
               2,-2 1,1 4,0.5 "  >
    
      <animate attributeName="d" 
	values=" M71,85 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5; 
            M71,85 
            c-1,2 1,-4 4,0
            0,0 1,2 4,-0.5
            2,-2 0,1 4,0.5;
            M71,85 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5  
          "
   dur="4s" repeatCount="indefinite" />  
      
      </path>
  <path stroke="white" stroke-width="0.5" fill-opacity="0"           
            d="M68,94 
               c3,0 3,-4 6,0
               0,0 2,2 4,-0.5
               2,-2 1,1 4,0.5"  >
    
      <animate attributeName="d" 
	values=" M68,94 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5; 
            M68,94 
            c1,0 2,-4 4,0
            0,0 1,2 4,-0.5
            2,-2 0,1 4,0.5;
            M68,94 
            c3,0 3,-4 6,0
            0,0 2,2 4,-0.5
            2,-2 1,1 4,0.5  
          "
   dur="4s" repeatCount="indefinite" />  </path>
               
               
            
            
  
    
    
    <path d="M8,10 
             q2,-5 6,-2
             q4,-2.5 6,1
             q5,-4 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,2 -8,1
             q-7,-1 -5,-4
             "
          
          fill="grey" stroke="black" stroke-width="0.05">
      
       <animate 
		attributeName="d" 
		values="
		       M8,10 
             q2,-5 6,-2
             q4,-2.5 6,1
             q5,-4 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,2 -8,1
             q-7,-1 -5,-4;
              
             M24,10 
             q2,-3 6,-2
             q4,-1.5 6,1
             q5,-2 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,1 -8,1
             q-7,-1 -5,-4;
              
             M8,10 
             q2,-5 6,-2
             q4,-2.5 6,1
             q5,-4 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,2 -8,1
             q-7,-1 -5,-4;
          "
   
   dur="4s" 
	repeatCount="indefinite" />
      
      </path>
      
    <path d="M72,10 
             q2,-5 6,-2
             q4,-2.5 6,1
             q5,-4 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,2 -8,1
             q-7,-1 -5,-4
             "
          
          fill="grey" stroke="black" stroke-width="0.05">
      
       <animate 
		attributeName="d" 
		values="
		       M72,10 
             q2,-5 6,-2
             q4,-2.5 6,1
             q5,-4 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,2 -8,1
             q-7,-1 -5,-4;
              
             M55,10 
             q2,-3 6,-2
             q4,-1.5 6,1
             q5,-2 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,1 -8,1
             q-7,-1 -5,-4;
              
             M72,10 
             q2,-5 6,-2
             q4,-2.5 6,1
             q5,-4 8,1
             q2,3 -3,4
             q-3,0 -4,-1
             q-3,2 -8,1
             q-7,-1 -5,-4;
          "
   
   dur="4s" 
	repeatCount="indefinite" />
      </path>
      
        
      
      <svg>
      <path d="M90.7 88.5 L93 85 L93 92" fill="#40c6df"/>
      <path d="M90.9 88.6 L88.8 84.9 L84.7 84.9 L84.7 89.9 L90 89.8" fill="#3fc6e6"/> 
      <path d="M90.9 88.6 L88.8 84.9 L84.7 84.9 L84.7 89.9 L90 89.8" fill="#3fc6e6"/>
      <path d="M84.7 84.9 L78.2 84.9 L75.9 88.6 L76.7 89.9 L84.9 89.9" fill="#3fc6e6"/> 
      <path d="M76.8 89.8 L78.2 92.2 L88.8 92.1 L89.9 89.8" fill="#f2f2f2"/> 
      <path d="M84.7 89 L84 94 L82 89" fill="#3fc6e6"/>
      <circle r="0.3" cx="78.7" cy="86.5"></circle>
      <circle r="0.4" cx="78.7" cy="91" fill="#de2525"></circle>
      <animate attributeName="x" 
            values="100;0;-100"
               
               
               
               
               
               
               
               
               
               
               dur="5s" repeatCount="indefinite" />
        
        
        
        
      
        
    
      </svg>
      
      <svg>
      <circle r="0.3" cx="5" cy ="1" fill="white"/> 
      <circle r="0.3" cx="52" cy ="1" fill="white"/> 
      <animate attributeName="y" values="1;50;100" dur="8s" repeatCount="indefinite" />
      </svg>
      
      <svg>
      <circle r="0.3" cx="10" cy ="1" fill="white"/> 
      <circle r="0.3" cx="58" cy ="1" fill="white"/>
      <circle r="0.3" cx="68" cy ="1" fill="white"/>
      <circle r="0.3" cx="88" cy ="1" fill="white"/> 
      <animate attributeName="y" values="1;50;100" dur="7s" repeatCount="indefinite" />
      </svg>
      
      <svg>
      <circle r="0.3" cx="15" cy ="1" fill="white"/> 
      <circle r="0.3" cx="28" cy ="1" fill="white"/>
      <circle r="0.3" cx="98" cy ="1" fill="white"/>
      <circle r="0.3" cx="48" cy ="1" fill="white"/> 
      <animate attributeName="y" values="1;50;100" dur="9s" repeatCount="indefinite" />
      </svg>
      
      <svg>
      <circle r="0.3" cx="24" cy ="1" fill="white"/> 
      <circle r="0.3" cx="5" cy ="1" fill="white"/>
      <circle r="0.3" cx="76" cy ="1" fill="white"/>
      <circle r="0.3" cx="30" cy ="1" fill="white"/> 
      <animate attributeName="y" values="1;50;100" dur="6s" repeatCount="indefinite" />
      </svg>
      
      <svg>
      <circle r="0.3" cx="10" cy ="1" fill="white"/> 
      <circle r="0.3" cx="69" cy ="1" fill="white"/>
      <circle r="0.3" cx="99" cy ="1" fill="white"/>
      <circle r="0.3" cx="33" cy ="1" fill="white"/>
      <circle r="0.3" cx="50" cy ="1" fill="white"/> 
      <animate attributeName="y" values="1;50;100" dur="5s" repeatCount="indefinite" />
      </svg>
      
      
  		
      
      
     
      
       
      
    
    </svg>
    <img src="https://cdn.discordapp.com/attachments/833955598789509143/840483355673231390/farpsmallwall_textureproduct750x1000.u4.jpg "/>
  
  <script>    
  function change()  {
    document.getElementsByTagName('svg')[0].style.background = '#06131c';
  }  
  function change1() { 
  document.getElementsByTagName('svg')[0].style.background = '#b7d7ed';
}        
    </script>
    
  
  </body>
</html>