# Basic shapes

# Rectangle

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

.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.

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

# 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

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

# 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.

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

# 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.

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().

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.

# 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].

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.

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