Create Circles and Rects in the SVG DOM

[00:03] Drawing geometric primitives in an SVG take a few attributes depending on the shape. We're going to start off with the most basic of these, circles, ellipses, and rectangles. To draw a circle, all you really need is a radius.

[00:12] As we specify a radius here, a circle is drawn with the default coordinates of x at zero and y at zero. Typically, we want to plot a circle somewhere in the space of a viewbox. You can imagine that the viewbox makes a grid that scales along with the SVG, visualized here.

[00:27] To plot the circle, we'll define a Cx that specifies the center of the circle along the x-axis, and a Cy value, which plots the center along the y-axis. If we wanted the circle to be an ellipse instead, and have an uneven shape, we would change the element name circle into ellipse.

[00:45] We'd then update the R value into two values, Rx and Ry. Now, it can expand or contract in any direction. If I'd like it to be plotted to different coordinates, I simply change the Cx or Cy values, and it updates in position.

[01:00] Now, we have four values that are very similar to a square or rectangle. Both are defined by the rect element. A rect element has an x value, a y value, a width, and a height. If I'd like this rectangle to have rounded corners, I'd pass in an Rx and Ry value. These create rounded edges.