63070118, 63070132, 63070157

✨ นายภาณุพงศ์ แก้วคำ

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{ /* ฟิล์ม-พิทวัท, ฟิล์ม-พิทวัท, ฟิวส์-วริศ */
        background:#333;
        margin:1em;
        font-family:sans-serif;
        color:white;
      }
      svg{
        background:#eee;
      }
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      <path fill="yellow" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
					M 52 17
               a 1,1 0 0,0 0 60
               a 1,1 0 0,0 0 -60 
               "
            >
      </path>

      <path fill="#fff" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
					M45 40
               a 1,1 0 0,1 -15,0 z
               "
            >
                <animate attributeName="d" values="

" dur="1s" repeatCount="indefinite" />
      </path>
      <circle cx=40 cy=41 r=2><animate attributeName="cx" values="40; 35; 40" dur="0.4s" repeatCount="indefinite" /></circle>

      <path fill="#fff" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="
					M70 40
               a 1,1 0 0,1 -15,0 z
               "
            >
      </path>
      <circle cx=65 cy=41 r=2><animate attributeName="cx" values="65; 60; 65" dur="0.4s" repeatCount="indefinite" /></circle>

      <path stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="M40,59
               a40 40
               ,0
               ,0 0
               ,22 0"></path>
      <path fill="red" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            d="M40,60
               a0 0
               ,0
               ,0 0
               ,20 0">

               
            
        <animate attributeName="d" values="
              	M45,60
               a1 0
               ,0
               ,0 0
               ,10 0;
              	M45,60
               a1 2
               ,0
               ,0 0
               ,10 0
                " dur="0.1s" repeatCount="indefinite" />
      </path>
      
      <defs>
        <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%">
          <rect fill="#0001" width="1" height="10" x="1" y="0"/>
          <rect fill="#0001" width="1" height="10" x="3" y="0"/>
          <rect fill="#0001" width="1" height="10" x="5" y="0"/>
          <rect fill="#0001" width="1" height="10" x="7" y="0"/>
          <rect fill="#0001" width="1" height="10" x="9" y="0"/>
          <rect fill="#0001" width="10" height="1" x="0" y="1"/>
          <rect fill="#0001" width="10" height="1" x="0" y="3"/>
          <rect fill="#0001" width="10" height="1" x="0" y="5"/>
          <rect fill="#0001" width="10" height="1" x="0" y="7"/>
          <rect fill="#0001" width="10" height="1" x="0" y="9"/>
          <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/>
          <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/>
          <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/>
          <rect fill="#0002" width="10" height=".1" x="0" y="0"/>
          <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/>
          <rect fill="#0002" height="10" width=".1" y="0" x="0"/>
        </pattern>
      </defs>

    </svg>
     <h5>
      อันนี้ลองเปลี่ยนบรรทัด 82 คู่ที่ 3 เป็น 0,0 0,1 1,0 1,1 ดูค่า
    </h5>
    <svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
      <path d="M 10 315
               L 110 215
               A 36,60 0 1,1 150.71,170.29
               L 172.55 152.45
               A 30,50 -45 0,1 215.1,109.9
               L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
      <circle cx="150.71" cy="170.29" r="2" fill="red"/>
      <circle cx="110" cy="215" r="2" fill="red"/>
      <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
      <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
    </svg>
  </body>
</html>