w3docs logo

SVG Circle

Description of the <circle> element

The SVG <circle> element creates circles, based on a center point and a radius. The coordinates of the circle's center are specified by the cx and cy attributes. And the radius of the circle is specified by the r attribute.

Example of the SVG <circle> element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="300" width="300">
      <circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>

Let’s explain the code above:

  • The cx and cy attributes specify the x and y coordinates of the circle’s center. In the cases where the cx and cy attributes are omitted, the center of the circle is set to (0,0).
  • The r attribute is used to specify the radius of the circle.

Advanced SVG Circle Techniques

While basic SVG circles are great, there are many advanced techniques that you can use to make your SVG circles stand out. Here are a few examples:

Gradients

SVG circles can use gradients to create a smooth transition between colors. Here is an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg>
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
    </svg>
  </body>
</html>

In this example, we have created a gradient that goes from yellow to red. We then use the fill attribute to apply the gradient to our circle.

Shadows

SVG circles can also have shadows to create depth and dimension. Here is an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg>
      <circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
      <filter id="shadow">
        <feDropShadow dx="2" dy="2" stdDeviation="2" />
      </filter>
    </svg>
  </body>
</html>

In this example, we have created a blue circle with a shadow. We use the filter attribute to apply the shadow effect, which is defined in the filter element.

Animations

Finally, SVG circles can also be animated to create interactive experiences for your users. Here is an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg>
      <circle id="myCircle" cx="50" cy="50" r="40" fill="green">
        <animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
      </circle>
    </svg>
  </body>
</html>

In this example, we have created a green circle that moves when clicked. We use the animate element to define the animation and attach it to the circle element using the attributeName attribute.

Attributes

The SVG <circle> element also supports the Global Attributes and Event Attributes.

Attribute Description
cx The x-axis coordinate of the circle’s center.
cy The y-axis coordinate of the circle’s center.
r The radius of the circle. A value that is lower or equal to zero will disable the rendering of the circle.
pathlength This attribute specifies the total length for the path, in user units.

Practice Your Knowledge

Which of the following attributes are necessary to create an SVG circle element in HTML?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?