Hello World! (Copy 8003) – CODEBOX

Hello World! (Copy 8003)

✨ นายวุฒิพร แจ่มกระจ่าง

<html>
  <head>
    <title> อาร์ต วุฒิพร แจ่มกระจ่าง 63070162</title>
    <style>
      body{
        background:black;
        margin:0px;
        text-align:center;
      }
      svg{
        background-color:black;
        width:100vh;
      }
		* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.punto {
	background: #fff !important;
	border-radius: 50%;
	position: fixed;
	top: 0;
	animation-name: caer;
   animation-duration: 3s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
}

@keyframes caer {
	0% {
		top: 0;
		left: -10px;
	}
	
	10% {
		left: 10px;
	}
	
	20% {
		left: -10px;
	}
	
	30% {
		left: 10px;
	}
	
	40% {
		left: -10px;
	}
	
	50% {
		left: 10px;
	}
	
	60% {
		left: -10px;
	}
	
	70% {
		left: 10px;
	}
	
	80% {
		left: -10px;
	}
	
	90% {
		left: 10px;
	}
	
	100% {
		top: 110vh;
		left: -10px;
	}
}

</style>
  </head>
  <body>

<svg viewBox="0 0 100 100">
     <circle cx="60" cy="10" r="9.5" fill="#e7e8d3">
	  <animate attributeName="opacity" values="0.5;0.8;0.5" dur="1.5s" repeatCount="indefinite"></animate>
     </circle>
     <circle cx="60" cy="10" r="8" fill="#c9c9bb"></circle>
     <path d="M15,10 q2,-8 9,-2 q4,-3.8 8,1 q5,-5 8,0 q5,3 3,6 q4,6 -8,4 q-1,5 -8,2 q-7,5 -9,-3 q-8,-1 -3,-8"fill="#2c414a" stroke="#2c414a" stroke-width="0.7">
      <animate attributeName="d" values="
               M5,10 q2,-8 9,-2 q4,-3.8 8,1 q5,-5 8,0 q5,3 3,6 q4,6 -8,4 q-1,5 -8,2 q-7,5 -9,-3 q-8,-1 -3,-8;
        			M30,10 q2,-8 9,-2 q4,-3.8 8,1 q5,-5 8,0 q5,3 3,6 q4,6 -8,4 q-1,5 -8,2 q-7,5 -9,-3 q-8,-1 -3,-8;
               M5,10 q2,-8 9,-2 q4,-3.8 8,1 q5,-5 8,0 q5,3 3,6 q4,6 -8,4 q-1,5 -8,2 q-7,5 -9,-3 q-8,-1 -3,-8;
                                         " dur="7s" repeatCount="indefinite"/>
      </path>
     <path d="M60,10 q3,-9 9,-2 q6,-2.8 8,1 q4,-5 8,0 q8,1 3,6 q3,6 -8,4 q-2,5 -8,2 q-5,5 -9,-3 q-9,-1 -3,-8"fill="#2c414a" stroke="#2c414a" stroke-width="0.7">
      <animate attributeName="d" values="
               M70,10 q3,-9 9,-2 q6,-2.8 8,1 q4,-5 8,0 q8,1 3,6 q3,6 -8,4 q-2,5 -8,2 q-5,5 -9,-3 q-9,-1 -3,-8;
        			M50,10 q3,-9 9,-2 q6,-2.8 8,1 q4,-5 8,0 q8,1 3,6 q3,6 -8,4 q-2,5 -8,2 q-5,5 -9,-3 q-9,-1 -3,-8;
               M70,10 q3,-9 9,-2 q6,-2.8 8,1 q4,-5 8,0 q8,1 3,6 q3,6 -8,4 q-2,5 -8,2 q-5,5 -9,-3 q-9,-1 -3,-8;
                                         " dur="7s" repeatCount="indefinite"/>
     </path>
     <path d="M50,50 L50,80 L15,50 z" fill="#2c414a" stroke="#2c414a" stroke-width="0.2"></path>
     <path d="M50,50 L50,80 L85,50 z" fill="#1d2b30" stroke="#1d2b30" stroke-width="0.2"></path>
     <path d="M20,10 L15,50 L22,43 L25,30z" fill="#092530" stroke="#092530" stroke-width="0.2"></path>
	  <path d="M20,10 L25,30 L31,35 L38,28z" fill="#06435c" stroke="#06435c" stroke-width="0.2"></path>
     <path d="M25,30 L22,43 L31,35z" fill="#1b4f63" stroke="#1b4f63" stroke-width="0.2"></path>
     <path d="M38,28 L31,35 L22,43 L15,50 L45,35z" fill="#123a4a" stroke="#123a4a" stroke-width="0.2"></path>
     <path d="M80,10 L85,50 L78,43 L75,30z" fill="#133642" stroke="#133642" stroke-width="0.2"></path>
     <path d="M80,10 L75,30 L69,35 L62,28z" fill="#06435c" stroke="#06435c" stroke-width="0.2"></path>
     <path d="M75,30 L78,43 L69,35z" fill="#1b4f63" stroke="#1b4f63" stroke-width="0.2"></path>
     <path d="M62,28 L69,35 L78,43 L85,50 L55,35z" fill="#123a4a" stroke="#123a4a" stroke-width="0.2"></path>
     <path d="M45,35 L55,35 L65,50 L65,60 L50,56 35,60 35,50z" fill="#1e323b" stroke="#1e323b" stroke-width="0.2"></path>
     <path d="M50,35 L55,35 L65,50 L65,60 L50,56 z" fill="#2c454f" stroke="#2c454f" stroke-width="0.2"></path>
     <path d="M50,56 L65,60 L60,82 L50,77 z" fill="#274854" stroke="#274854" stroke-width="0.2"></path>  
     <path d="M50,56 L50,77 L40,82 L35,60 z" fill="#213942" stroke="#213942" stroke-width="0.2"></path>
     <path d="M60,82 L50,82 L50,77 z" fill="#033a52" stroke="#033a52" stroke-width="0.2"></path>
     <path d="M40,82 L50,82 L50,77 z" fill="#06425c" stroke="#06425c" stroke-width="0.2"></path>
     <path d="M55,35 L65,50 L85,50 z" fill="#052f40" stroke="#052f40" stroke-width="0.2"></path>
     <path d="M45,35 L35,50 L15,50 z" fill="#052f40" stroke="#052f40" stroke-width="0.2"></path>
     <path d="M65,50 L65,55 L70,50 z" fill="#295bab" stroke="#295bab" stroke-width="0.2"></path>
     <path d="M35,50 L35,55 L30,50 z" fill="#295bab" stroke="#295bab" stroke-width="0.2"></path>         
    </svg>
    <img src="https://cdn.discordapp.com/attachments/840290327473946654/840292114478923816/unknown.png">
  </body>
  <script>function generarRandom(min, max) {
  return Math.random() * (max - min) + min
}

for(let i = 0;i <= 50;i++) {
	var el = document.createElement('div')
	var ran = generarRandom(5, 20)
	var ranCinco = generarRandom(4, 8)
	var ranSeis = generarRandom(0, 5)
	var ranDos = generarRandom(5, 300)
	var ranTres = generarRandom(5, 300)
	var ranCuatro = generarRandom(5, 110)
	
	el.style.marginLeft = ranDos + 'vw';
	el.style.marginRight = ranTres + 'vw';	
	el.style.marginTop = '-' + (parseInt(ran) + 10) + 'px';	
	el.style.background = '#'+i+i+i
	el.style.width = ran + 'px';
	el.style.height = ran + 'px';
	el.style.animationDuration = ranCinco + 's';
	el.style.animationDelay = ranSeis + 's';
	
	
	
	
	document.body.appendChild(el)
	el.classList.add('punto')
}</script>
</html>