SVG <circle>

❮ Previous Next ❯

SVG Circle - <circle>

The <circle> element is used to create a circle:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Try it Yourself »

Code explanation:

  • The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)
  • The r attribute defines the radius of the circle

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.