SVG Path Pattern (Branch 6473) (Copy 6881)

✨ นายอภิบุญ สมศรี

<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">
      
      <defs>
        <pattern id="w1" viewBox="0,0,8,8" width="10%" height="10%">
          <rect width="20" height="20" fill="#FCE4EC"></rect>
          <circle r="0.5" cx="6" cy="7" fill="#F06292"/>
          <circle r="0.5" cx="1" cy="2" fill="#FFCA28"/>
          <path d="
                   M3.5,1
                   l0,1"
                stroke="#1B5E20"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round">
          </path>
			<path d="
                   M5,1
                   l-1,1"
                stroke-width="1"
                stroke="#1B5E20"
                stroke-linecap="round"
                stroke-linejoin="round">
          </path>
          <path d="
                   M2,1
                   l1,1"
                stroke="#1B5E20"
                stroke-width="1"
                stroke-linecap="round" 
                stroke-linejoin="round">
          </path>
    <ellipse cx="3.5" cy="4" rx="1.2" ry="2.5" fill="#FF9800"
              stroke-linecap="round" stroke-linejoin="round"/>
 			<path d="
                   M2.75,4
                   h1.5"
                stroke="#E65100"
                stroke-width="0.5"
                >
          </path>
        </pattern>
        <pattern id="grass" viewBox="0,0,8,8" width="10%" height="10%">
          <rect width="8" height="8" fill="#FFC107"></rect>
          <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"/>
        </pattern>
      </defs>
      
      <rect width="100" height="100" fill="url(#w1)"/>
      <circle r="50" cx="100" cy="100" fill="url(#grass)"/>
    </svg>
  </body>
</html>