E-P’Getty

✨ นายพิชญ์รัฐ ไพบูลย์ธรรม

<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">
      
      <circle r="1" fill="#fc0" cx="50" cy="50"/>
      
      <circle stroke="white" stroke-width="2"
              r="15" fill="#fc0" cx="20" cy="20">
      </circle>
      
      
      
      <path fill="#8BC34A" stroke="#fff" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round"
            d="M-10,60 h120 v50 h-120
               "/> 
      
      <path fill="yellow" stroke="green" stroke-width="3"
            d="M52.5,60 v-20"
         stroke-linecap="round" stroke-linejoin="round"/>
      <path fill="yellow" stroke="gold" stroke-width="1"
            d="M50,45 h-10 v-5 h5 v-5 h-5 v-5 h10 v5 h5 v-5 h10 v5 h-5 v5 h5 v5 h-10 v-5 h-5 v5"
            stroke-linecap="round" stroke-linejoin="round"/>
      <path fill="yellow" stroke="green" stroke-width="3"
            d="M52.5,55 h-5 v-2 h-5"/>
      <path fill="yellow" stroke="green" stroke-width="3"
            d="M52.5,52 h5 v-2 h5"/>
      
      
      <path fill="red" stroke="green" stroke-width="3"
            d="M82.5,60 v-20"
         stroke-linecap="round" stroke-linejoin="round"/>
      <path fill="red" stroke="gold" stroke-width="1"
            d="M80,45 h-10 v-5 h5 v-5 h-5 v-5 h10 v5 h5 v-5 h10 v5 h-5 v5 h5 v5 h-10 v-5 h-5 v5"
            stroke-linecap="round" stroke-linejoin="round"/>
      <path fill="yellow" stroke="green" stroke-width="3"
            d="M82.5,55 h-5 v-2 h-5"/>
      <path fill="yellow" stroke="green" stroke-width="3"
            d="M82.5,52 h5 v-2 h5"/>
            
    <br>
    <br>
    <svg viewBox="0 0 100 100">
      <defs>
        <pattern id="grass"
                 viewBox="0 0 10 10"
                 patternUnits="userSpaceOnUse"
                 x="0" y="0"
                 width="15" height="15"
                 >
          <rect width="100" height="100" fill=""/>
          <path stroke="#AEEA00" fill="Green"
                stroke-linejoin="square"
                d="m3,3 l2,3 l-2,3 l-2,-3 z"
                />
          <path stroke="red" fill="red"
                d="m9,4 h-2 m1.5,0 v-1.5"
                stroke-linejoin="square"/>
          <path stroke="yellow" fill="red"
                d="m9,4 h2 m-2.5,0 v1.5"
                stroke-linejoin="square"/>
          
            
        </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>