Basic shapes

Rectangles

The .add('rect') method creates an element that shows a rectangle.

const svg  = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const rect = svg.add('rect').x(10).y(10).width(90).height(90).fill('#00D800');

<svg viewBox="0,0,100,100">
  <rect x="10" y="10" width="90" height="10" fill="#00D800"></rect>
</svg>

.width() and .height() establish the size of the rectangle. .x() and .y() move the shape to the appropriate position. All these values are related to the dimensions defined into the viewBox.

.fill() sets the interior color for the shape. It defaults to black when left unspecified. .stroke() sets the border color and .stroke_width() the width of this border.

const svg  = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const rect = svg.add('rect').x(0).y(0).width(100).height(100)
                .fill('#00D800').stroke('#000').stroke_width(10);

<svg viewBox="0,0,100,100" width="75" height="75">
  <rect width="100" height="100" rx="20" y="20"></rect>
</svg>

It is also possible to create rounded corners by specifying values within .rx() and .ry().

const svg  = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const rect = svg.add('rect').x(0).y(0).width(100).height(100).rx(20).y(20);

<svg viewBox="0,0,100,100" width="75" height="75">
  <rect width="100" height="100" rx="20" y="20"></rect>
</svg>

Circle

.add('circle') creates a circle defined with a center point (.cx() and .cy()) and an outer radius (.r()). All these values are according to the dimensions defined in the viewBox

const svg    = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const circle = svg.add('circle').cx(50).cy(50).r(50).fill('#0000D8');

<svg viewBox="0,0,100,100" width="75" height="75">
  <circle cx="50" cy="50" r="50" fill="#0000D8"></circle>
</svg>

.fill() sets the interior color for the circle; .stroke() sets the circle border color and .stroke_width() the border width.

const svg    = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const circle = svg.add('circle').cx(50).cy(50).r(45)
                  .fill('#D80000').stroke('#00D800').stroke_width(10);

<svg viewBox="0,0,100,100" width="75" height="75">
  <circle cx="50" cy="50" r="45" fill="#00D800" stroke="#D80000" stroke-width="10"></circle>
</svg>

Ellipse

.add('<ellipse')' creates an ellipse that's defined with a center point (.cx() and .cy ()) and two radiuses (rx() and ry()). All these values are according to the dimensions defined in the viewBox.

const svg     = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const ellipse = svg.add('ellipse').cx(50).cy(50).rx(50).ry(30).fill('#D80000');

<svg viewBox="0,0,100,100" width="75" height="75">
  <ellipse cx="50" cy="50" rx="50" ry="30" fill="#D80000"></ellipse>
</svg>

.fill() sets the ellipse's interior color. .stroke() sets its border color and .stroke_width() its border width.

const svg     = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const ellipse = svg.add('ellipse').cx(50).cy(50).rx(40).ry(30).fill('#D80000')
                   .fill('#D80000').stroke('#00D800').stroke_width(10);

<svg viewBox="0,0,100,100" width="75" height="75">
  <ellipse cx="50" cy="50" rx="40" ry="30" fill="#D80000" stroke="#00D800" stroke-width="10"></ellipse>
</svg>```

Line

.add('line') defines a straight line with a starting point (.x1() and y1()) and ending point. (.x2() and y2()) define all values as dimension into the viewBox.

const svg  = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const line = svg.add('line').x1(10).y1(10).x2(90).y2(90).stroke('#0000D8');

<svg viewBox="0,0,100,100" width="75" height="75">
  <line x1="10" y1="10" x2="90" y2="90" stroke="#0000D8"></line>
</svg>

In this case .stroke() is a mandatory attribute and must be defined into the element or its parents. Of course, it's possible to define the line width using .stroke_width().

const svg  = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
const line = svg.add('line').x1(0).y1(50).x2(100).y2(50)
                .stroke('#0000D8').stroke_width(20);

<svg viewBox="0,0,100,100" width="75" height="75">
  <line x1="0" y1="50" x2="100" y2="50" stroke="#0000D8" stroke-width="20"></line>
</svg>

Another very useful method is .stroke_linecap(). This method defines the end line style with these values:

• butt indicates that the stroke for each side does not extend beyond its two endpoints. It is the default value.
• round value indicates that at the end of each side the stroke will be extended by a half-circle with a diameter equal to the stroke width.
• square indicates that at the end of each side the stroke will be extended by a rectangle.

const svg = gySVG().viewBox(0, 0, 100, 100).width(75).height(75);
svg.add('line').x1(10).y1(10).x2(90).y2(10)
               .stroke('#000').stroke_width(10);
svg.add('line').x1(10).y1(35).x2(90).y2(35)
               .stroke('#000').stroke_width(10).stroke_linecap('butt');
svg.add('line').x1(10).y1(60).x2(90).y2(60)
               .stroke('#000').stroke_width(10).stroke_linecap('round');
svg.add('line').x1(10).y1(85).x2(90).y2(85)
               .stroke('#000').stroke_width(10).stroke_linecap('square');

<svg viewBox="0,0,100,100" width="75" height="75">
</svg>

Polyline

.add('polyline') creates a set of connected straight line segments, generally resulting in an open shape (with disconnected starting and ending points). The line is defined by .points(), which receives an array of arrays with structure [x, y].

const svg      = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('polyline').points([[10,0], [20,80], [40,20], [60,60], [70,40], [80,50]])
                   .fill('none').stroke('black').stroke_width(5);

<svg viewBox="0 0 100 100" width="75" height="75">
  <polyline points="10,0,20,80,40,20,60,60,70,40,80,50"
            fill="none" stroke="black" stroke-width="5">
  </polyline>
</svg>

Usually this shape is defined with .fill('none'), a .stroke() and a .stroke_width() configuration.

Polygon

.add('polygon') defines a closed shape consisting of connected lines. The points of the polygon shape are defined by .points() through an array of arrays with [x, y] values.

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('polygon').points([[50,0], [60,40], [100,50], [60,60], [50,100], [40,60], [0,50], [40,40]]);

<svg viewBox="0 0 100 100" width="75" height="75">
  <polygon points="50,0,60,40,100,50,60,60,50,100,40,60,0,50,40,40"></polygon>
</svg>

In other cases, .fill() sets the polygon interior color, .stroke() sets its border color and .stroke_width() its border width.

const svg = gySVG().viewBox('0 0 100 100').width(75).height(75);
svg.add('polygon').points([[50,0], [60,40], [100,50], [60,60], [50,100], [40,60], [0,50], [40,40]])
                  .fill('#D8D800').stroke('#F60').stroke_width(2);

<svg viewBox="0 0 100 100" width="75" height="75">
  <polygon points="50,0,60,40,100,50,60,60,50,100,40,60,0,50,40,40" 
           fill="#D8D800" stroke="#F60" stroke-width="2">
  </polygon>
</svg>