poly

✨ นายดรณ์ นุตเวช

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ดรณ์ นุตเวช (60070026)</title>
</head>
<style>
    body{ 
        margin:0; 
        } 
    svg{ 
        width:100vh;
        }
    body{
		background-image: linear-gradient(#006994,hsl(45, 35%, 63%));
	   }
  #bubble{
	width: 100px;
  height: 100px;
    border-radius:50%;
  background-color: #e7feff;
  position: relative;
  animation-name: bub;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  }
  #bubble2{
	width: 100px;
  height: 100px;
    left: 500px;
    border-radius:50%;
  background-color: #e7feff;
  position: relative;
  animation-name: bub;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  }
  #bubble3{
	width: 100px;
  height: 100px;
    left: 250px;
    border-radius:50%;
  background-color: #e7feff;
  position: relative;
  animation-name: bub;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  }
  #bubble4{
	width: 100px;
  height: 100px;
    left: 700px;
    border-radius:50%;
  background-color: #e7feff;
  position: relative;
  animation-name: bub;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  }
  #bubble5{
	width: 100px;
  height: 100px;
    left: 100px;
    border-radius:50%;
  background-color: #e7feff;
  position: relative;
  animation-name: bub;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  }
  @keyframes bub {
  0%   {background-color:lightblue; top:-100px;}
  
  
  
  100% {background-color:#e7feff;  top:-1000px;}
}
  </style>
<body>
    <svg viewBox="0 0 160 160">
      
        <polygon points="62,5 50,18 29,18" style="fill: 		hsl(26, 100%, 50%)" />
      <polygon points="49,18 45,28 29,18" style="fill: 	hsl(41, 100%, 50%)" />
      <polygon points="45,28 35,30 29,18" style="fill: hsl(48, 100%, 50%)" />
      <polygon points="25,34 35,30 29,18" style="fill: 	#d1a3a4" />
      <polygon points="62,5 65,23 49,18" style="fill: 	#FFA500" />
      <polygon points="45,28 65,23 49,18" style="fill: black" />
      <polygon points="62,5 75,13 65,23" style="fill: 		hsl(41, 90%, 60%)" />
      <polygon points="62,5 95,3 75,13" style="fill: hsl(41, 100%, 50%)" />
      <polygon points="102,21 95,3 75,13" style="fill: hsl(40, 100%, 50%)" />
       <polygon points="102,21 95,3 120,13" style="fill: hsl(40, 100%, 50%)" />
      <polygon points="105,37 98,23 120,13" style="fill: hsl(40, 100%, 50%)" />
      <polygon points="105,37 125,33 120,13" style="fill: hsl(40, 100%, 50%)" />
      <polygon points="125,33 155,33 120,13" style="fill: hsl(20, 100%, 50%)" />
      <polygon points="125,33 155,9 120,13" style="fill: hsl(15, 80%, 50%)" />
      <polygon points="102,21 75,33 75,13" style="fill: hsl(43, 100%, 50%)" />
      <polygon points="102,21 75,33 105,37" style="fill: hsl(48, 100%, 50%)" />
      <polygon points="65,23 75,33 75,13" style="fill: hsl(43, 100%, 50%)" />
      <polygon points="35,30 70,33 65,23" style="fill: 	hsl(32, 70%, 50%)" />
      <polygon points="75,33 70,33 65,23" style="fill: hsl(48, 100%, 50%)" />
      <polygon points="80,33 70,60 55,33" style="fill:	hsl(61, 54%, 80%)" />
      <polygon points="35,30 70,60 70,33" style="fill: 	hsl(61, 94%, 80%)" />
      <polygon points="35,30 25,34 70,60" style="fill: 	#d1a3a4" />
      <polygon points="70,60 80,33 90,60" style="fill: 	hsl(41, 94%, 80%)" />
      <polygon points="90,60 80,33 105,37" style="fill: 	#d1a3a4" />
      <polygon points="90,60 125,33 105,37" style="fill: 	#d1a3a4" />

</svg>
  <div id="bubble">
  
  </div>
  <div id="bubble2">
  
  </div>
  <div id="bubble3">
  
  </div>
  <div id="bubble4">
  
  </div>
  <div id="bubble5">
  
  </div>
</body>
</html>