group c P’sspim
✨ WANATCHPORN SILARUAM
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#80DEEA; box-shadow:0 0 20px #0002; width:80%; } </style> </head> <body> <svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100"> <!-- จุดกลาง --> <circle r="1" fill="#fc0" cx="50" cy="50"/> <!-- พระอาทิตย์ --> <circle stroke="white" stroke-width="2" r="15" fill="#fc0" cx="20" cy="20"> </circle> <!-- ภูเขา --> <g fill="#29953B" stroke="#fff" stroke-width="2"> <path d="m0,60 l20,-39 l30,60"></path> <path d="m30,60 l30,-45 l40,60"></path> </g> <!-- หญ้า --> <path fill="#8BC34A" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M-10,60 h120 v50 h-120 "/> <!-- บ้าน --> <g fill="#F06292" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m60,50 l0,20 l30,0 l0,-20 z"/> <path d="m63,40 l20,0 l10,10 l-36,0 l6,-10"/> </g> </svg> <br> <br> <svg viewBox="0 0 100 100"> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <rect width="100" height="100" fill="#ee4e34"/> <polygon points="0,0 4,5 0,10 5,6 10,10 6,5 10,0 5,4" fill="#fcedda"/> </pattern> <pattern id="sea" viewBox="0 0 10 10" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse" > <rect width="100" height="100" fill="#333d79ff"/> <circle cx=5 cy=5 r=2 fill="#ffffff"> <animate attributeName="r" values="1;1;2;1;1" dur="2.5s" repeatCount="indefinite" /></circle> </pattern> </defs> <rect fill="url(#grass)" width="100" height="100"/> <path fill="url(#sea)" d="M0,0 h100 L0,100 "/> <rect fill="url(#grass)" width="100" height="40" y="60"/> </svg> </body> </html>