g2 – Interactive Weak Constrained Geometry

This are mostly g2 features shown here. You can select and move the three circular handles in the vector graphics below.

{ "main":[ {"c":"lin","a":{"x1":"@A.x","y1":"@A.y","x2":"@B.x","y2":"@B.y","lw":3,"ls":"navy"}}, {"c":"cir","a":{"id":"A","x":150,"y":100,"r":5,"fs":"orange"}}, {"c":"cir","a":{"id":"B","x":-50,"y":100,"r":5,"fs":"orange"}} ] }

Fig.: Weak constrained geometry

The custom g-2 element used is ...

<g-2 id='g' width="400" height="300" x0="100" y0="100" cartesian grid darkmode interactive>
  <!-- g2 graphics data -->
</g-2>

... and g2 graphics data embedded are:

{ "main":[
    {"c":"lin","a":{ "x1":"@A.x","y1":"@A.y",
                     "x2":"@B.x","y2":"@B.y",
                     "lw":3, "ls":"navy"} },
    {"c":"cir","a":{ "id":"A",
                     "x":150,"y":100,"r":5,
                     "fs":"orange"} },
    {"c":"cir","a":{ "id":"B",
                     "x":-50,"y":100,"r":5,
                     "fs":"orange"} }
  ]
}