Hello World! (Copy 8215) (Copy 8261)

✨ elzaphaN TV

<html>
<head>
<title>ฟ้า พุทธิมา เดชดำนิล (63070127)</title>
</head>
<style>

body{	
  animation:bg 10s linear infinite alternate;
  
  margin:0;}
  
  @keyframes bg{
	 0%{background: hsl(0, 50%, 80%)}
    10%{background: hsl(70, 50%, 80%)}
    30%{background: hsl(90, 50%, 80%)}
    60%{background: hsl(120, 50%, 80%)}
    90%{background: hsl(180, 50%, 80%)}
    100%{background: hsl(250, 50%, 80%)}
  }
svg{
	width:100%;
}
  path, rect{
	transform: 1s;
  }
  
</style>
<body>

t
    <rect x="39.5" y="64" width="3.5" height="11"fill="black">
	 	<animate attributeName="fill" 
            values="red;blue;red" 
            dur="12s"
            repeatCount="indefinite" />     
    </rect>  
    <rect x="36" y="61.5" width="11" height="4"fill="black">
        <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
      </rect>  
      o
    <rect x="49" y="61.5" width="11" height="13"fill="black">
<animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />    </rect>
    <rect x="52" y="65.5" width="5" height="5" fill="hsl(49,100%, 50%"  id="t2"/>

r
    <rect x="64" y="61.5" width="3.5" height="13.5"fill="black">
    <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
    </rect>
      
    <rect x="64" y="61.5" width="10" height="4"fill="black">
    <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
    </rect>
    <rect x="64" y="67.4" width="10" height="3"fill="black">
    <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
    </rect>
    <rect x="73" y="61.5" width="3" height="8.9"fill="black">
    <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
    </rect>
    <rect x="70.5" y="70" width="3.5" height="5"fill="black">
    <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
    </rect>

o
  	 <rect x="79" y="61.5" width="11" height="13">
    <animate 
               attributeName="fill" 
               values="red;blue;red" 
               dur="12s" 
               repeatCount="indefinite" />
      </rect>

</g>
    </svg>
</body>
  <script>
    
    function change(){
     var x= Math.floor(Math.random() * 360);
      t1.style.fill = `hsl(${x},100%, 54%)`
      t2.style.fill = `hsl(${x},100%, 54%)`
      t3.style.fill = `hsl(${x},100%, 54%)`
      z1.style.fill = `white`
      z2.style.fill = `white`
      a1.style.fill = `hsl(${x}, 100%, 45%)`
      a2.style.fill = `hsl(${x}, 100%, 56%)`
      a3.style.fill = `hsl(${x}, 100%, 70%)`
      a4.style.fill = `hsl(${x}, 100%, 100%)`
      a5.style.fill = `hsl(${x}, 100%, 79%)`
      a6.style.fill = `hsl(${x}, 100%, 65%)`
      a7.style.fill = `hsl(${x}, 100%, 79%)`
      a8.style.fill = `hsl(${x}, 100%, 50%)`
      a9.style.fill = `hsl(${x}, 100%, 35%)`
      a12.style.fill = `hsl(${x}, 100%, 75%)`
      a13.style.fill = `hsl(${x}, 100%, 71%)`
      a14.style.fill = `hsl(${x}, 100%, 46%)`
      a15.style.fill = `hsl(${x}, 100%, 39%)`
      a16.style.fill = `hsl(${x}, 100%, 21%)`
      a17.style.fill = `hsl(${x}, 100%, 30%)`
      a18.style.fill = `hsl(${x}, 100%, 40%)`
      a19.style.fill = `hsl(${x}, 100%, 57%)`
      a20.style.fill = `hsl(${x}, 100%, 31%)`
      a21.style.fill = `hsl(${x}, 100%, 71%)`
      a22.style.fill = `hsl(${x}, 100%, 49%)`
      a23.style.fill = `hsl(${x}, 100%, 65%)`
      a24.style.fill = `hsl(${x}, 100%, 89%)`
      a25.style.fill = `hsl(${x}, 100%, 98%)`
      a26.style.fill = `hsl(${x}, 100%, 93%)`
      a27.style.fill = `hsl(${x}, 100%, 17%)`
      a28.style.fill = `hsl(${x}, 100%, 89%)`
      a29.style.fill = `hsl(${x}, 100%, 83%)`
      a30.style.fill = `hsl(${x}, 100%, 40%)`
      a31.style.fill = `hsl(${x}, 100%, 70%)`
      a32.style.fill = `hsl(${x}, 100%, 31%)`
      a33.style.fill = `hsl(${x}, 100%, 23%)`
      a35.style.fill = `hsl(${x}, 100%, 71%)`
      a36.style.fill = `hsl(${x}, 100%, 46%)`
      a37.style.fill = `hsl(${x}, 100%, 71%)`
      a38.style.fill = `hsl(${x}, 100%, 83%)`
      a39.style.fill = `hsl(${x}, 100%, 71%)`
      a40.style.fill = `hsl(${x}, 100%, 46%)`
      a41.style.fill = `hsl(${x}, 100%, 43%)`
      a98.style.fill = `hsl(${x}, 100%, 46%)`
      a99.style.fill = `hsl(${x}, 100%, 50%)`
      a88.style.fill = `hsl(14,100%, 54%)`
      
    }
    
  </script>
</html>