C Getty QE (Copy 6736) – CODEBOX

C Getty QE (Copy 6736)

✨ นายดรณ์ นุตเวช

<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>

<svg viewBox="0 0 100 100">
      <defs>
        <pattern id="grass"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10"
                 >
          <rect width="100" height="100" fill="#C6FF00"/>
          <path stroke="#AEEA00" fill="transparent"
                stroke-linejoin="round"
                d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1"
                > <animate attributeName="d" 
                     values="
            						m0,0 l10,0 l0,10, l-10,0 l0,-10;
            m0,0 l5,0 l0,5, l-5,0 l0,-5;
            m0,0 l10,0 l0,10, l-10,0 l0,-10;
                             " dur="1s" repeatCount="indefinite" />
                          </path>
        </pattern>
        
        <pattern id="sea"
                 viewBox="0 0 10 10"
                 x="0" y="0"
                 width="15" height="15"
                 patternUnits="userSpaceOnUse"
                 >
          <rect width="100" height="100" fill="#4FC3F7"/>
          </path>
          <path stroke="#03A9F4" fill="transparent"
                stroke-linejoin="square"
                >
            <animate attributeName="d" 
                     values="
                             m0,0 l5,0 l-2.5,2.5 l-2.5,-2.5  ;
                             m10,10 l-2.5,-2.5 l5,0 l-2.5,2.5  ;
                             m0,0 l5,0 l-2.5,2.5 l-2.5,-2.5  ;
                             " 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
               "/>
</svg> 
<br>
<br>
<svg viewBox="0 0 100 100">
      <defs>
        <pattern id="a"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10"
                 >
          <rect width="100" height="100" fill="#C6FF00"/>
          <path stroke="#AEEA00" fill="transparent"
                stroke-linejoin="round"
                d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1"
                > <animate attributeName="d" 
                     values="
				m0,0 l10,0 l0,10, l-10,0 l0,-10;
            m0,0 l5,0 l0,5, l-5,0 l0,-5;
            m0,0 l10,0 l0,10, l-10,0 l0,-10;
                             " dur="1s" repeatCount="indefinite" />
                          </path>
        </pattern>
        
        <pattern id="e"
                 viewBox="0 0 10 10"
                 x="0" y="0"
                 width="15" height="15"
                 patternUnits="userSpaceOnUse"
                 >
          <rect width="100" height="100" fill="white"/>
          </path>
          <path stroke="orange" fill="yellow"
                stroke-linejoin="square"
                >
            <animate attributeName="d" 
                     values="
                     m2,0 a1 1,1,1 0,2 0;
                    m2,0 a1 1,1,1 0,2 2;
                    m2,0 a1 1,1,1 0,2 0;

";
                    
                             " dur="1s" repeatCount="indefinite" />
          </path>
        </pattern>
      </defs>
      <rect fill="url(#e)" 
            width="100" height="100"/>
      <path fill="url(#a)" 
            d="M0,0 h100 L0,100
               "/>
    </svg> 
  
  </body>