Circles in HTML5

How to create a circle using SVG in HTML5?

Circles

We can create the circles in SVG using HTML

The syntax of the circle is

cx
cy
radius

cx - It defines the circle X-Coordinates

cy - It defines the circle Y-Coodinates

r - Radius

 <h2 style="color:blue"><i>SVG circle</i></h2>
    <svg height="100" width="100">
        <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="yellow" />
    </svg>

In the above code snippet we have defined the circle with the svg element with the width value 100 and height value 100

cx - It defines the x coodinates of the circle
cy - It defines the y coordinates of the circle
stroke() - It defines the stroke color of the circle
Stroke-width - It defines the stroke width as 2
fill() - It defines the color as yellow

output

Circle Fill

It is used to create the circle

 <h2 style="color:red"><i>SVG circle</i></h2>
    <svg height="100" width="100">
        <circle cx="40" cy="40" r="24"
                style="stroke: blue;
           fill:none" />

Circle fill()

In the above code snippet we have defined the circle with style as none

cx - It defines the x coodinates of the circle
cy - It defines the y coordinates of the circle
stroke() - It defines the stroke color of the circle
Stroke-width - It defines the stroke as blue

output

Circle with Opacity

It is used to create the circle with transparent

<h2 style="color:red"><i>SVG circle with opacity</i></h2>
    <svg width="300" height="100">
        <circle cx="40" cy="40" r="24"
                style="stroke: pink;
            fill:red"/>
        <circle cx="64" cy="40" r="24"
                style="stroke: green;
           fill: red"
               fill-opacity="0.3" />
    </svg>

Circle Opacity

In the above code snippet we have defined the two circles to differentiate the opacity of the one circle