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> <script> function generarRandom(min, max) { return Math.random() * (max - min) + min } 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>