SVG Path Pattern (Branch 6890)

✨ PONGSATORN PHATTARASRIVAJCHAKARN

<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,8,8" width="10%" height="10%">
          <rect width="10" height="10" fill="rgba(55, 198, 180, 0.3)">
          </rect>
          <path 
                fill="#0000"
                stroke="#1E88E5"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round"
                >
          </path>
           <path 
                fill="#0000"
                stroke="#fff3"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round"
                >
            <animate attributeName="d" 
                     values="
                             m0 4
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2;
                             m-4 4
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2" dur="1s" 
                     repeatCount="indefinite" />
          </path>
        </pattern>
        <pattern id="grass" viewBox="0,0,8,8" width="10%" height="10%">
          <rect width="8" height="8" fill="rgb(60, 179, 113)">
          </rect>
          <rect x="2.5" y="2.5" width="1" height="1"
  fill ="rgb(106, 90, 205)" />
          <rect x="2" y="2" width="2" height="2"
  fill ="rgba(255, 99, 71, 0.6)" />
          <rect x="5" y="5" width="1" height="1"
  fill ="rgb(69, 255, 237)" />
        </pattern>
      </defs>
      
      <rect width="100" height="100" fill="url(#wave1)"/>
      <circle r="50" cx="100" cy="100" fill="url(#grass)"/>
		<circle r="60" cx="7" cy="100" fill="url(#grass)"/>
      <circle r="10" cx="80" cy="15" fill="red"/>
    </svg>
  </body>
</html>