QE Getty 63070082 – CODEBOX

QE Getty 63070082

✨ TUMMANUN MONGKOL

<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 60 60">
      <defs>
        <pattern id="grass"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="10" height="10"
                 >
          <rect width="10" height="10" fill="pink"/>
          <path fill="green"
                > <animate attributeName="d" 
                     values="
            						m0,0 l5,0 l-5,0, l5,0 l0,5;
            m0,0 l5,0 l0,5, l5,0 l0,5;
            m0,0 l7,0 l0,7, l-7,0 l0,-7;
                             " dur="3s" 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="1" y="1"
                 width="10" height="10"
                 >
          <rect width="12" height="12" fill="skyblue"/>
          
          <path  fill="red"
                stroke-linejoin="square"
                >
            <animate attributeName="d" 
                     values="
                     m0,3 7,3,2 1,0 2;
                    m0,0 0,0,0 0,0 0;
                    m0,3 7,3,2 1,0 2;
                    
                             " dur="3s" repeatCount="indefinite" />
          </path>
        </pattern>
        
        <pattern id="e"
                 viewBox="0 0 10 10"
                 x="2" y="2"
                 width="19" height="19"
                 patternUnits="userSpaceOnUse"
                 >
          <rect width="200" height="100" fill="blue"/>
          
          <path stroke="gold" fill="orange"
                stroke-linejoin="square"
                >
            <animate attributeName="d" 
                     values=" m0,0  1,1,1 0,2 0;
                    m0,5  4,2,1 0,2 2;
                    m0,2  2,2,1 0,2 0;"
                                          dur="3s" repeatCount="indefinite" />
          </path>
        </pattern>
      </defs>
      <rect fill="url(#e)" 
            width="100" height="100"/>
      <path fill="url(#a)" 
            d="M0,0 h100 L0,100
               "/>
    </svg> 
<br>
<br>
 <svg viewBox="0 0 100 100">
      <defs>

<pattern id="pat2"
                 viewBox="0 0 100 100"
                 x="1" y="1"
                 width="15" height="15"
                 patternUnits="userSpaceOnUse"
                 >
          <rect width="100" height="100" fill="#FFEBCD"/>
         
          <path stroke="black" fill="transparent"
                stroke-linejoin="square"
                >
            <animate attributeName="d" 
                     values="
                          
                             m0,0  l0,1 l3,4 l4,6 l3,10;
                             m0,0 l0,3 l3,4 l4,6 l3,40;
                             m0,0  l0,4 l3,4 l4,6 l3,10;
                             m0,0  l0,5 l3,14 l4,6 l3,10;
                              
                             " dur="4s" repeatCount="indefinite" />
          </path>
        </pattern>
      </defs>
      <rect fill="url(#pat2)" 
            width="100" height="100"/>

</svg> 
  
  
<br>
<br>
<html>
  
    <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>

<svg viewBox="0 0 100 100">
      <defs>
      	<pattern id="taksin"
                 viewBox="0 0 20 20"
                 patternUnits="userSpaceOnUse"
                 x="1" y="1"
                 width="10" height="10"
                 >
          <rect width="100" height="100" fill="blck"/>
          <path fill="orange"
              
                > <animate attributeName="d" 
                     values="
            						m0,0 l3,3  l5,-5 ;
            						m0,5  l4,4  l5,-5 ;
            						m6,8 l5,5 l5,-5 ;
            						m6,22 l6,6  l5,-5 ;
            						
            
            
            						
        								
                             " dur="2s" repeatCount="indefinite" />
                          </path>
        </pattern>
      </defs>
  		 <rect fill="url(#taksin)" 
            width="100" height="100"/>
    </svg> 
<br>
<br>
  <svg viewBox="0 0 100 100">
      <defs>

<pattern id="sun"
                 viewBox="0 0 8 8"
                 x="3" y="1"
                 width="15" height="15"
                 patternUnits="userSpaceOnUse"
                 >
          <rect width="50" height="50" fill="skyblue"/>
         
          <path stroke="red" fill="transparent"
                stroke-linejoin="square"
                >
            <animate attributeName="d" 
                     values="
                          
                             m0,2 a1 2,1,0 1,0 2;
                    m0,2 a2 1,1,0 1,2 2;
                    m0,2 a3 6,1,0 1,0 2;
                              
                             " dur="3s" repeatCount="indefinite" />
          </path>
        </pattern>
      </defs>
      <rect fill="url(#sun)" 
            width="100" height="100"/>

</svg>