SVG Circle

Last Updated:

How to Draw a Circle?

The <circle> SVG element that draws circles based on a center point and a radius.

In this example, we will draw a circle of radius 40 by using <circle> SVG element.

Example

HTML Online Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> svg circle{ stroke:red; stroke-width:3; fill:green; } </style> </head> <body> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" /> </svg> </body> </html>

Attributes Value

AttributeExplanation
cx x-axis co-ordinate of the center of the circle. Default is 0.
cy y-axis co-ordinate of the center of the circle. Default is 0.
r radius of the circle.

Share this Page

Meet the Author