SVG Path Pattern (Branch 6812)
✨ KANTAWIT JONGKRIT
<html> <head> <title>Let's Start </title> <style> body{ margin:1rem; text-align:center; } svg{ background:white; box-shadow:0 0 20px #0001; width:80%; background:#336699; } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- สร้าง pattern --> <defs> <pattern id="texture1" viewBox="0,0,100,100" width="10%" height="10%"> <rect width="100" height="100" fill="#CC0000"/> <path d= "M30,69 h60 l-20, -20 h15 l-20, -20 h15 l-20, -20 l-20,20 h15 l-20,20 h15 z" fill="#006400" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > </path> <rect x="55" y="70" width="10" height="10" fill="#8B4513" stroke="black" stroke-width="1.5" /> </pattern> </defs> <defs> <pattern id="texture2" viewBox="0,0,100,100" width="10%" height="10%"> <rect width="100" height="100" fill=" #006600"/> <path d= "M20,20 L50,50 L80,20" fill="none" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" > </path> <circle cx="50" cy="50" r="25" fill="#ffffff" /> <circle cx="50" cy="15" r="15" fill="#ffffff" /> <circle cx="50" cy="18" r="5" fill="#FF8C00" /> <circle cx="45" cy="7" r="2" /> <circle cx="50" cy="35" r="2" /> <circle cx="50" cy="45" r="2" /> <circle cx="50" cy="55" r="2" /> <circle cx="55" cy="7" r="2" /> <path d = "M35,2 h30 v-10 z" stroke="black" stroke-width="3"></path> </pattern> </defs> <defs> <pattern id="texture3" viewBox="0,0,100,100" width="10%" height="10%"> <rect width="100" height="100" fill="#FFFAF0"/> <path d= "M25,20 l30,15 l30,-15 l-30,-15 l-30,15 v40 l30,15 v-40 l30,-15 v40 l-30,15 v-40z" fill="#CC0000" stroke="black" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" > </path> <path d= "M0,0 v100" fill="none" stroke="black" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" > </path> </pattern> </defs> <rect width="100%" height="100% "fill="url(#texture3)" stroke-width="1" stroke="black"/> <circle cx="100" cy="100" r="50" fill="url(#texture1)" stroke-width=".5" stroke="black"/> <circle cx="0" cy="0" r="50" fill="url(#texture2)" stroke-width=".5" stroke="black"/> </svg> </body> </html>