SVG Path Pattern (Branch 6462)
✨ th pvrs
<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,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%"> <path d=" m0 5 l2 2 l2 -2 l2 2 l2 -2 " fill="#0000" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" > </path> </pattern> </defs> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#texture1)"/> <circle r="50" fill="url(#wave1)"/> <circle r="50" cx="100" cy="100" fill="lime"/> </svg> </body> </html>