SVG Path Pattern
✨ นางสาวลักษมี ลั่นซ้าย
<html> <head> <title>Let's Start </title> <style> body{ background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%); margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:white; box-shadow:0 0 20px #0001; width:80%; } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- สร้าง pattern --> <defs> <pattern id="texture1" viewBox="0,0,10,10" width="10%" height="10%"> <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> <pattern id="wave1" viewBox="0,0,8,8" width="10%" height="10%"> <rect width="10" height="10" fill="#FF69B3"> </rect> <path d=" M4,4 l0,3" stroke-width="1.4" stroke="#E5B821" stroke-linecap="round" stroke-linejoin="round"/>> <path d=" M3.6,7 l0,0.8" stroke-width="0.5" stroke="#E5B821" stroke-linecap="round" stroke-linejoin="round"/>> <path d=" M4.4,7 l0,0.8" stroke-width="0.5" stroke="#E5B821" stroke-linecap="round" stroke-linejoin="round"/>> <path d=" M4,3 l0,1" stroke-width="0.7" stroke="#E5B821" stroke-linecap="round" stroke-linejoin="round"/>> <path d=" M3.8,2.6 l0.4,0" stroke-width="0.3" stroke="#821" stroke-linecap="round" stroke-linejoin="round"/>> <circle r="0.2" cx="3.6" cy="6.5" fill="#000"/> <circle r="0.2" cx="4.4" cy="6.5" fill="#000"/> <path d=" M3.8,6.9 l0.4,0" stroke-width="0.3" stroke="#E521CA" stroke-linecap="round" stroke-linejoin="round"/>> <circle r="0.5" cx="7" cy="7.5" fill="#E0A3FF"/> <circle r="0.4" cx="6" cy="6.5" fill="#ABA3FF"/> <circle r="0.3" cx="7" cy="5.5" fill="#A3F4FF"/> <circle r="0.2" cx="8" cy="4.5" fill="#A3FFBF"/> </pattern> <pattern id="grass" viewBox="0,0,10,10" width="10%" height="10%"> <rect width="10" height="10" fill="#E5B821"> </rect> <circle r="1" cx="9" cy="10" fill="#AF601A"/> <circle r="1" cx="0.5" cy="10" fill="#AF601A"/> <circle r="2" cx="5.5" cy="9" fill="#AF601A"/> <ellipse cx="4" cy="7" rx="0.5" ry="2" fill="#AF601A"/> <ellipse cx="7" cy="8" rx="0.5" ry="2" fill="#AF601A"/> <path d=" M3.8,5.7 l-1,1" stroke-width="1.4" stroke="#AF601A" stroke-linecap="round" stroke-linejoin="round"/>> <path d=" M3.8,6 l-1,1" stroke-width="0.7" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>> <path d=" M7.3,6.3 l1,2" stroke-width="1.4" stroke="#AF601A" stroke-linecap="round" stroke-linejoin="round"/>> <circle r="0.5" cx="4.5" cy="8.7" fill="#ffff"/> <circle r="0.5" cx="6.5" cy="8.7" fill="#ffff"/> <circle r="0.4" cx="4.5" cy="8.9" fill="#166D8C"/> <circle r="0.4" cx="6.5" cy="8.9" fill="#166D8C"/> <circle r="2.5" cx="7" cy=".5" fill="#A3FFBF"/> <circle r="1.5" cx="7" cy=".5" fill="#C4FFA3"/> <circle r="1.5" cx="10" cy="4.5" fill="#F8FFA3"/> </pattern> </defs> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#wave1)"/> <circle r="50" cx="100" cy="100" fill="url(#grass)"/> </svg> </body> </html>