Hello World! (Copy 8108)

✨ SIRIBOON PANPIRIYA

<html>
<head><title>ไผ่ ศิริบูรณ์ พันุ์พิริยะ (63070167)</title></head>
<style>
body{
	margin:0;
}
  
svg{
	width:100%;
  background-color:#0094ab;
  .main {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
}
</style>
<body>
<svg viewBox="0 0 200 200">

  
  <path id="1" d="M 5 110
       	  L 80  250
           L 350 250 L 195 20 L 120 110 z" 
        fill="#00829a" />
   <path id="1" d="M 5 110
       	  L 100  250
           L 350 250 L 195 20 L 120 110 z" 
         fill="#01758e" />

  <circle cx="30" cy="50" r="4" fill="#C4C4C4" fill-opacity=1>
    <animate attributeName="cy" values="200;10;0" dur="10s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" values="1;1;1;.5;0" dur="10s" repeatCount="indefinite" />
    <animate attributeName="r" values="5;4;3;2;1" dur="10s" repeatCount="indefinite" />
  </circle>
  <circle cx="50" cy="50" r="4" fill="#C4C4C4" fill-opacity=1>
    <animate attributeName="cy" values="200;10;0" dur="15s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" values="1;1;1;.5;0" dur="15s" repeatCount="indefinite" />
    <animate attributeName="r" values="7;6;5;4;3;2;1" dur="15s" repeatCount="indefinite" />
  </circle>
   <circle cx="120" cy="50" r="4" fill="#C4C4C4" fill-opacity=1>
    <animate attributeName="cy" values="200;10;0" dur="18s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" values="1;1;1;.5;0" dur="18s" repeatCount="indefinite" />
    <animate attributeName="r" values="9;8;7;6;5;4;3;2;1" dur="18s" repeatCount="indefinite" />
  </circle>

<path id="1" d="M 5 110
       	  L 26 100
           L 11 111 z" 
         fill="#485c74"  />
  <path id="2" d="M 26 100
       	  L 30 110
           L 11 111 z" 
         fill="#4a5e76"  />
  <path  id="3" d="M 26 100
       	  L 40 101 
           L 30 110 z" 
         fill="#4f6580"  />
  <path id="4" d="M 40 101
       	  L 38 110
           L 30 110 z" 
         fill="#4f647d"  />
  <path  id="5" d="M 40 101
       	  L 55 112
           L 38 110 z" 
         fill="#4d6076"  />
  <path id="6" d="M 40 101
       	  L 60 95
           L 55 112 z" 
         fill="#53657e"  />
  <path  id="7" d="M 60 95
       	  L 75 105
           L 55 112 z" 
         fill="#4e5d6e"  />
  <path  id="8" d="M 60 95
       	  L 90 90
           L 75 105 z" 
         fill="#4e5a6c"  />
  <path  id="9" d="M 90 90
       	  L 99 108
           L 75 105 z " 
         fill="#4c5563"  />
  <path  id="22" d="M 99 108
       	  		  L 85 116
           		  L 75 116 
                 L 55 112
                 L 75 105 z" 
         fill="#444c58"  />
  <path id="10" d="M 90 90
       	  L 120 100
           L 99 108 z" 
         fill="#4c505a"  />
  <path  id="11" d="M 90 90
       	  L 123 78
           L 120 100 z" 
         fill="#434650"  />
  <path id="12" d="M 123 78
       	  L 135 75
           L 120 100 z" 
         fill="#35373e"  />
  <path id="13" d="M 135 75
       	  L 150 68
           L 120 100 z" 
         fill="#3b3c43"  />
  <path id="14" d="M 150 68
       	  L 175 60
           L 150 85
           L 120 100 z" 
         fill="#403f45"  />
  <path id="15" d="M 175 60
       	  L 185 25
           L 150 68 z" 
         fill="#333439"  />
  <path id="16" d="M 181 30
       	  L 170 34
           L 175.2 37 z" 
         fill="#0c0b0f"  />
  <path id="17" d="M 181 30
       	  L 173 26
           L 170 34 z" 
         fill="#22252a"  />
  <path id="18" d="M 170 34
       	  L 167 24
           L 173 26 z" 
         fill="#31353c"  />
  <path id="19" d="M 173 26
       	  L 177 20
           L 167 24 z" 
         fill="#3a3d45"  />
  <path id="20" d="M 183.3 31
       	  L 195 33
           L 180.7 40 z" 
         fill="#3a3d45"  />
  <path id="21" d="M 183 31
       	  L 189 27
           L 195 33 z " 
         fill="#303136"  />
  <path id="25" d="M 189 27
       	  L 195 20
           L  195 33 z" 
         fill="#313237"  />
   <path id="26" d="M 5 110
       	  L 13 120
           L 35 135 
           L 30 110
           L 11 111 z" 
         fill="#b3afa6"   />
  <path id="27" d="M 5 110
       	  L 35 135
           L  11 111 z" 
         fill="#bcb7ad"   />
   <path id="28" d="M 30 110
       	  L 38 110
           L  35 135 z" 
         fill="#cdc9c0"   />
  <path id="29" d="M 35 135
       	  L 70 133
           L  38 110 z" 
         fill="#b2aea5"   />
  <path id="30" d="M 38 110
       	  L 55 112
           L 70 115
           L 70 133 z" 
         fill="#d7d6cb"   />
   <path id="31" d="M 70 115
       	  L 74.5 116
           L 85 116 L 99 108 L 115 102
           L 110 120 L 100,127 L 90,130
           L70,133 z" 
         fill="#9f9b94"   />
  <path id="32" d="M 85 116 
       	  L99 108
          L 110 120 z" 
         fill="#a29f99"   />
  <path id="33" d="M 110 120 
       	  L115 102
           L 120 100
           L 150 85 z" 
         fill="#a09d97"   />
  <path id="34" d="M 100 127
       	  L 130 115 
           L 145 105 L 175 60 L 150 85 
           L 110 120 z" 
         fill="#a09d97"   />
  <path id="35" d="M 130 115
       	  L 145 105 
           L 150 85 z" 
         fill="#b4afa6"   />
   
  
  
  
  
  
  

  <path  id="23" d="M75 105
       	  L 78 110
           L 86 118
           L 67 118
           L 55 112 z" 
         fill="#5B677D"  />
  <path id="24" d="M 78 110
       	  		 L 90 110
           		 L 86 118 z" 
         fill="#565a68"  />
  
  <circle cx="190" cy="50" r="4" fill="#C4C4C4" fill-opacity=1>
    <animate attributeName="cy" values="200;10;0" dur="7s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" values="1;1;1;.5;0" dur="7s" repeatCount="indefinite" />
    <animate attributeName="r" values="5;4;3;2;1" dur="7s" repeatCount="indefinite" />
  </circle>
  <circle cx="20" cy="50" r="4" fill="#C4C4C4" fill-opacity=1>
    <animate attributeName="cy" values="200;10;0" dur="12s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" values="1;1;1;.5;0" dur="12s" repeatCount="indefinite" />
    <animate attributeName="r" values="7;6;5;4;3;2;1" dur="12s" repeatCount="indefinite" />
  </circle>
   <circle cx="170" cy="50" r="4" fill="#C4C4C4" fill-opacity=1>
    <animate attributeName="cy" values="200;10;0" dur="13s" repeatCount="indefinite" />
    <animate attributeName="fill-opacity" values="1;1;1;.5;0" dur="13s" repeatCount="indefinite" />
    <animate attributeName="r" values="9;8;7;6;5;4;3;2;1" dur="13s" repeatCount="indefinite" />
  </circle>
  

 <path id="35" d="M 10 200
       	   Q30,180 60,200 z" 
         fill="#3a3232"   />
  <path id="35" d="M 150 200
       	   Q180,160 230,200 z" 
         fill="#2d2c2c"   />
  <path id="35" d="M 120 200
       	   Q150,170 180,200 z" 
         fill="#3a3232"   />

  <g id=seaweed1>
    <path d="M30,210
             C10 190 40 180 25 160
             L25 160
             C26 170 10 190 25 210 z" fill=#49710e>
     <animate attributeName="d" values="
                         M30,210
             				 C10,190 40,180 25,160 L25,160
             				 C26,170 10,190 25,210 z ;
                                         M30,210
             				 C10,190 40,180 30,160 L30,160
             				 C26,170 10,190 25,210 z  ;
                                         M30,210
             				 C10,190 40,180 25,160 L25,160
             				 C26,170 10,190 25,210 z ;
                         " dur="3s" repeatCount="indefinite"></animate>
  </path>
  </g>
  <g id=seaweed2>
    <path d="M60,210
             C40 180 85 180 60 150
             L60 150
             C80,170 6,180 70,210
             " fill=#49710e>
     <animate attributeName="d" values="
                           M60,210
             					C40 180 85 180 60 150
             					L60 150
             					C80,170 6,180 70,210;
              				   M60,210
             					C40 180 85 180 70 150
             					L70 150
             					C80,170 6,180 70,210;
                           M60,210
             					C40 180 85 180 55 150
             					L55 150
             					C80,170 6,180 70,210;
                           M60,210
             					C40 180 85 180 60 150
             					L60 150
             					C80,170 6,180 70,210;
                         " dur="3s" repeatCount="indefinite"></animate>
  </path>
  </g>
   <g id=seaweed3>
    <path d="M60,210
             C40 180 85 180 60 150
             L60 150
             C80,170 6,180 70,210
             " fill=#49710e>
     <animate attributeName="d" values="
                           M60,210
             					C40 180 85 180 60 150
             					L60 150
             					C80,170 6,180 70,210;
              				   M60,210
             					C40 180 85 180 70 150
             					L70 150
             					C80,170 6,180 70,210;
                           M60,210
             					C40 180 85 180 55 150
             					L55 150
             					C80,170 6,180 70,210;
                           M60,210
             					C40 180 85 180 60 150
             					L60 150
             					C80,170 6,180 70,210;
                         " dur="3s" repeatCount="indefinite"></animate>
  </path>
  </g>
  
  <svg>
  <g>
    <use href= "#seaweed1" x= 110 y=5 />
    <use href= "#seaweed1" x= 10  y=15 />
    <use href= "#seaweed2" x= 100  y=10></use>
    </g>
  </svg>
  
      
    
  
  
 
 
  
  
  
  
</svg>
<script>
  let screenWidth;
  let screenHeight;

init();

function init() {
      screenWidth = window.innerWidth;
      screenHeight = window.innerHeight;
  }

let maxDegrees = 60;

window.onmousemove = function (event) {
      let mouseX = event.pageX / screenWidth;
      let mouseY = event.pageY / screenHeight;
      let yDegrees = (mouseX * maxDegrees) - 0.5 * maxDegrees;
      let xDegrees = -0.5 * ((mouseY * maxDegrees) - 0.5 * maxDegrees);
      document.querySelector('.main').style.transform = 'rotateY(' + yDegrees + 'deg) rotateX(' + xDegrees + 'deg)';

}
</script>
</body>
</html>