SVG Path Pattern (Branch 6865)
✨ นางสาวชุติมา ณะแก้ว
<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="sky" viewbox="0,0,5,5" width="10%" height="10%"> <rect width="100" height="100" fill="#424242"/> <circle r=".5" cx="1" cy="5" fill="#FFD54F"><animate attributeName="r" values=".1;.3;.5" dur="2s" repeatCount="indefinite"/></circle> </pattern> </defs> <defs> <pattern id="wave" viewBox="0,0,5,5" width="10%" height="10%"> <rect width="10" height="10" fill="#42A5F5"></rect> <path fill="none" stroke="#0D47A1" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" > <animate attributeName="d" values=" M 1 5 l1 1 l2 -2 l2 2 l2 -2 l2 2 l2 -2; M-5 5 l2 2 l2 -2 l2 2 l2 -2 l2 2 l2 -2" dur="1s" repeatCount="indefinite" /> </path> </pattern></defs> <defs> <pattern id="dot" viewBox="0,0,10,10" width="10%" height="10%"> <rect width="10" height="10" fill="#FBC02D"/> <circle r=".5" cx="2" cy="2" fill="#8D6E63"/> <circle r=".7" cx="4" cy="4" fill="#795548"/> <circle r=".9" cx="6" cy="6" fill="#6D4C41"/> </pattern> </defs> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#sky)"/> <rect width="100" height="100" y="50" fill="url(#wave)"/> <circle r="20" cx="75" cy="25" fill="url(#dot)"/> </svg> </body> </html>