Vachmi

The <circle> element is a basic SVG shape to draw circles of various radii, colours and at desired location.

Here is the SVG code to draw this circle.

<svg width="200" height="150">
  <circle cx="50" cy="50" r="50" style="fill:rgb(100,150,100);" />
</svg>

Code Explanation

• The position of the circle is determined by cx and cy attributes. These represent the centre of the circle.

• This position is relative to the position of its parent element.

• The r attribute defines the radius of the circle.

• The CSS fill property defines the fill color of the rectangle

Attributes

cx - The x-axis coordinate of the center of the circle

It can accept a length or a percentage as its value. Default Value: 0


cy - The y-axis coordinate of the center of the circle

It can accept a length or a percentage as its value. Default Value: 0


r - The radius of the circle

It can accept a length as its value. A value less than or equal to zero does not result in any image.