SVG Path Pattern (Branch 6454)
✨ NUTTHIDA PLANGKAM
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; 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,8,8" width="30%" height="30%"> <rect width="8" height="8" fill="#FF8FFD"></rect> <circle r="1" cx="7" cy="5" fill="#FFF78F"/> <circle r="1" cx="3" cy="5" fill="#FFF78F"/> <circle r="1" cx="5" cy="7" fill="#FFF78F"/> <circle r="1" cx="5" cy="3" fill="#FFF78F"/> <circle r="1.5" cx="5" cy="5" fill="#C48FFF"/> </pattern> <pattern id="texture2" viewBox="0,0,8,8" width="15%" height="20%"> <rect width="8" height="8" fill="#F9B1F9"></rect> <circle r="1" cx="7" cy="5" fill="#B8F9BF"/> <circle r="1" cx="3" cy="5" fill="#B8F9BF"/> <circle r="1" cx="5" cy="7" fill="#B8F9BF"/> <circle r="1" cx="5" cy="3" fill="#B8F9BF"/> <circle r="1.5" cx="5" cy="5" fill="#FAE79B"/> </pattern> <pattern id="texture3" viewBox="0,0,8,8" width="20%" height="15%"> <rect width="8" height="8" fill="#C3B5FE"></rect> <circle r="1" cx="7" cy="5" fill="#B5FEEA"/> <circle r="1" cx="3" cy="5" fill="#B5FEEA"/> <circle r="1" cx="5" cy="7" fill="#B5FEEA"/> <circle r="1" cx="5" cy="3" fill="#B5FEEA"/> <circle r="1.5" cx="5" cy="5" fill="#FEB5CA"/> </pattern> <pattern id="texture4" viewBox="0,0,8,8" width="20%" height="20%"> <rect width="8" height="8" fill="#CBF9CC"></rect> <rect fill="#E3F9DD" width="50" height="4" ></rect> </pattern> </defs> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#texture4)"/> <circle r="20" cx="20" cy="50" fill="url(#texture3)"/> <circle r="20" cx="50" cy="20" fill="url(#texture3)"/> <circle r="20" cx="50" cy="80" fill="url(#texture3)"/> <circle r="20" cx="80" cy="50" fill="url(#texture3)"/> <circle r="30" cx="50" cy="50" fill="url(#texture2)"/> <circle r="20" cx="50" cy="50" fill="url(#texture1)"/> </svg> </body> </html>