SVG Path – Lab 1 (Copy 6650) (Copy 6652)
✨ Chinnatad Prommee
<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> <!-- ภูเขา --> <!-- หญ้า --> <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=" m0,0 l50,50 h10 v-10 h-5 l10,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="#C6FF00"/> <path stroke="#AEEA00" fill="transparent" stroke-linejoin="square" d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1" /> </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="#4FC3F7"/> <path stroke="#03A9F4" fill="transparent" stroke-linejoin="square" d="m1,1 v5 l4,-2.5 z" > <animate attributeName="d" values=" m1,1 v5 l4,-2.5 z; m1,1 v5 l2,-2.5 z; m1,1 v5 l4,-2.5 z" dur="1s" repeatCount="indefinite" /> </path> </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>