Final Multi

✨ BUTTHACHAI AROM

<html>
  <head>  
    <title>บุฒฐไชย์ อารมณ์ (63070097)</title>
    <style>   
      svg{
/*   		  background: url('https://images.vexels.com/media/users/17482/114144/preview2/934bc5ac6e402cb01d2a297bf6c2fa9b-free-vector-origami-polar-bear.png') no-repeat center; */
        width: 100%;
      }
      
		body {
        background: #B6E4E4;
        animation: bg 19s infinite alternate;
        margin: 0;
      }
      
      @keyframes bg {
        0% { background: #B6E4E4; }
        100% { background: #2C3C4D; }
      }
      
/* ref   */
      *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
        }

.snow {
           background: #ffff !important;
           border-radius: 50%;
           position: fixed;
           top: 0;
           animation-name: caer;
           filter:blur(2px);
           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">
      

        <path d="M 82,5 C 78,5 78,11 82,11 C 86,11 86,5 82,5"fill="#FBF68C" >
        <animate attributeName="d" values="
           M 82,5 C 78,5 78,11 82,11 C 86,11 86,5 82,5;
           M 82,74 C 78,74 78,80 82,80 C 86,80 86,74 82,74;
           M 82,5 C 78,5 78,11 82,11 C 86,11 86,5 82,5" dur="37" repeatCount = "indefinite"/>
       	</path>
      

    	  <path d="M 43,37 C 46,39 47,42 44,46 C 49,44 51,39 43,37"fill="#E2DD7E" >
        <animate attributeName="d" values="
           M 43,37 C 46,39 47,42 44,46 C 49,44 51,39 43,37;
           M 43,6 C 46,8 47,11 44,15 C 49,13 51,8 43,6;
           M 43,37 C 46,39 47,42 44,46 C 49,44 51,39 43,37" dur="37" repeatCount = "indefinite"/>
        </path>

<path d="M 0,46 L 100,46 L 0,100"fill="#FFFFFF" />
     	  <path d="M 100,43 L 100,100 L 0,100"fill="#FFFFFF" />
        <path d="M 28.8,28.6 L 1.3,67.1 L 0.2,47.2"fill="#e7e8e9" />
     	  <path d="M 28.7,28.5 L 35.9,33.2 L 40.8,30.2"fill="#d1d2d4" />
     	  <path d="M 28.7,28.6 L 30.7,51.2 L 9.8,55.2"fill="#FFFFFF" />
        <path d="M 43.7,28.5 L 18.9,71.5 L 46.6,73.3"fill="#e7e8e9" />
        <path d="M 35.7,32.9 L 43.8,28.5 L 31.5,49.8"fill="#FFFFFF" />
        <path d="M 28.8,28.6 L 39.7,35.5 L 27.1,57.1"fill="#FFFFFF" /> 
        <path d="M 43.6,28.4 L 45.9,63.6 L 99.6,49.1"fill="#FFFFFF" />
     	  <path d="M 59.1,28.5 L 53.7,32 L 95.2,52.8"fill="#FFFFFF" />
        <path d="M 59.1,28.6 L 80.8,47.2 L 99.5,46.8"fill="#FFFFFF" />
        <path d="M 43.8,28.4 L 72.9,41.7 L 51.0,30.3"fill="#d1d2d4" />     
        <path d="M 49.4,29.9 L 59.3,28.6 L 53.9,32.1"fill="#d1d2d4" />
        <path d="M 70.8,46.4 L 97.6,46.3 L 92.8,63.8"fill="#d1d2d4" />
     	  <path d="M 92.6,63.6 L 97.3,46.5 L 96.5,63.4"fill="#d1d2d4" />
      
   
        <path d="M 26.4,67.7 L 24.9,71.7 L 31.6,63.4"fill="#a8a6b4" />
        <path d="M 24.8,71.5 L 31.6,63.4 L 39.04,61.1"fill="#bfbdc8" />  
        <path d="M 24.7,71.6 L 38.8,61.1 L 40,69.6"fill="#d2d1dd" />      
        <path d="M 38.8,61.1 L 39.9,69.7 L 51.5,67.3 L 49.1,63.9"fill="#eeebf1" />      
        <path d="M 49.2,64.3 L 51.5,67.4 L 56.3,64.3"fill="#dfdfe8" />      
        <path d="M 27.4,71.2 L 38.2,76.7 L 39.9,69.6"fill="#bdbfcd" />     
        <path d="M 24.7,71.7 L 26.8,79 L 38.2,76.6 L 27.5,71.2"fill="#858a96" />      
        <path d="M 26.8,78.9 L 38.4,76.5 L 36,84.5"fill="#949bad" />   
     	  <path d="M 26.9,78.9 L 24.4,81.4 L 30.8,85.7 L 35.3,83.9"fill="#666c78" />  
        <path d="M 24.4,81.4 L 22.7,84.6 L 28.9,88 L 30.8,85.7"fill="#6a727d" />      
        <path d="M 22.6,84.5 L 22.7,88.7 L 26.7,92.9 L 28.9,88"fill="#74818f" />   
        <path d="M 28.8,88.0 L 26.6,93.1 L 28.8,93 z"fill="#74818f" />   
        <path d="M 28.7,90.9 L 28.7,92.8 L 31.3,92.9 L 31.3,91.7 L 29.9,91.7"fill="#74818f" />      
        <path d="M 39.9,69.6 L 38.3,76.7 L 45,83.2 L 44.7,76.9"fill="#e2e6ee" />   
        <path d="M 39.8,69.5 L 44.6,77.1 L 51.5,73.9 L 51.4,67.3"fill="#b3b5c4" />     
        <path d="M 38.2,76.4 L 36,84.7 L 45,83.2"fill="#b5bccd" />
        <path d="M 35.8,84.5 L 45,83.1 L 39.4,91.8"fill="#97a3b5" />   
        <path d="M 45.0,83.1 L 39.4,91.6 L 39.3,92.8 L 45.3,91.8 L 46,91.8 L 45.2,89.5"fill="#8e9aaa" />
        <path d="M 39.3,92.3 L 46.1,91.7 L 49.2,92.9 L 39.1,93.5 z"fill="#7f8fa0" />
     	  <path d="M 39.3,93.5 L 51.0,92.8 L 51.2,93.8 L 50.3,94.1 L 39.8,94.3"fill="#758798" />
        <path d="M 45,89.3 L 46,91.8 L 49.1,92.8"fill="#c0c7d2" />
        <path d="M 44.6,76.9 L 51.5,74 L 48.7,80.2 L 44.8 80.6"fill="#8d95a6" />       
        <path d="M 44.8,80.4 L 48.7,80.1 L 48.8,81.1 L 44.9 81.4"fill="#858c9d" />
        <path d="M 44.9,81.3 L 48.8,81 L 45,83"fill="#757b8a" />     
        <path d="M 51.4,67.2 L 56.2,64.3 L 59.12,71.7"fill="#bebcca" />  
        <path d="M 51.4,67.2 L 51.5,74.1 L 59.2,71.6"fill="#a1a3b2" />     
        <path d="M 51.3,73.9 L 48.6,80.1 L 51.7,80.2 L 59.2,71.6"fill="#d3d6e4" />      
        <path d="M 59.1,71.6 L 51.5,80.1 L 56.8,83.1 L 60.3,77.6"fill="#c8cbdb" />
        <path d="M 48.5,80.0 L 52.3,93.5 L 53.7,92.2 L 51.7,80.1"fill="#949fb1" />
     	  <path d="M 48.8,80.9 L 49.7,89.1 L 52.4,93.6"fill="#7a8798" />  
        <path d="M 52.4,93.5 L 53.7,92 L 57.8,93.9 L 57.5,94.5"fill="#748495" />     
        <path d="M 55.3,91.0 L 53.5,92.2 L 57.7,93.8"fill="#b9c6d5" /> 
        <path d="M 51.5,80.1 L 53.6,92.1 L 55.4,91.0 L 55.3,86.1 L 56.8,83.1"fill="#a0acbc" />  
        <path d="M 56.6,83.1 L 55.4,86 L 58.4,88.0"fill="#778190" />      
        <path d="M 55.2,85.9 L 55.4,91.1 L 56.3,92.3 L 57.2,91.5 L 58.5,88.1"fill="#606b75" />    
        <path d="M 57.2,91.4 L 56.4,92.2 L 57.1,93.1 L 59.6,93.3 L 59.9,92.6"fill="#606b75" />    
        <path d="M 56.2,92.1 L 58.1,92.4 L 58.8,94.1 L 57.4,93.5"fill="#a2adbd" />
        <path d="M 56.1,64.3 L 59.1,71.7 L 61.3,72.1 L 61.4,68.1"fill="#d4d5e2" />      
        <path d="M 59,71.6 L 60.2,77.6 L 66.9,73"fill="#9699a8" />     
        <path d="M 60.2,77.4 L 56.6,83.1 L 64.1,77.4"fill="#808795" />      
        <path d="M 60.2,77.4 L 68.2,77.7 L 66.8,73.0"fill="#878b9a" />          
        <path d="M 61.3,68.2 L 61.1,72.1 L 66.8,73.1 L 68.5,69.6"fill="#c1c3d2" />     
        <path d="M 68.4,69.6 L 66.7,73.1 L 72.7,72.0"fill="#acafbe" />     
        <path d="M 66.7,73 L 68.1,77.6 L 75.2,75 L 72.7,71.8"fill="#9194a3" />
        <path d="M 68.4,69.6 L 69.3,68 L 74.6,70.1 L 72.9,72.2"fill="#c5c4d3" />      
		  <path d="M 72.5,71.9 L 75,75 L 78.5,75 L 79.7,74.3" fill="#858a96">
        <animate attributeName="d" values="
            M 72.5,71.9 L 75,75 L 78.5,75 L 79.7,74.3;
            M 73,72 L 75,75 L 79,75 L 80,74;
            M 72.5,71.9 L 75,75 L 78.5,75 L 79.7,74.3" dur="4s" repeatCount = "indefinite"/>
        </path>
        <path d="M 72.6,71.8 L 80.1,74 L 81,72.7 L 80.4,71.3 L 74.5,70.0"fill="#afb1c0" />   
        <path d="M 69.1,68 L 74.5,70.2 L 80.4,71.3 L 74.8,68"fill="#e5e7ed" />
        <path d="M 80.3,71.3 L 80.9,72.7 L 81.6,72.4 z"fill="#85858f" />      
        <path d="M 75.3,69.6 L 76.1,69.3 L 76.6,69.9 L 75.8,70"fill="#737582" >   
        <animate attributeName="d" values="
            M 75.3,69.6 L 76.1,69.3 L 76.6,69.9 L 75.8,70;
            M 75.4,69.4 L 76.5,69.7 L 75.3,69.5;
            M 75.3,69.6 L 76.1,69.3 L 76.6,69.9 L 75.8,70" dur="4s" repeatCount = "indefinite"/>
        </path>      
        <path d="M 68.5,69.3 L 67.4,68.2 L 68.1,66.6 L 69.6,66.6 L 70.7,68"fill="#7d7f8b" />
        <path d="M 68.4,67.8 L 69.1,68.8 L 69.8,68.7 L 69.7,67.8 L 69,67.4"fill="#555658" />
            
             
		  <path d="M 15,10 Q 7,11 12,16 Q 11,21 16,20 Q 21,26 26,20 Q 30,24 33,19 Q 40,18 35,14 Q 34,10 30,11 Q30,4 22,9 Q 17,5 15,10"fill="#EAFBFB">
        <animate attributeName="d" values="
           M 15,10 Q 7,11 12,16 Q 11,21 16,20 Q 21,26 26,20 Q 30,24 33,19 Q 40,18 35,14 Q 34,10 30,11 Q30,4 22,9 Q 17,5 15,10;
           M 25,10 Q 17,11 22,16 Q 21,21 26,20 Q 31,26 36,20 Q 40,24 43,19 Q 50,18 45,14 Q 44,10 40,11 Q 40,4 32,9 Q 27,5 25,10;
            M 15,10 Q 7,11 12,16 Q 11,21 16,20 Q 21,26 26,20 Q 30,24 33,19 Q 40,18 35,14 Q 34,10 30,11 Q30,4 22,9 Q 17,5 15,10" dur="7s" repeatCount = "indefinite"/>
        </path>      
     	  <path d="M 72,14 Q 77,11 80,15 Q 86,12 90,17 Q 96,18 93,23 Q 95,29 88,28 Q 81,33 80,27 Q 71,30 71,24 Q 65,23 69,19 Q 64,13 72,14"fill="#EAF7F7" >
       <animate attributeName="d" values="
           M 72,14 Q 77,11 80,15 Q 86,12 90,17 Q 96,18 93,23 Q 95,29 88,28 Q 81,33 80,27 Q 71,30 71,24 Q 65,23 69,19 Q 64,13 72,14;
           M 67,12 Q 72,9 75,13 Q 81,10 85,15 Q 91,16 88,21 Q 90,27 83,26 Q 76,31 75,25 Q 66,28 66,22 Q 60,21 64,17 Q 59,11 67,12;
            M 72,14 Q 77,11 80,15 Q 86,12 90,17 Q 96,18 93,23 Q 95,29 88,28 Q 81,33 80,27 Q 71,30 71,24 Q 65,23 69,19 Q 64,13 72,14" dur="10" repeatCount = "indefinite"/>
        </path>  
        
    </svg>    
  </body>

for(let i = 0;i <= 100;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('snow')
     }
  </script>
</html>