SVG Path Pattern (Branch 6630)
✨ นายธานี ลายธีระพงศ์
<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,10,10" width="20%" height="20%"> <rect width="10" height="10" fill="salmon"stroke="white" stroke-width="2"></rect>พื้นหลัง <circle r="3" cx="0" cy="0" fill="#fff"stroke="salmon" stroke-width="1.5"/> <circle r="3" cx="10" cy="0" fill="#fff"stroke="salmon" stroke-width="1.5"/> <circle r="3" cx="0" cy="10" fill="#fff"stroke="salmon" stroke-width="1.5"/> <circle r="3" cx="10" cy="10" fill="#fff"stroke="salmon" stroke-width="1.5"/> </pattern> <pattern id="grass" viewBox="0,0,10,10" width="10%" height="10%"> <rect width="20" height="10" fill="green"></rect> <path d=" M3 0 v5 h5 v-5 h-5 " fill="SpringGreen" stroke="SpringGreen" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" > </path> <path d=" M1 5 v5 h5 v-5 h-5 " fill="SpringGreen" stroke="SpringGreen" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" > </path> </pattern> <pattern id="grass2" viewBox="0,0,10,10" width="20%" height="20%"> <rect width="10" height="10" fill="#fff"></rect> <path d=" M6,1 v10 " fill="#0000" stroke="Tomato" stroke-width="3" stroke-linecap="square" stroke-linejoin="round" > </path> <path d=" M2.8,0 v10 " fill="#0000" stroke="Tomato" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" > </path> </pattern> </defs> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#wave1)"/> <circle r="40" cx="100" cy="100" fill="url(#grass)"stroke="LimeGreen" stroke-width="2.5"/> <circle r="40" cx="4" cy="4" fill="url(#grass2)"stroke="Tomato" stroke-width="2.5"/> </svg> </body> </html>