งานเเก้ค่าบ ;-;
✨ KARNSIRI PHONGSIYANUWAT
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; margin:3rem font-family:sans-serif; } svg{ background:white; box-shadow:0 0 20px #0001; width:80%; } @keyframes try { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- สร้าง pattern --> <defs> <pattern id="texture1" viewBox="0,0,9,4" width="100%" height="100%"> <circle r="3" cx="5" cy="5" fill="#81D4FA88"/> <circle r="2" cx="10" cy="0" fill="#4FC3F7"/> <circle r="2" cx="0" cy="10" fill="#4FC3F7"/> <circle r="2" cx="10" cy="10" fill="#4FC3F7"/> <circle r="2" cx="0" cy="0" fill="#4FC3F7"/> </pattern><!-- moon --> <pattern id="grass" viewBox="0,0,8,8" width="10%" height="10%"> <rect width="8" height="8" fill="#FFC107"> </rect> <circle r="2" cx="2" cy="2" fill="#EF6C0033"/> <circle r=".4" cx="6" cy="6" fill="#EF6C0088"/> <circle r=".4" cx="3" cy="5" fill="#EF6C0099"/> </pattern> </defs> <rect x="50" y="0" width="50" height="50" fill=""/> <circle r="6" cx="65" cy="10" fill="url(#grass)"/> <circle r="5.5" cx="67" cy="9.5"/> <rect x="80" y="5" width="35" height="45" fill="blue"/> <rect x="76" y="25" width="15" height="25" fill="red"/> <> <!--moonend--> <!-- ใช้ pattern --> <!-- bg --> <rect x="0" y="0" width="50" height="50" fill="lightblue"/> <rect x="0" y="35" width="50" height="15" fill="green"/> <!-- sun --> <circle cx="23" cy="10" r="5" fill="Brown"></circle> <circle cx="20.5" cy="9" r=".4"></circle> <circle cx="25" cy="9" r=".4"></circle> <path d="M25 10 C27 15, 19.5 16, 20.5 10" stroke="black" stroke-width=0.2 fill="none"></path> <circle cx="23" cy="4" r=".5"> </circle> <circle id="sun" cx="29" cy="10.75" r=".5"></circle> <circle id="sun" cx="23" cy="16.25" r=".5"animation="try"></circle> <circle id="sun" cx="17" cy="10.75" r=".5"></circle> <circle id="sun" cx="18.95" cy="14.50" r=".5"></circle> <circle id="sun" cx="18" cy="5.75" r=".5"></circle> <circle id="sun" cx="27.6" cy="6.5" r=".5"></circle> <circle id="sun" cx="27" cy="14.75" r=".5"></circle> <path d="M76 25 C83 14, 84 14, 90.5 25 H76" stroke="white" stroke-width=0.2 fill="none"></path> <!-- sun animation--> <!-- sun animation--> <!--rain--> <path fill="hsl(190, 77%, 88%)" > <animate attributeName="d" values=" M2,4 c-1.5,2.5 1.5,2.5 0,0; M2,5 c-1.5,2.5 1.5,2.5 0,0; M2,30 c-1,2 1,2 0,0; " dur="1s" repeatCount="indefinite" /> </path> <!--rain--> </svg> </body> </html>