SVG Path Pattern (Branch 6630)

✨ นายธานี ลายธีระพงศ์

<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="texture1" viewBox="0,0,10,10" width="10%" height="10%">
          <circle r="3" cx="5" cy="5" fill="#81D4FA88"/>
          <circle r="2" cx="10" cy="0" fill="#4FC3F7"/>
          <circle r="2" cx="0" cy="10" fill="#4FC3F7"/>
          <circle r="2" cx="10" cy="10" fill="#4FC3F7"/>
          <circle r="2" cx="0" cy="0" fill="#4FC3F7"/>
        </pattern>
        <pattern id="wave1" viewBox="0,0,10,10" width="20%" height="20%">
          <rect width="10" height="10" fill="salmon"stroke="white"
                stroke-width="2"></rect>พื้นหลัง
          <circle r="3" cx="0" cy="0" fill="#fff"stroke="salmon"
                stroke-width="1.5"/>
          <circle r="3" cx="10" cy="0" fill="#fff"stroke="salmon"
                stroke-width="1.5"/>
          <circle r="3" cx="0" cy="10" fill="#fff"stroke="salmon"
                stroke-width="1.5"/>
          <circle r="3" cx="10" cy="10" fill="#fff"stroke="salmon"
                stroke-width="1.5"/>
         
        </pattern>
        <pattern id="grass" viewBox="0,0,10,10" width="10%" height="10%">
          <rect width="20" height="10" fill="green"></rect>
			<path d="
                   M3 0
                   v5 h5 v-5 h-5	
                   "
                fill="SpringGreen"
                stroke="SpringGreen"
                stroke-width="0.5"
                stroke-linecap="round"
                stroke-linejoin="round"
                >
          </path>
          <path d="
                   M1 5
                   v5 h5 v-5 h-5	
                   "
                fill="SpringGreen"
                stroke="SpringGreen"
                stroke-width="0.5"
                stroke-linecap="round"
                stroke-linejoin="round"
                >
          </path>
        </pattern>
        <pattern id="grass2" viewBox="0,0,10,10" width="20%" height="20%">
          <rect width="10" height="10" fill="#fff"></rect>
          <path d="
                   M6,1
                   v10
                   "
                fill="#0000"
                stroke="Tomato"
                stroke-width="3"
                stroke-linecap="square"
                stroke-linejoin="round"
                >
          </path>
          <path d="
                   M2.8,0
                   v10
                   "
                fill="#0000"
                stroke="Tomato"
                stroke-width="3"
                stroke-linecap="round"
                stroke-linejoin="round"
                >
          </path>
        </pattern>
      </defs>
      
      <rect width="100" height="100" fill="url(#wave1)"/>
      <circle r="40" cx="100" cy="100" fill="url(#grass)"stroke="LimeGreen"
                stroke-width="2.5"/>
      <circle r="40" cx="4" cy="4" fill="url(#grass2)"stroke="Tomato"
                stroke-width="2.5"/>
    </svg>
  </body>
</html>