D-P’Arin
✨ นายพิสิฐพงศ์ ปาละวิสุทธิ์
<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"> <!-- จุดกลาง --> <circle r="1" fill="#fc0" cx="50" cy="50"/> <!-- พระอาทิตย์ --> <circle stroke="white" stroke-width="2" r="15" fill="#fc0" cx="20" cy="20"> </circle> <!-- ภูเขา --> <path fill="#CDDC39" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M-20,60 l30,-20 l30,20 l40,-40 l40,40" /> <!-- หญ้า --> <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="M50,60 h20 v-20 h-20 v20 v-20 "/> <path d="M50,40 l9, -10 l12 10 "/> </g> <path fill="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M-10,80 h120 v50 h-120 "/> </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="#C6FFFF"/> <path stroke="#ABBF00" fill="transparent" stroke-linejoin="square" d="m1,8 h2 v-4 h-4 v-4 h5" /> </pattern> <pattern id="sea" viewBox="0 0 10 10" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" > <rect width="100" height="100" fill="#4FC3F7"/> <circle cx="0" cy="0" r="4" fill="blue"><animate attributeName="r" values="4;3;2;0;2;3;4" dur="1s" repeatCount="indefinite" /></circle> <circle cx="0" cy="10" r="4" fill="hsl(220,100%,50%)"><animate attributeName="r" values="4;3;2;0;2;3;4" dur="1s" repeatCount="indefinite" /></circle> <circle cx="10" cy="0" r="4" fill="hsl(220,100%,80%)"><animate attributeName="r" values="4;3;2;0;2;3;4" dur="1s" repeatCount="indefinite" /></circle> <circle cx="10" cy="10" r="4" fill="hsl(220,100%,30%)"><animate attributeName="r" values="4;3;2;0;2;3;4" dur="1s" 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>