63070029-ป่าน ชนิกา ปรีชาพลกุล
✨ นางสาวชนิกา ปรีชาพลกุล
<html> <head> <title>Let's Start</title> <style> body{ background:#eee; margin:1em; font-family:sans-serif; } svg{ background:linear-gradient(120deg,#ffffff,#e7eaf1,#8798bc,#000000, #272b3a,#a8b2d4,#07183c); width:100%; } #moon:hover{ filter:drop-shadow(0px 0px 10px #f3d559); transition:1s; } #ball:hover{ filter:drop-shadow(0px 0px 20px #07183c); transition:5s; } @keyframes kraprib{ from{opacity:.2} to{opacity:1} } .star{ position:absolute; width:3px; height:3px; border-radius:100%; background:#e4e356; opacity:1; box-shadow:0px 0px 5px 2px #fff; } .star:nth-child(1){ top:30%; left:50%; animation:kraprib 1s infinite alternate; } .star:nth-child(2){ top:40%; left:60%; animation:kraprib 1s infinite alternate; } .star:nth-child(3){ top:50%; left:10%; animation:kraprib 1s infinite alternate; } .star:nth-child(4){ top:20%; left:80%; animation:kraprib 1s infinite alternate; } .star:nth-child(5){ top:40%; left:95%; animation:kraprib 1s infinite alternate; } .star:nth-child(6){ top:50%; left:30%; animation:kraprib 1s infinite alternate; } .star:nth-child(7){ top:70%; left:25%; animation:kraprib 1s infinite alternate; } .star:nth-child(8){ top:10%; left:55%; animation:kraprib 1s infinite alternate; } .star:nth-child(9){ top:5%; left:50%; animation:kraprib 1s infinite alternate; } .star:nth-child(10){ top:10%; left:65%; animation:kraprib 1s infinite alternate; } .star:nth-child(11){ top:40%; left:40%; animation:kraprib 1s infinite alternate; } .star:nth-child(12){ top:30%; left:60%; animation:kraprib 1s infinite alternate; } </style> </head> <body> <svg viewBox="0 0 300 300"> <g id="ball"> <circle cx="130" cy="300" r="110" style="fill:#e7eaf1;" > <animate attributeName="r" values="110;100; 105;110;" dur="5s" repeatCount="indefinite"/> </circle> </g> <circle cx="0" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="5s" repeatCount="indefinite"/> </circle> <circle cx="10" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="20s" repeatCount="indefinite"/> </circle> <circle cx="50" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <circle cx="10" cy="0" r="3" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="9s" repeatCount="indefinite"/> </circle> <circle cx="30" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <circle cx="40" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="8s" repeatCount="indefinite"/> </circle> <circle cx="60" cy="0" r="3" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="2s" repeatCount="indefinite"/> </circle> <circle cx="80" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="9s" repeatCount="indefinite"/> </circle> <circle cx="90" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="15s" repeatCount="indefinite"/> </circle> <circle cx="40" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="18s" repeatCount="indefinite"/> </circle> <circle cx="80" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <circle cx="100" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="20s" repeatCount="indefinite"/> </circle> <circle cx="110" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="8s" repeatCount="indefinite"/> </circle> <circle cx="120" cy="0" r="1" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="9s" repeatCount="indefinite"/> </circle> <circle cx="130" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="6s" repeatCount="indefinite"/> </circle> <circle cx="140" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="15s" repeatCount="indefinite"/> </circle> <circle cx="150" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="9s" repeatCount="indefinite"/> </circle> <circle cx="130" cy="0" r="3" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <circle cx="160" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="20s" repeatCount="indefinite"/> </circle> <circle cx="160" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="15s" repeatCount="indefinite"/> </circle> <circle cx="170" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="8s" repeatCount="indefinite"/> </circle> <circle cx="180" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="13s" repeatCount="indefinite"/> </circle> <circle cx="190" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="24s" repeatCount="indefinite"/> </circle> <circle cx="200" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="20s" repeatCount="indefinite"/> </circle> <circle cx="210" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="15s" repeatCount="indefinite"/> </circle> <circle cx="222" cy="0" r="3" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <circle cx="220" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="20s" repeatCount="indefinite"/> </circle> <circle cx="205" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="9s" repeatCount="indefinite"/> </circle> <circle cx="250" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="5s" repeatCount="indefinite"/> </circle> <circle cx="160" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="31s" repeatCount="indefinite"/> </circle> <circle cx="260" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="5s" repeatCount="indefinite"/> </circle> <circle cx="260" cy="0" r="3" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="9s" repeatCount="indefinite"/> </circle> <circle cx="260" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="15s" repeatCount="indefinite"/> </circle> <circle cx="280" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="6s" repeatCount="indefinite"/> </circle> <circle cx="290" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <circle cx="300" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="2s" repeatCount="indefinite"/> </circle> <circle cx="300" cy="0" r="2" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="5s" repeatCount="indefinite"/> </circle> <circle cx="295" cy="0" r="5" style="fill:#e7eaf1;" > <animate attributeName="cy" values="0;100 ;200;300;" dur="10s" repeatCount="indefinite"/> </circle> <---ต้นไม้---> <rect x = "100 " y="70"width="5" height="10" style="fill:#463f3e;stroke-width:1;stroke:#fff" /> <path fill="#34453e" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m100 0 l-20 70 h40z"></path> <path fill="#4e685d" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m100 0 l-20 50 h40z"></path> <path fill="#688b7c" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m100 0 l-15 30 h30z"></path> <rect x = "50 " y="90"width="15" height="30" style="fill:#463f3e;stroke-width:1;stroke:#fff" /> <path fill="#34453e" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m60 30 l-40 70 h80z"></path> <path fill="#4e685d" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m60 30 l-40 50 h80z"></path> <path fill="#688b7c" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m60 30 l-30 30 h60z"></path> <rect x = "200 " y="90"width="5" height="10" style="fill:#463f3e;stroke-width:1;stroke:#fff" /> <path fill="#34453e" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m200 20 l-20 70 h40z"></path> <path fill="#4e685d" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m200 20 l-20 50 h40z"></path> <path fill="#688b7c" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m200 20 l-15 30 h30z"></path> <rect x = "270 " y="110"width="5" height="10" style="fill:#463f3e;stroke-width:1;stroke:#fff" /> <path fill="#34453e" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m270 40 l-20 70 h40z"></path> <path fill="#4e685d" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m270 40 l-20 50 h40z"></path> <path fill="#688b7c" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m270 40 l-15 30 h30z"></path> <--หมี--> <--หาง--> <path fill="#e0fdfd" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m60 145 v15 l5 10 l10 -20 z"></path> <--ตัว--> <path fill="#84f7fa" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m160 154 l5 27 l-15 0 l-6 -26 z"></path> <path fill="#d1fcfd" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m90 200 v-50 l-10 -20 l-20 15 z"></path> <path fill="#a3f9fb" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m90 200 v-50 l 10 5 l15 40z"></path> <path fill="#84f7fa" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m90 200 l5 5 h25 l5 -5 l-10 -5z"></path> <path fill="#c1fbfc" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m90 150 l25 25 l-10 -55z"></path> <path fill="#66f6f9" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m80 130 l10 20 l15 -30 z"></path> <path fill="#66f6f9" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m105 120 l30 20 l5 20 l-25 15 z"></path> <path fill="#51c4c7" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m104 165 l10 30 v-20z"></path> <path fill="#3d9395" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m115 175 l0 10 l20 -10 z "></path> <path fill="#51c4c7" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m115 175 l20 0 l5 -15 z"></path> <path fill="#effefe" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m140 160 l10 -5 l5 27 l-20 -5 z"></path> <path fill="#66f6f9" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m135 178 l5 26 h7z"></path> <path fill="#b2fafc" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m140 160 l-5 -20 l15 -20 l0 35z"></path> <path fill="#47acae" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m165 202 h5 l2 -3 l-20 -8z"></path> <path fill="#66f6f9" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m165 180 l-5 17 v2h-6v-20 z "></path> <path fill="#e0fdfd" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m105 120h45 l-15 20z"></path> <path fill="#51c4c7" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m144 199 l3 5 h17 l5 -3 l-10 -5 z"></path> <path fill="#66f6f9" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m180 135 l-20 20 l40 5 v10 z"></path> <path fill="#b2fafc" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m145 200 l-11 -25 l21 5 l-0 17 z"></path> <path fill="#e0fdfd" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m 160 155 l20 -20 l-20 -10 l -10 -5 v35z"></path> <path fill="#84f7fa" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m215 175 l-10 10 l-10 -20z"></path> <path fill="#51c4c7" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m180 135 l35 20 v20 l-20 -10z"></path> <path fill="#3d9395" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m215 155 v10 l 10 -5 z"></path> <path fill="#3d9395" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m190 155 l5 10 l10 4 v-7 z"></path> <path fill="#b2fafc" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m205 185 l-15 5 l-25 -40 l25 5z"></path> <path fill="#b2fafc" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m190 190 v5 l10 5 l5 -15z"></path> <path fill="#3d9395" stroke="#fff" stroke-width="1" stroke-linejoin="round" d = "m 197 195 v4 l3 1 l1 -2 z"></path> <circle cx="195" cy="180" r="3" fill="#337b7c"/> <circle cx="196" cy="179" r="1" fill="#eee"/> <svg x=105> <--moon--> <g id="moon"> <circle cx="190" cy="0" r="41" fill="#f5dd77" stroke ="white" /> <path fill="#f5de7e" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m150 0 h20 v20z"></path> <path fill="#f5de7e" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m170 20 h20 v-20z"></path> <path fill="#f2d147" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m170 0 h20 v20z"></path> <path fill="#f2d147" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m170 20 h20 v20z"></path> <path fill="#f2d147" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m170 20 h-15 l10 10z"></path> <path fill="#f2d147" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m190 0 h-20 v20z"></path> <path fill="#f2d147" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m190 20 h20 v-20z"></path> <path fill="#f2d147" stroke="#fff" stroke-width="1" stroke-linejoin="round" d ="m200 38 l20 -20 l-10 -5z"></path> </g> </svg> </svg> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> <div class="star"> </div> </body> </html>