SVG Path Pattern (Branch 6852) (Copy 8240)

✨ Athichart Chusri

<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="wave1" viewBox="0,0,20,20" width="50%" height="50%">
          <rect width="20" height="20" fill="white">
          </rect>
          <path d="M 0 0
                   v10 h10 v-10 h-10"
                fill="#DAF7A6"
                
                />
          <path d="M 0 0
                   v20 h10 v-10 h-10"
                fill="black"
                
                />
          <path d="M 10 0
                   v20 h10 v-10 h-10"
                fill="#DAF7A6"
                
                />
          <path d="M 10 0
                   v10 h10 v-10 h-10"
                fill="black"
                />
            
            
          
          
        </pattern>
        

      </defs>
      
      <rect width="100" height="100" fill="url(#wave1)"/>
      <circle r="50" cx="100" cy="100" fill="url(#grass)"/>
    </svg>
  </body>
</html>