Summary -

In this topic, we described about the SVG Drawing Half Circle with detailed example.

<svg> with <circle> element is used to create the circles based on center point and a radius. We can aslo create a half circle in SVG using the radius value as a percentage. i.e from 0% to 100%.

Syntax -

<svg>
    <circle cx="x-center-val" cy="y-center-val" r="radius-val" 
		fill="color-name" stroke="stroke-color" 
		stroke-width="stroke-with-in-pixels"/>
</svg>

<circle> tag have the following attributes -

Attribute Value
cx Specifies the inside of the circle from x axis.
cy Specifies the inside of the circle from y axis.
r Specifies the radius of circle.
fill Specifies the fill environment of Circle.
stroke Specifies the outline color of circle.
stroke-width Specifies the width of stroke. 

Example-

<!DOCTYPE html>
<html>
  	<body>
    	<h2>SVG Half Circle </h2>
    	<!--First half circle-->
    	<svg height="500" width="200">
      		<circle cx="220" cy="220" r="20%" fill="yellow" />
    	</svg>
    	<!--Second half circle-->
    	<svg height="500" width="200">
      		<circle cx="0" cy="220" r="50%" fill="pink" />
    	</svg>
  	</body>
</html>

Output -