svg001

✨ PONGSATORN PHATTARASRIVAJCHAKARN

<html>
  <head>
    <title>พงศธร ภัทรศรีเวชการ (63070110)</title>
    <style>
      body{
        background-image: linear-gradient(to right,#ffdfd3 ,#fec8d8);
        margin:0;
        
      }
      svg{
        width:100%;
      }
      
		.punto {
           background: #d0f8fb !important;
           border-radius: 50%;
           position: fixed;
           top: 0;
           animation: caer 2s linear infinite;
        	  filter:blur(2.75px);
    	}
    .left1{
        animation: gogo 1s} 
    .left2{
        animation: gogo 2s} 
    .left3{
        animation: gogo 3s} 
  .left4{
        animation: gogo 4s} 
  .left5{
        animation: gogo 5s} 
  .left6{
        animation: gogo 6s} 
  .top1{
        animation: eiei 1s} 
  .top2{
        animation: eiei 2s} 
  .top3{
        animation: eiei 3s} 
  .top4{
        animation: eiei 4s} 
.top5{
        animation: eiei 5s}    
  .top6{
        animation: eiei 6s}

@keyframes gogo {
            0%{
              transform:translatex(-300px);
              }
            100%{
              transform:translatex(0px);
              }
        }
        @keyframes eiei {
          0%{
              transform:translatey(-70px);
              }
            100%{
              transform:translatey(0px);
              }
        }
    @keyframes caer {
       0% {
          top: 0;
          left: -5px;
       }
       30%{
         left: 5px;
       }
       50% {
          left: -5px;
       }
       70%{
          left:5px
       }
       100% {
          top: 110vh;
          left: -5px;
       }
    }
    
      
    </style>
  </head>
  <body>

<path d="M 89 167 L 99 174 L 96 148" fill="#2bc9a8"/>
      <path d="M 96 148 L 98 169 L 108 151" fill="#86e7d6"/>
      <path d="M 98 169 L 108 151 L 104 173" fill="#069a7a"/>
      <path d="M 108 151 L 118 152 L 117 165 L 104 173" fill="#1cbc96"/>
      <path d="M 118 152 L 117 165 L 134 153" fill="#a8efcb"/>
      <path d="M 96 148 L 102 138 L 108 151" fill="#1dbe92"/>
      <path d="M 102 138 L 124 135 L 108 151" fill="#acecde"/>
      <path d="M 124 135 L 107.5 151 L 134 153" fill="#44d8be"/>
      <path d="M 124 135 L 134 153 L 142 142" fill="#34cab1"/>
      

      <path d="M 124 135 L 113 127 L 102 138" fill="#1fb9eb"/>
      <path d="M 124 135 L 126 114 L 113 127" fill="#1261be"/>
      <path d="M 124 135 L 126 114 L 135 132" fill="#0343a5"/>
      <path d="M 124 135 L 146 128 L 142 142" fill="#70d2ef"/>
 		<path d="M 126 114 L 149 109 L 134.7 131.8" fill="#58d7f7"/>
      <path d="M 134.6 132 L 149 109 L 146 128" fill="#14abe4"/>
      <path d="M 149 109 L 131 106 L 126 114" fill="#0669c4"/>
      <path d="M 131 106 L 146 96 L 149 97 L 149 109" fill="#22bfe8"/>
      <path d="M 131 106 L 134 95 L 141 91 L 148 95" fill="#b8f5fe"/>
      <path d="M 141 91 L 148 88 L 148 95" fill="#18aed5"/>
      <path d="M 148 88 L 154 91 L 151 96 L 148 95" fill="#0698dd"/>
      <path d="M 149 109 L 155 102 L 151 96 L 149 97" fill="#2cabf9"/>
      <path d="M 151 96 L 154 91 L 157 97 L 155 102" fill="#88e8fa"/>
		  <path d="M 154 91 L 181 90 L 155 94" fill="#144aad"/>
      <path d="M 155 94 L 180 90 L 157 97" fill="#2fb3e3"/>
      <path d="" fill="#0084c7">
      <animate attributeName="d" values="
        M 157 97 L 155 102 L 170 93;
        M 157 97 L 155 102 L 170 98;
        M 157 97 L 155 102 L 170 93" dur="5s" repeatCount = "indefinite"/>
      </path>
      <path d="M 148 95 L 146.4 96 L 149 97 L 151 96" fill="black"/>

<path d="M 126 114 L 120 113 L 113 127" fill="#07a4a5"/>
      <path d="M 113 127 L 108 107 L 120 113" fill="#0395b7"/>
      <path d="M 120 113 L 104 97 L 96 93 L 102 104" fill="#7de7e9"/>
      <path d="M 108 107 L 102 104 L 110 115" fill="#096d77"/>
      <path d="M 110 115 L 98 145 L 113 127" fill="#cbf1f8"class="left1"/>
      <path d="M 96 93 L 85 88 L 102 104" fill="#58d0d6"/>
      <path d="M 110 115 L 92 143 L 98 145.3" fill="#bdedee" class="left2"/>-+
      <path d="M 110 115 L 90 147 L 88 138" fill="#e9f4f6"  class="left3"/>-+
      <path d="M 98 100 L 85 88 L 61 80" fill="#b4f2f5" />
      <path d="M 98 100 L 61 80 L 62 87" fill="#d9f7f6"  class="left1"/>-+
      <path d="M 98 100 L 92 136 L 83 141 L 81.7 139" fill="#5bd4d7"  class="left5"/>-+
      <path d="M 98 100 L 95.7 114 L 102 104" fill="#d5e8ed"  class="left2"/>--+
      <path d="M 102 104 L 95.7 114 L 94 124 L 105 108" fill="#26c9d4"  class="left3"/>-+
      <path d="M 104.4 107.2 L 94 124 L 92 134 L 110 115" fill="#8fe3eb "  class="left4"/>-+
      <path d="M 98 100 L 58 85 L 58 93" fill="#e6fbfa" class="left3"/>-+
      <path d="M 98 100 L 64 94 L 64 100" fill="#63cdd4" class="left4"/>-+
      <path d="M 98 100 L 59 100 L 61 108" fill="#dce1e1" class="left5"/>-+
      <path d="M 98 100 L 64 107 L 70 119" fill="#cff4f5" class="left6"/>-+
      <path d="M 98 100 L 64 120 L 69 121 L 77 120" fill="#85e1e9" class="left3"/>-+
      <path d="M 98 100 L 74 135 L 69 128 L 74 122" fill="#97ecf0" class="left4"/>-+
      <path d="M 98 100 L 83 136 L 80 137 L 79 128" fill="#49c5d5" class="left6"/>-+

<path d="M 30 30 L 53 24 L 40 35" fill="#99defd" class="top1">
                <animate attributeName="d" values="
        M 30 30 L 53 24 L 40 35;
        M 91 47 L 91 39 L 99 45;
        M 30 30 L 53 24 L 40 35" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 53 24 L 36 24"  fill="#03e2d0" class="top2">
                <animate attributeName="d" values="
        M 30 30 L 53 24 L 36 24;
        M 97 52 L 91 47 L 99 45;
        M 30 30 L 53 24 L 36 24" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 30 7 L 36 24"  fill="#00c1ff" class="top4">
                <animate attributeName="d" values="
        M 30 30 L 30 7 L 36 24;
        M 107 49 L 97 52 L 99 45;
        M 30 30 L 30 7 L 36 24" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 30 7 L 24 24"  fill="#9f98f6" class="top5">
                <animate attributeName="d" values="
        M 30 30 L 30 7 L 24 24;
        M 107 49 L 99 45 L 108 41;
        M 30 30 L 30 7 L 24 24" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 7 24 L 24 24"  fill = "#17c3eb"  class="top6">
                <animate attributeName="d" values="
        M 30 30 L 7 24 L 24 24;
        M 116 38 L 107 49 L 108 41;
        M 30 30 L 7 24 L 24 24" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 7 24 L 21 34"  fill="#9af9ff" class="top3">
                <animate attributeName="d" values="
        M 30 30 L 7 24 L 21 34;
        M 116 38 L 108 41 L 112 30;
        M 30 30 L 7 24 L 21 34" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 16 51 L 21 34"  fill="#00f3f9" class="top4">
                <animate attributeName="d" values="
        M 30 30 L 16 51 L 21 34;
        M 121 24 L 116 38 L 112 30;
        M 30 30 L 16 51 L 21 34" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 16 51 L 32 41 "  fill="#00d0ff" class="top3">
                <animate attributeName="d" values="
        M 30 30 L 16 51 L 32 41;
        M 105 11 L 116 14 L 110 20;
        M 30 30 L 16 51 L 32 41" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 44 51 L 32 41 "  fill="#c4b5ce" class="top2">
                <animate attributeName="d" values="
        M 30 30 L 44 51 L 32 41;
        M 116 14 L 121 24 L 110 20;
        M 30 30 L 44 51 L 32 41" dur="15s" repeatCount = "indefinite"/>
      </path>
        <path d="M 30 30 L 44 51 L 40 35"  fill="#00d8ec" class="top6">
                <animate attributeName="d" values="
        M 30 30 L 44 51 L 40 35;
        M 121 24 L 112 30 L 110 20;
        M 30 30 L 44 51 L 40 35" dur="15s" repeatCount = "indefinite"/>
      </path>
      
    </svg>
    <img src="https://cdn.discordapp.com/attachments/809088435285131315/840573576067547136/6152028ad1736ddfd12f1b00faa1cb96.jpg">
  </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.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>