HTML5 SVG Drawing Half Circle
<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>