63070052
✨ NUTTHIDA PLANGKAM
<html> <head><title>ป๊อบ ณัฐธิดา เปล่งขำ (63070052)</title></head> <style> body{ margin:0; background-image:url(https://media.discordapp.net/attachments/752901079410147439/840570815057494047/image1.jpg?width=266&height=473); } svg{ width:100%; } .moon{ fill="url(#1)" } </style> <body> <button class="night" onclick="night()">moon</button> <button class="morning" onclick="morning()">sun</button> <svg viewBox="0 0 100 100"> <defs> <radialGradient id="1" cx="50%" cy="50%" r="70%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(40, 50%, 100%);" /> <stop offset="100%" style="stop-color:hsl(40, 100%, 50%);" /> </radialGradient> </defs> <svg> <circle fill="url(#1)"cx="42" cy="31" r="27" class="moon"/>พระจันทร์ <svg>ก้อนเมฆ <animate attributeName="x" values="30;0;30" dur="5s" repeatCount="indefinite" /> <g transform="scale(.2)"><path fill="#f5f0c6" d='M 25,60 a 20,20 1 0,0 0,40 h 50 a 20,20 1 0,0 0,-40 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z' /></g> </svg> <svg> <animate attributeName="x" values="40;70;40" dur="6s" repeatCount="indefinite" /> <g transform="scale(.15)"><path fill="#f5f0c6" d='M 200,300 a 20,20 1 0,0 0,40 h 50 a 20,20 1 0,0 0,-40 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z' /></g> </svg> <svg> <animate attributeName="x" values="20;-10;20" dur="7s" repeatCount="indefinite" /> <g transform="scale(.1)"><path fill="#f5c0c6" d='M 200,500 a 20,20 1 0,0 0,40 h 50 a 20,20 1 0,0 0,-40 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z' /></g> </svg> <!-- /////////////////////////////////////////////////////////// --> แมว <svg> <path fill="#cb7f5b" d="M23 25 L33 27.5 L24 39 Z"/> <path fill="#9d6149" d="M24 39 L29 47 L29.5 32 Z"/> <path fill="#88593f" d="M29.5 32 L29 47 L40 50 Z"/> <path fill="#d2ad90" d="M33 27.5 L29.5 32 L36 44 Z"/> <path fill="#b89577" d="M33 27.5 L44 42.5 L36 44 Z"/> <path fill="#a98b6f" d="M33 27.5 L44 42.5 L46 32.5 Z"/> <path fill="#c09b7e" d="M40 50 L44 42.5 L36 44 Z"/> <path fill="#986643" d="M29.5 54.5 L29 47 L40 50 Z"/> <path fill="#553a29" d="M29.5 54.5 L33 53 L30.5 57.5 Z"/> <path fill="#8d634a" d="M43 55 L33 53 L28 62 Z"/> <path fill="#a2795b" d="M40 50 L43 55 L33 53 Z"/> <path fill="#937a5c" d="M40 50 L44 42.5 L50 50 Z"/> <path fill="#a98b67" d="M40 50 L43 55 L50 50 Z"/> <path fill="#7D5A44" d="M33 59.7 L42 61 L27 70 Z"/> <path fill="#664536" d="M42 61 L34 65.8 L44 73 Z"/> <path fill="#966D4F" d="M33 78 L34 65.8 L44 73 Z"/> <path fill="#6b4f3a" d="M43 55 L33 59.7 L53 63 Z"/> <path fill="#806750" d="M50 50 L43 55 L53 63 Z"/> <path fill="#744d3b" d="M42 61 L44 73 L54 78 Z"/> <path fill="#654536" d="M42 61 L53 63 L54 78 Z"/> <path fill="#83533d" d="M45 87 L44 73 L54 78 Z"/> <path fill="#614537" d="M54 78 L70 80 L61 95 Z"/> <path fill="#785140" d="M61.7 68 L75 70 L70 80 Z"/> <path fill="#845742" d="M61.7 68 L54 78 L70 80 Z"/> <path fill="#8d695d" d="M75 70 L70 80 L82 85 Z"/> <path fill="#a77b56" d="M53 63 L71 56 L54 78 Z"/> <path fill="#ccac85" d="M71 56 L61.7 68 L75 70 Z"/> <path fill="#d1b698" d="M75 70 L77 65 L71 56 Z"/> <path fill="#694f41" d="M50 50 L53 63 L55 53 Z"/> <path fill="#917359" d="M55 53 L71 56 L53 63 Z"/> <path fill="#d9c1a5" d="M71 56 L85 60 L77 65 Z"/> <path fill="#ccaf8d" d="M71 56 L85 60 L77 48 Z"/> <path fill="#d9bf9c" d="M85 49.5 L85 60 L77 48 Z"/> <path fill="#ded1c1" d="M85 49.5 L87.5 47.5 L88 53 L85 60 Z"/> <path fill="#d09a7e" d="M85 46 L87.5 47.5 L85 43 Z"/> <path fill="#be9076" d="M85 43 L85 46 L80.5 45 Z"/> <path fill="#bfb3a7" d="M85 46 L87.5 47.5 L85 49.5 Z"/> <path fill="#936a4e" d="M85 46 L85 49.5 L80.5 45 Z"/> <path fill="#d4ba97" d="M80.5 45 L85 49.5 L77 48 Z"/> <path fill="#dac8b0" d="M80.5 45 L85 43 L78 40 Z"/> <path fill="#dfbe91" d="M80.5 45 L76 44 L78 40 Z"/> <path fill="#c3a27d" d="M80.5 45 L76 44 L71 42.5 L77 48 Z"/> <path fill="#d5c4aa" d="M71 38 L76 44 L78 40 L74 35 Z"/> <path fill="#c5b99f" d="M69 42 L76 44 L71 38 Z"/> <path fill="#ccb596" d="M71 56 L71 49.5 L77 48 Z"/> <path fill="#9b8264" d="M71 56 L71 49.5 L55 53 Z"/> <path fill="#a0866b" d="M71 49.5 L62.5 48 L55 53 Z"/> <path fill="#947a61" d="M56 47 L62.5 48 L55 53 Z"/> <path fill="#715f4b" d="M55 53 L50 50 L57 43 Z"/> <path fill="#a48a6f" d="M59 41 L50 50 L44 42.5 Z"/> <path fill="#ad9370" d="M59 41 L58 35 L44 42.5 Z"/> <path fill="#C8AD80" d="M46 32.5 L58 35 L44 42.5 Z"/> <path fill="#d8c09c" d="M46 32.5 L58 35 L52 30 Z"/> <path fill="#C5B294" d="M56 27 L58 35 L52 30 Z"/> <path fill="#a8846a" d="M56 27 L55 17.5 L52 30 Z"/> <path fill="#dbbf98" d="M56 27 L60 22.5 L55 17.5 Z"/> <path fill="#d5c4aa" d="M56 27 L60 22.5 L61 28 Z"/> <path fill="#c5b99f" d="M56 27 L58 35 L61 28 Z"/> <path fill="#dbcdb3" d="M63 37 L58 35 L61 28 L65 35 Z"/> <path fill="#a28a6e" d="M63 37 L58 35 L59 41 Z"/> <path fill="#e4d9c5" d="M69 27.5 L61 28 L65 35 Z"/> <path fill="#cfc4b0" d="M69 27.5 L65 35 L72 34 Z"/> <path fill="#e6dfcf" d="M69 27.5 L72 34 L77 34 Z"/> <path fill="#e1d1b8" d="M57 43 L60 43 L62 45 L56 47 Z"/> <path fill="#d2c4a7" d="M62 45 L56 47 L62.5 48 Z"/> <path fill="#ddcfb2" d="M62 45 L62.5 48 L71 49.5 L66 46 Z"/> <path fill="#ecdfc6" d="M70 45 L66 46 L71 49.5 Z"/> <path fill="#e5d5bb" d="M70 45 L73.8 45 L71 49.5 Z"/> <path fill="#e8d9c4" d="M73.8 45 L77 48 L71 49.5 Z"/> <path fill="#e4dac1" d="M65 35 L72 34 L71 38 L67 38.5 Z"/> <path fill="#af957a" d="M63 37 L65 35 L67 38.5 Z"/> <path fill="#d8d2c4" d="M72 34 L75 34 L71 38 Z"/> <path fill="#d5c6b1" d="M69 42 L71 38 L67 38.5 Z"/> <path fill="#a48767" d="M57 43 L59 41 L60 43 Z"/> <path fill="#cabd93" d="M59 41 L60 43 L63.5 43 L62 41 Z"/> <path fill="#e5deb2" d="M60 43 L62 45 L62 43 Z"/> <path fill="#d9d4ae" d="M62 43 L63.5 43 L64 44 L62 45 Z"/> <path fill="#997c5a" d="M59 41 L62 41 L62 38 Z"/> <path fill="#3e2511" d="M63 37 L67 38.5 L65 39 L62 38 Z"/> <path fill="#927869" d="M62 41 L65 39 L62 38 Z"/> <path fill="#e6e7bf" d="M63.5 43 L62 45 L65 45.8 Z"/> <path fill="#dbcf9b" d="M63.5 43 L67 44 L65 45.8 Z"/> <path fill="#bba281" d="M67 44 L65 45.8 L66 46 L70 45 Z"/> <path fill="#6b4a29" d="M67 41 L67 44 L68.5 43.5 Z"/> <path fill="#33170c" d="M69.3 43 L68.5 43.5 L67 41 Z"/> <path fill="#a48779" d="M70 45 L67 44 L68.5 43.5 L69.3 43 Z"/> <path fill="#c0a383" d="M69.3 43 L70 45 L73.8 45 Z"/> <path fill="#97654e" d="M71 42.5 L73.8 45 L69.3 43 Z"/> <path fill="#684935" d="M67 41 L69.3 43 L71 42.5 Z"/> <path fill="#634636" d="M69 42 L67 41 L65 39 L67 38.5 Z"/> <path fill="#3d3e36" d="M62 41 L63.5 43 L65 43.4 L65 42 Z"/> <path fill="#e9e8f1" d="M62 41 L65 39 L65 42 Z"/> <path fill="#b19774" d="M65 39 L67 41 L65 42 Z"/> <path fill="#d0bb82" d="M65 42 L67 41 L67 44 L65 45.8 Z"/> <path fill="#b9a98f" d="M74 35 L75 34 L75.6 37 Z"/> <path fill="#cabdaa" d="M75.6 37 L77 34 L75 34 Z"/> <path fill="#8f867f" d="M77 34 L75.6 37 L77.5 36 Z"/> <path fill="#554a44" d="M77.5 36 L77 36.2 L78 38 Z"/> <path fill="#c7bab1" d="M75.6 37 L77 36.2 L78 38 Z"/> <path fill="#473831" d="M75.6 37 L78 40 L78 38 Z"/> </svg> </svg> <script> function night(){ document.body.style.background = "url(https://media.discordapp.net/attachments/752901079410147439/840570815057494047/image1.jpg?width=266&height=473)"; document.querySelector(".moon").style.fill = "url(#1)"; } function morning(){ document.body.style.background = "#FEC062"; document.querySelector(".moon").style.fill = "#f5f0c6"; } </script> </svg> <img src="https://media.discordapp.net/attachments/752901079410147439/840230990830895154/image0.jpg?width=473&height=473"> </body> </html>