Skip to content
Raw SVG templates

Poincaré disk — geodesic triangle and angle defect

A geodesic triangle in the Poincaré disk model with its interior angles, its Gauss–Bonnet area as the angle defect pi − (alpha+beta+gamma), its hyperbolic side lengths and a numerical check of the hyperbolic law of cosines.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 880 520" width="880" height="520">
  <style>
    text{ font:13px Inter, system-ui, sans-serif; fill:#0f172a; }
    .ttl{ font-size:16px; font-weight:700; }
    .sub{ font-size:12px; fill:#475569; }
    .key{ font-size:13px; }
    .kd { font-size:12px; fill:#475569; }
    .ang{ font-size:12px; fill:#475569; stroke:#ffffff; stroke-width:3px; paint-order:stroke; }
    .bd { fill:none; stroke:#475569; stroke-width:1.6; stroke-dasharray:6 4; }
    .gl { fill:none; stroke:#cbd5e1; stroke-width:1.4; }
    .sd { fill:none; stroke:#1d4ed8; stroke-width:2.6; }
    .fillT{ fill:#dbeafe; opacity:0.55; }
  </style>
  <rect width="880" height="520" fill="#ffffff"/>
  <text class="ttl" x="28" y="28">Geodesic triangle in the Poincar&#233; disk &#8212; angle defect = area</text>
  <text class="sub" x="28" y="47">Geodesics of the hyperbolic plane are the circular arcs meeting the boundary at right angles.</text>
  <circle cx="250" cy="258" r="200" fill="#f8fafc" stroke="none"/>
  <polygon class="fillT" points="230.9,149.7 232.5,153.2 234.2,156.8 235.8,160.3 237.6,163.8 239.3,167.3 241.0,170.8 242.8,174.3 244.6,177.8 246.5,181.2 248.3,184.6 250.2,188.1 252.1,191.5 254.1,194.9 256.0,198.2 258.0,201.6 260.1,204.9 262.1,208.3 264.2,211.6 266.3,214.9 268.4,218.2 270.5,221.4 272.7,224.7 274.9,227.9 277.1,231.2 279.3,234.4 281.6,237.5 283.9,240.7 286.2,243.9 288.5,247.0 290.9,250.1 293.3,253.2 295.7,256.3 298.1,259.3 300.6,262.4 303.1,265.4 305.6,268.4 308.1,271.4 310.7,274.3 313.2,277.3 315.8,280.2 318.4,283.1 321.1,286.0 323.7,288.9 326.4,291.7 329.1,294.5 331.8,297.3 334.6,300.1 337.3,302.9 340.1,305.6 342.9,308.3 345.8,311.0 348.6,313.7 351.5,316.4 354.4,319.0 357.3,321.6 360.2,324.2 363.2,326.7 366.1,329.3 369.1,331.8 372.1,334.3 372.1,334.3 368.4,332.9 364.7,331.5 360.9,330.2 357.1,328.9 353.4,327.7 349.6,326.5 345.8,325.4 341.9,324.3 338.1,323.2 334.3,322.2 330.4,321.2 326.5,320.3 322.7,319.4 318.8,318.5 314.9,317.7 311.0,317.0 307.0,316.3 303.1,315.6 299.2,315.0 295.3,314.4 291.3,313.8 287.4,313.4 283.4,312.9 279.5,312.5 275.5,312.2 271.5,311.8 267.6,311.6 263.6,311.4 259.6,311.2 255.6,311.1 251.7,311.0 247.7,310.9 243.7,310.9 239.7,311.0 235.7,311.1 231.8,311.2 227.8,311.4 223.8,311.6 219.9,311.9 215.9,312.2 211.9,312.6 208.0,313.0 204.0,313.5 200.1,314.0 196.1,314.5 192.2,315.1 188.3,315.7 184.3,316.4 180.4,317.1 176.5,317.9 172.6,318.7 168.7,319.5 164.9,320.4 161.0,321.4 157.1,322.4 153.3,323.4 149.5,324.5 145.7,325.6 141.9,326.7 138.1,327.9 138.1,327.9 140.4,325.5 142.7,323.0 145.0,320.5 147.3,318.0 149.6,315.5 151.8,312.9 154.0,310.3 156.2,307.7 158.3,305.1 160.5,302.4 162.6,299.8 164.6,297.1 166.7,294.4 168.7,291.6 170.7,288.9 172.7,286.1 174.6,283.3 176.5,280.5 178.4,277.7 180.3,274.9 182.1,272.0 183.9,269.1 185.7,266.2 187.5,263.3 189.2,260.4 190.9,257.5 192.6,254.5 194.2,251.5 195.8,248.5 197.4,245.5 199.0,242.5 200.5,239.5 202.0,236.4 203.4,233.4 204.9,230.3 206.3,227.2 207.7,224.1 209.0,221.0 210.3,217.9 211.6,214.7 212.9,211.6 214.1,208.4 215.3,205.2 216.5,202.0 217.6,198.8 218.7,195.6 219.8,192.4 220.8,189.1 221.8,185.9 222.8,182.7 223.8,179.4 224.7,176.1 225.6,172.8 226.4,169.6 227.3,166.3 228.0,163.0 228.8,159.6 229.5,156.3 230.2,153.0 230.9,149.7"/>
  <polyline class="gl" points="201.0,64.1 202.2,68.7 203.4,73.3 204.7,77.9 206.0,82.5 207.4,87.1 208.8,91.6 210.2,96.2 211.7,100.7 213.3,105.2 214.8,109.7 216.4,114.2 218.1,118.7 219.8,123.1 221.5,127.6 223.3,132.0 225.1,136.4 227.0,140.8 228.9,145.2 230.8,149.5 232.8,153.8 234.8,158.2 236.9,162.5 239.0,166.7 241.1,171.0 243.3,175.2 245.5,179.5 247.8,183.7 250.1,187.8 252.4,192.0 254.8,196.1 257.2,200.2 259.7,204.3 262.2,208.4 264.7,212.4 267.3,216.4 269.9,220.4 272.5,224.4 275.2,228.4 277.9,232.3 280.6,236.2 283.4,240.0 286.2,243.9 289.1,247.7 292.0,251.5 294.9,255.3 297.9,259.0 300.9,262.7 303.9,266.4 307.0,270.0 310.1,273.7 313.2,277.2 316.4,280.8 319.6,284.3 322.8,287.9 326.1,291.3 329.3,294.8 332.7,298.2 336.0,301.6 339.4,304.9 342.8,308.2 346.3,311.5 349.8,314.8 353.3,318.0 356.8,321.2 360.4,324.4 364.0,327.5 367.6,330.6 371.3,333.6 375.0,336.7 378.7,339.6 382.4,342.6 386.2,345.5 390.0,348.4 393.8,351.2 397.7,354.1 401.6,356.8 405.5,359.6 409.4,362.3 413.3,364.9 417.3,367.6"/>
  <polyline class="gl" points="422.8,358.6 418.9,356.4 414.9,354.2 410.9,352.0 406.9,349.9 402.8,347.8 398.8,345.8 394.7,343.9 390.5,342.0 386.4,340.1 382.2,338.4 378.0,336.6 373.8,334.9 369.5,333.3 365.3,331.8 361.0,330.2 356.7,328.8 352.3,327.4 348.0,326.0 343.6,324.7 339.3,323.5 334.9,322.3 330.5,321.2 326.1,320.1 321.6,319.1 317.2,318.2 312.7,317.3 308.2,316.5 303.8,315.7 299.3,315.0 294.8,314.3 290.3,313.7 285.8,313.2 281.2,312.7 276.7,312.3 272.2,311.9 267.7,311.6 263.1,311.3 258.6,311.1 254.0,311.0 249.5,310.9 244.9,310.9 240.4,311.0 235.9,311.1 231.3,311.2 226.8,311.5 222.2,311.7 217.7,312.1 213.2,312.5 208.7,312.9 204.1,313.4 199.6,314.0 195.1,314.6 190.6,315.3 186.1,316.1 181.7,316.9 177.2,317.7 172.8,318.7 168.3,319.6 163.9,320.7 159.5,321.8 155.1,322.9 150.7,324.1 146.3,325.4 142.0,326.7 137.7,328.1 133.3,329.5 129.0,331.0 124.8,332.5 120.5,334.1 116.3,335.8 112.1,337.5 107.9,339.3 103.7,341.1 99.6,342.9 95.4,344.9 91.4,346.8 87.3,348.9 83.2,350.9 79.2,353.1 75.2,355.3"/>
  <polyline class="gl" points="85.9,372.4 89.6,369.7 93.3,367.1 97.0,364.3 100.6,361.6 104.2,358.8 107.7,355.9 111.2,353.0 114.7,350.1 118.1,347.1 121.5,344.0 124.8,340.9 128.1,337.8 131.4,334.6 134.6,331.4 137.8,328.2 141.0,324.9 144.1,321.6 147.1,318.2 150.1,314.8 153.1,311.3 156.0,307.9 158.9,304.3 161.8,300.8 164.5,297.2 167.3,293.5 170.0,289.9 172.6,286.2 175.2,282.4 177.8,278.7 180.3,274.9 182.7,271.0 185.1,267.2 187.5,263.3 189.8,259.4 192.1,255.4 194.3,251.4 196.4,247.4 198.5,243.4 200.6,239.3 202.6,235.2 204.5,231.1 206.4,227.0 208.2,222.8 210.0,218.6 211.7,214.4 213.4,210.2 215.0,205.9 216.6,201.7 218.1,197.4 219.6,193.1 221.0,188.7 222.3,184.4 223.6,180.0 224.8,175.6 226.0,171.2 227.1,166.8 228.2,162.4 229.2,158.0 230.1,153.5 231.0,149.0 231.9,144.6 232.6,140.1 233.3,135.6 234.0,131.1 234.6,126.6 235.1,122.1 235.6,117.5 236.1,113.0 236.4,108.5 236.7,103.9 237.0,99.4 237.2,94.8 237.3,90.3 237.4,85.7 237.4,81.2 237.4,76.6 237.3,72.1 237.1,67.5 236.9,63.0 236.6,58.4"/>
  <circle class="bd" cx="250" cy="258" r="200"/>
  <polyline class="sd" points="230.9,149.7 232.5,153.2 234.2,156.8 235.8,160.3 237.6,163.8 239.3,167.3 241.0,170.8 242.8,174.3 244.6,177.8 246.5,181.2 248.3,184.6 250.2,188.1 252.1,191.5 254.1,194.9 256.0,198.2 258.0,201.6 260.1,204.9 262.1,208.3 264.2,211.6 266.3,214.9 268.4,218.2 270.5,221.4 272.7,224.7 274.9,227.9 277.1,231.2 279.3,234.4 281.6,237.5 283.9,240.7 286.2,243.9 288.5,247.0 290.9,250.1 293.3,253.2 295.7,256.3 298.1,259.3 300.6,262.4 303.1,265.4 305.6,268.4 308.1,271.4 310.7,274.3 313.2,277.3 315.8,280.2 318.4,283.1 321.1,286.0 323.7,288.9 326.4,291.7 329.1,294.5 331.8,297.3 334.6,300.1 337.3,302.9 340.1,305.6 342.9,308.3 345.8,311.0 348.6,313.7 351.5,316.4 354.4,319.0 357.3,321.6 360.2,324.2 363.2,326.7 366.1,329.3 369.1,331.8 372.1,334.3"/>
  <polyline class="sd" points="372.1,334.3 368.4,332.9 364.7,331.5 360.9,330.2 357.1,328.9 353.4,327.7 349.6,326.5 345.8,325.4 341.9,324.3 338.1,323.2 334.3,322.2 330.4,321.2 326.5,320.3 322.7,319.4 318.8,318.5 314.9,317.7 311.0,317.0 307.0,316.3 303.1,315.6 299.2,315.0 295.3,314.4 291.3,313.8 287.4,313.4 283.4,312.9 279.5,312.5 275.5,312.2 271.5,311.8 267.6,311.6 263.6,311.4 259.6,311.2 255.6,311.1 251.7,311.0 247.7,310.9 243.7,310.9 239.7,311.0 235.7,311.1 231.8,311.2 227.8,311.4 223.8,311.6 219.9,311.9 215.9,312.2 211.9,312.6 208.0,313.0 204.0,313.5 200.1,314.0 196.1,314.5 192.2,315.1 188.3,315.7 184.3,316.4 180.4,317.1 176.5,317.9 172.6,318.7 168.7,319.5 164.9,320.4 161.0,321.4 157.1,322.4 153.3,323.4 149.5,324.5 145.7,325.6 141.9,326.7 138.1,327.9"/>
  <polyline class="sd" points="138.1,327.9 140.4,325.5 142.7,323.0 145.0,320.5 147.3,318.0 149.6,315.5 151.8,312.9 154.0,310.3 156.2,307.7 158.3,305.1 160.5,302.4 162.6,299.8 164.6,297.1 166.7,294.4 168.7,291.6 170.7,288.9 172.7,286.1 174.6,283.3 176.5,280.5 178.4,277.7 180.3,274.9 182.1,272.0 183.9,269.1 185.7,266.2 187.5,263.3 189.2,260.4 190.9,257.5 192.6,254.5 194.2,251.5 195.8,248.5 197.4,245.5 199.0,242.5 200.5,239.5 202.0,236.4 203.4,233.4 204.9,230.3 206.3,227.2 207.7,224.1 209.0,221.0 210.3,217.9 211.6,214.7 212.9,211.6 214.1,208.4 215.3,205.2 216.5,202.0 217.6,198.8 218.7,195.6 219.8,192.4 220.8,189.1 221.8,185.9 222.8,182.7 223.8,179.4 224.7,176.1 225.6,172.8 226.4,169.6 227.3,166.3 228.0,163.0 228.8,159.6 229.5,156.3 230.2,153.0 230.9,149.7"/>
  <circle cx="230.9" cy="149.7" r="5" fill="#b45309" stroke="#0f172a" stroke-width="1.1"/>
  <circle cx="372.1" cy="334.3" r="5" fill="#b45309" stroke="#0f172a" stroke-width="1.1"/>
  <circle cx="138.1" cy="327.9" r="5" fill="#b45309" stroke="#0f172a" stroke-width="1.1"/>
  <text x="226.9" y="137.7" text-anchor="middle" font-weight="700">A</text>
  <text x="238.9" y="165.7" class="ang">&#945; = 35.32&#176;</text>
  <text x="384.1" y="338.3" font-weight="700">B</text>
  <text x="356.1" y="310.3" text-anchor="end" class="ang">&#946; = 18.47&#176;</text>
  <text x="125.1" y="331.9" text-anchor="end" font-weight="700">C</text>
  <text x="148.1" y="303.9" class="ang">&#947; = 28.08&#176;</text>
  <text class="kd" x="250" y="480" text-anchor="middle">boundary circle |z| = 1: the circle at infinity, not part of the plane</text>
  <text class="key" x="500" y="96" font-weight="700">Vertices (unit disk, Poincar&#233; metric ds = 2|dz| / (1 &#8722; |z|&#178;))</text>
  <text class="kd" x="500" y="118">A = (&#8722;0.0955, 0.5416)&#160;&#160; B = (0.6106, &#8722;0.3815)&#160;&#160; C = (&#8722;0.5597, &#8722;0.3497)</text>
  <text class="key" x="500" y="152" font-weight="700">Interior angles</text>
  <text class="kd" x="500" y="174">&#945; = 35.32&#176;&#160;&#160; &#946; = 18.47&#176;&#160;&#160; &#947; = 28.08&#176;</text>
  <text class="kd" x="500" y="194">&#945; + &#946; + &#947; = 81.87&#176; &#8212; strictly less than 180&#176;, as it must be.</text>
  <text class="key" x="500" y="228" font-weight="700">Gauss&#8211;Bonnet (curvature K = &#8722;1)</text>
  <text class="kd" x="500" y="250">Area = &#960; &#8722; (&#945; + &#946; + &#947;) = 1.7128 = 98.13&#176;</text>
  <text class="kd" x="500" y="270">No hyperbolic triangle has area &#8805; &#960;; the supremum &#960; is</text>
  <text class="kd" x="500" y="288">attained only in the limit, by an ideal triangle.</text>
  <text class="key" x="500" y="322" font-weight="700">Side lengths (hyperbolic distance)</text>
  <text class="kd" x="500" y="344">d(p,q) = arcosh(1 + 2|p&#8722;q|&#178; / ((1&#8722;|p|&#178;)(1&#8722;|q|&#178;)))</text>
  <text class="kd" x="500" y="364">a = d(B,C) = 3.0967&#160;&#160; b = d(C,A) = 2.4999&#160;&#160; c = d(A,B) = 2.8920</text>
  <text class="key" x="500" y="398" font-weight="700">Hyperbolic law of cosines</text>
  <text class="kd" x="500" y="420">cosh a = cosh b &#183; cosh c &#8722; sinh b &#183; sinh c &#183; cos &#945;</text>
  <text class="kd" x="500" y="440">11.085004 = 55.446260 &#8722; 44.361256&#160; (residual 5.3e-15)</text>
  <text class="kd" x="500" y="472">Grey arcs are the complete geodesics through each pair of</text>
  <text class="kd" x="500" y="490">vertices, ideal endpoint to ideal endpoint.</text>
</svg>