SVG Path Pattern (Branch 6559)
✨ นายชัยรวิชญ์ เอี่ยมขจรชัย
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:white; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='46' viewBox='0 0 70 46'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.75'%3E%3Cpolygon points='68 44 62 44 62 46 56 46 56 44 52 44 52 46 46 46 46 44 40 44 40 46 38 46 38 44 32 44 32 46 26 46 26 44 22 44 22 46 16 46 16 44 12 44 12 46 6 46 6 44 0 44 0 42 8 42 8 28 6 28 6 0 12 0 12 28 10 28 10 42 18 42 18 28 16 28 16 0 22 0 22 28 20 28 20 42 28 42 28 28 26 28 26 0 32 0 32 28 30 28 30 42 38 42 38 0 40 0 40 42 48 42 48 28 46 28 46 0 52 0 52 28 50 28 50 42 58 42 58 28 56 28 56 0 62 0 62 28 60 28 60 42 68 42 68 0 70 0 70 46 68 46'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); box-shadow:0 0 100px #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="5" cx="5" cy="5" fill="#045666"/> <circle r="3" cx="12" cy="10" fill="#9511c2"/> <circle r="4" cx="5" cy="10" fill="#4FC3F7"/> <circle r="1" cx="20" cy="10" fill="#4FC3F7"/> <circle r="0" cx="2" cy="20" fill="#4FC3F7"/> </pattern> <pattern id="wave1" viewBox="0,0,8,8" width="10%" height="10%"> <rect width="6" height="11" fill="#000000"> </rect> <path d=" M0,5 l5 3 l0 -9 l-5 -5 l-2 4 " fill="#0000" stroke="#fff" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" > </path> </pattern> <pattern id="grass" viewBox="0,0,8,8" width="10%" height="10%"> <rect width="8" height="8" fill="#FFC107"> <rect x="5" y="0" width="2" height="20" fill="#ffcdd2" opacity="1" /> <rect x="-5" y="0" width="3" height="20" fill="#FFECB3" opacity="1" /> </rect> <path d=" M0,5 l5 5 l5 -5 l-5 -5 l-5 5 " fill="#0000" stroke="#e80c0c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" > </path> <circle r="2" cx="2" cy="2" fill="#EF6C0033"/> <circle r=".4" cx="6" cy="6" fill="#EF6C0088"/> <circle r=".4" cx="3" cy="5" fill="#EF6C0099"/> <circle r="3" cx="3" cy="5" fill="#EF6C0099"/> </pattern> </defs> <!-- ใช้ pattern --> <rect width="150" height="150" fill="url(#wave1)"/> <circle r="40" cx="50" cy="110" fill="url(#grass)"/> <circle r="30" cx="50" cy="120" fill="#f50707" stroke/> <circle r="40" cx="50" cy="-12" fill="url(#texture1)"/> <circle r="30" cx="50" cy="-20" fill="#24ff3a" stroke/> </svg> </body> </html>