SVG Path Pattern (Copy 6535)

✨ นายกฤติน กลิ่นแก้ว

<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="#03A9F4">
          </rect>
          <path 
                fill="#0000"
                stroke="#1E88E5"
                stroke-width="1"
                stroke-linecap="round"
                stroke-linejoin="round"
                >
            <animate attributeName="d" 
                     values="
                             m0 5
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2;
                             m-4 5
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2
                             l2 2
                             l2 -2" dur="1s" 
                     repeatCount="indefinite" />
          </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="#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(#wave1)"/>
      <circle r="50" cx="100" cy="100" fill="url(#grass)"/>
    </svg>
  </body>
</html>