butiran

svg <path> element - bezier

refs

circle

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  style="background: #eee;">
    <circle cx="100" cy="100" r="50"/>
</svg>

line

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  style="background: #eee;">
    <line x1="50" x2="150" y1="50" y2="150"
      stroke="black" stroke-width="5" />
</svg>

text

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  style="background: #eee;">
    <text x="100" y="100" text-anchor="middle" 
      alignment-baseline="middle">(100, 100)</text>
    <circle cx="100" cy="100" r="5" fill="red" />
</svg>

circle-line-circle

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  style="background: #eee;">
    <circle cx="150" cy="50" r="4"/>
    <line x1="150" y1="50" x2="50" y2="150"  
      stroke="black" stroke-width="2" />
    <circle cx="50" cy="150" r="4"/>
</svg>

path bezier

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="200" height="200"
  style="background: #eee;">
    <path  d="M 20 150 Q 100 50 180 150"
      stroke="black" stroke-width="3" fill="none" />
</svg>

more points 1

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="520" height="320"
  style="background: #eee;">
    <path 
      d="
        M 20 150
        Q 100 50 180 150
        Q 260 250 340 150
        Q 420 50 500 150
      "
      stroke="black" stroke-width="3" fill="none" />
</svg>

more points 1 (T instead of Q)

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="520" height="320"
  style="background: #eee;">
    <path 
      d="
        M 20 150
        Q 100 50 180 150
        T 340 150
        T 500 150
      "
      stroke="black" stroke-width="3" fill="none" />
</svg>

more points 2

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="520" height="320"
  style="background: #eee;">
    <path 
      d="
        M 20 150
        Q 100 50 180 150
        Q 260 250 340 150
        Q 420 50 500 150
      "
      stroke="black" stroke-width="3" fill="none" />
</svg>

more points 2 (T instead of Q)

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="520" height="320"
  style="background: #eee;">
    <path 
      d="
        M 20 150
        Q 100 50 180 150
        T 400 150
        T 500 150
      "
      stroke="black" stroke-width="3" fill="none" />
</svg>

arbitrary form with Z

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="600" height="320"
  style="background: #eee;">
    <path 
      d="
        M 150 150
        Q 150 50 250 50
        T 350 150
        T 250 250
        Z
      "
      stroke="#f88" stroke-width="3" fill="#fcc" />
</svg>

arbitrary form for domain & boundary

<svg
  version="1.1" xmlns="http://www.w3.org/2000/svg"
  width="600" height="320"
  style="background: #eee;">
    <path 
      d="
        M 150 150
        Q 150 50 250 50
        T 400 150
        T 300 250
        T 150 150
      "
      stroke="#f88" stroke-width="3" fill="#fcc" />
</svg>