g2 comes with a custom HTML element which allows to implement command queues directly into the page without the necessity of running scripts.

The aim of this HTML element is to minimize the implementation overhead of the user, while maintaining the flexibility g2 provides.

To implement the g2 element into your page just import the g2.html.js.

<g-2 id='g' width="601" height="401" cartesian x0="0" y0="0" grid interactive>
{ "main":[
    {"c":"lin","a":{"x1":"@A.x","y1":"@A.y","x2":"@B.x","y2":"@B.y","lw":3,"ls":"@linkcolor"}},
    {"c":"cir","a":{"id":"A","x":150,"y":50,"r":5,"fs":"orange"}},
    {"c":"cir","a":{"id":"B","x":-50,"y":100,"r":5,"fs":"orange"}},
    {"c":"cir","a":{"x":15,"y":150,"r":30,"fs":"orange"}},
    {"c":"cir","a":{"x":15,"y":150,"r":15,"fs":"snow"}}
]}
</g-2>
<script src="https://cdn.jsdelivr.net/gh/goessner/g2/dist/g2.html.js"></script>

The overall styling is handled by respective properties of the g-2 element:

• width: Width of the element in px.
• height: Height of the element in px.
• x0: x-origin of the drawing.
• y0: y-origin of the drawing.
• cartesian:: Whether cartesian is true or not (see View).
• grid: Whether a grid is rendered or not.
• darkmode: Whether dark mode is set or not.
• interarctive: Whether the element is interactive or not.

The innerHTML defines the command queue of the drawing.

The syntax of the innerHTML is straight forward: "main" defines the array containing the elements of the command queue, whereas each element is an object containing "c" (think command) and "a" (think arguments). So the given "main":

"main":[
    {"c":"cir","a":{"x":250,"y":100,"r":30,"fs":"orange"}},
    {"c":"cir","a":{"x":250,"y":100,"r":15,"fs":"snow"}}
  ]

is equal to the command queue given by

g2().cir({x:250,y:100,r:30,fs:"orange"})
    .cir({x:250,y:100,r:15,fs:"snow"});

Note: Don't forget to use quotations (e.g. "x") for the properties, since the g2-element interprets the innerHTML using the JSON format.