Pattern Galaxy

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#f1f6ff;
        margin:1rem;
        text-align:center;
        font-family:sans-serif;
      }
      svg{
        background:#80DEEA;
        box-shadow:0 0 20px #0002;
        width:80%;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <defs>
        <pattern id="grass"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="20" height="20"
                 >
          <rect width="100" height="100" fill="#1A237E"/>
          <ellipse cx="3" cy="3" rx="2" ry="2.3" fill="#FFC107"/>
          <circle r=".2" cx="2" cy="2" fill="#FFF176"/>
          <path stroke="#FFF176" fill="transparent"
                stroke-linecap="round"
                d="m.5 3,c0,1 5,1 5,0"
                />
          <path stroke="#7E57C2" fill="transparent"
                stroke-linecap="round" stroke-width=".7"
                d="m8,5 q0,2 2,2 t2,2"
                />
          <path stroke="#7E57C2" fill="transparent"
                stroke-linecap="round" stroke-width=".7"
                d="m-2,5 q0,2 2,2 t2,2"
                />
          <circle r=".5" cx="7" cy="8" fill="#FFE0B2"/>
          <circle r=".3" cx="4" cy="7" fill="#FFE0B2"/>
          <circle r=".4" cx="7" cy="2" fill="#FFE0B2"/>
          <path fill="#FFEB3B"
                d="m9,9 l1,-1 v2 l1.5,.3 l-1.6,1 l0,1.3 l-1,-2 l-2,1 l1,-2 l1,"
                />
        </pattern>
        <pattern id="sea"
                 viewBox="0 0 10 10"
                 x="0" y="0"
                 width="5" height="5"
                 patternUnits="userSpaceOnUse"
                 >
          <rect width="100" height="100" fill="#4FC3F7"/>
          <path stroke="#03A9F4" fill="transparent"
                stroke-linejoin="square"
                d="m1,1 v5 l4,-2.5 z"
                >
            <animate attributeName="d" values="
                                               m1,1 v5 l4,-2.5 z;
                                               m1,1 v5 l2,-2.5 z;
                                               m1,1 v5 l4,-2.5 z" dur="1s" repeatCount="indefinite" />
          </path>
        </pattern>
      </defs>
      <rect fill="url(#grass)" 
            width="100" height="100"/>
      <path fill="url(#sea)" 
            d="M0,0 h100 L0,100
               "/>
      <rect fill="url(#grass)" width="100" height="40" y="60"/>
    </svg>
      
  </body>
</html>