refs Link to heading

circle Link to heading

<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 Link to heading

<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 Link to heading

(100, 100)
<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 Link to heading

<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 Link to heading

(20, 150)(180, 150)(100, 50)
<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 Link to heading

(20, 150)(180, 150)(100, 50)(260, 250)(340, 150)(420, 50)(500, 150)
<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) Link to heading

(20, 150)(180, 150)(100, 50)(260, 250)(340, 150)(420, 50)(500, 150)
<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 Link to heading

(20, 150)(180, 150)(100, 50)(260, 250)(400, 150)(420, 50)(500, 150)
<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) Link to heading

(20, 150)(180, 150)(100, 50)(260, 250)(400, 150)(540, 50)(500, 150)
<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 Link to heading

(150, 150)(250, 50)(350, 150)(250, 250)
<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 Link to heading

(150, 150)(250, 50)(400, 150)(300, 250)∂ΩΩ
<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>