SVG Circle

SVG Circle – <circle>

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

Here is the SVG code:


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

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

3D Effect

Portal scene

UI Design