SVG Path Arcs (สุนทร-พีรพัฒน์ 63070125)

✨ PHIRAPHAT KITPROMPHON

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:1em;
        font-family:sans-serif;
        color:white;
      }
      svg{
        background:#342892;
      }
    </style>
  </head>
  <body>

" dur="1s" repeatCount="indefinite" />
      </path>
      <path fill="#a7ffeb" stroke="" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
            d="
               m15,50
               a1,1 0 0,0 0,3
               a1,1 0 0,0 0,4.5
               h15
               a1,1 0 0,0 -3,-4
               a1,1 0 0,0 -6,-3
               a1,1 0 0,0 -6,-1
               
               "
            >
        <animate attributeName="d" values="
                                            m15,50
               a1,1 0 0,0 0,3
               a1,1 0 0,0 0,4.5
               h15
               a1,1 0 0,0 -3,-4
               a1,1 0 0,0 -6,-3
               a1,1 0 0,0 -6,-1;
 m18,50
               a1,1 0 0,0 0,3
               a1,1 0 0,0 0,4.5
               h15
               a1,1 0 0,0 -3,-4
               a1,1 0 0,0 -6,-3
               a1,1 0 0,0 -6,-1;
  m15,50
               a1,1 0 0,0 0,3
               a1,1 0 0,0 0,4.5
               h15
               a1,1 0 0,0 -3,-4
               a1,1 0 0,0 -6,-3
               a1,1 0 0,0 -6,-1;

" dur="1s" repeatCount="indefinite" />
      
      <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>
      <rect fill="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/>
    </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>