SVG Path Pattern (Branch 6870)

✨ นายยุทธศิลป์ บุตรโยจันโท

<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="11.32%" height="20%">
          <rect width="10" height="10" fill="#03A9F4">
          </rect>
          <path stroke="#00FFFF" fill="transparent"><animate attributeName="d" 
                     values="
                             m0 5
                             h1
                             c5 -6
                             6 0
                             8 0
                             h1;
                             m0 -5
                             h1
                             c5 -6
                             6 0
                             8 0
                             h1;" dur="1s" 
                     repeatCount="indefinite" />
        </path>
        <path stroke="#00FFFF" fill="transparent"><animate attributeName="d" 
                     values="
                             m0 15
                             h1
                             c5 -6
                             6 0
                             8 0
                             h1;
                             m0 5
                             h1
                             c5 -6
                             6 0
                             8 0
                             h1;" dur="1s" 
                     repeatCount="indefinite" />
        </path>
        </pattern>
        <pattern id="grass"width="8%" height="8%">
          <rect width="10" height="10" fill="#FFC107">
          </rect>
          <circle r=".4" cx="1" cy="6" fill="#fff"/>
          <circle r=".4" cx="5" cy="4" fill="#000"/>
          <circle r=".4" cx="3" cy="4" fill="#fff"/>
          <circle r=".4" cx="2" cy="2" fill="#FF8512"/>
        </pattern>
      </defs>
      
      <rect width="100" height="100" fill="url(#grass)"/>
      <path d="M 0 50 c 0 0, 10 10, 20 0 c15 -15 , 20 10, 30 0 c 15 -15, 20 10, 30 0 c 15 -15, 20 0, 20 0 v 50 h-100 z" stroke="#00FFFF" fill="url(#wave1)"/>
      
    </svg>
  </body>
</html>