SVG Path Pattern (Branch 6895)
✨ นางสาวยมลพร เชิดบำรุง
<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"> <radialGradient id="comb" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:hsl(50, 100%, 50%); stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(44, 78%, 48%);stop-opacity:1" /> </radialGradient> <!-- สร้าง pattern --> <defs> <pattern id="one" viewBox="0,0,10,10" width="10%" height="10%"> <rect width="20" height="20" fill="#BDBDBD"></rect> <path d=" M4,1 l-3,2 v3 l3,2 l3,-2 v-3 l-3,-2" fill="url(#comb)" stroke-width="1" stroke="#FF8F00" stroke-linecap="round" stroke-linejoin="round"/> <circle r="0.5" cx="7" cy="7.5" fill="#B2EBF2" /> <circle r="0.5" cx="7.5" cy="7" fill="#B2EBF2" /> <circle r="0.5" cx="8" cy="7.5" fill="#B2EBF2" /> <circle r="0.5" cx="7.8" cy="8" fill="#B2EBF2" /> <circle r="0.5" cx="7" cy="8" fill="#B2EBF2" /> <circle r="0.4" cx="7.5" cy="7.5" fill="#795548"/> <circle r="2" cx="0" cy="0" fill="#e57373"/> </pattern> <pattern id="bee" viewBox="0,0,9,8" width="10%" height="10%"> <rect width="8" height="8" fill="#C8E6C9"> </rect> <path d="M6,4 h1.3 M3,4 l-1,-1.2 M3,4 l0.5,-1.3" stroke="#000" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5,3 Q3.8,1 6,1"stroke="#000" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" fill="#90A4AE"/> <path d="M6,1 Q7,2 5,3" fill="#90A4AE"stroke="#000" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5,3 Q3,2.4 4,1"stroke="#000" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4,1 Q5,-0 5,3" fill="#90A4AE"stroke="#000" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <ellipse cx="5" cy="4" rx="1.7" ry="1.2" fill="#FFEB3B" stroke="#FF8F00" stroke-width="0.2"/> <path d="M4.5,3 Q5.5,4 4.5,5 "fill="transparent" stroke="#000" stroke-width="0.4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.7,3 Q6.5,4 5.7,5 "fill="transparent" stroke="#000" stroke-width="0.4" stroke-linecap="round" stroke-linejoin="round"/> <circle r="1" cx="3" cy="4" fill="#37474F" stroke="#FF8F00" stroke-width="0.2"/> <circle r="0.3" cx="2.7" cy="3.7" fill="#FFF"/> <circle r="0.2" cx="2.65" cy="3.7" fill="#000"/> <path d="M2.2,4 Q2.5,4.5 3.2,4.2 "fill="transparent" stroke="#FFF" stroke-width="0.1" stroke-linecap="round" stroke-linejoin="round"/> </pattern> </defs> <!-- ใช้ pattern --> <rect width="100" height="100" fill="url(#one)"/> <circle r="50" cx="100" cy="100" fill="url(#bee)"/> </svg> </body> </html>