In Scalable Vector Graphics (SVG), the <circle> element is used to create a circle. Here are some ways you can use the <circle> element in SVG:

Basic Circle:

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

This example creates a circle with a center at (50, 50), a radius of 40, a black border with a thickness of 3, and a red fill.

Dynamic Circle:

You can use JavaScript to dynamically change the attributes of the circle:

xml
<svg width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <script>
    // Example of changing the circle's color on click
    document.getElementById('myCircle').addEventListener('click', function() {
      this.setAttribute('fill', 'blue');
    });
  </script>
</svg>

Animated Circle:

Animate the circle using SVG animations:

xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="r" from="40" to="20" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

In this example, the circle's radius is animated to change from 40 to 20 over a 2-second duration, and the animation repeats indefinitely.

Gradients:

You can use gradients for the circle's fill:

xml
<svg width="100" height="100">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url(#grad1)" />
</svg>

This example uses a radial gradient for the circle's fill, transitioning from white to blue.

These are just a few examples, and there are many more attributes and properties you can use to customize circles in SVG.