An arc is a segment of a circle or ellipse. In SVG we can use the <path> element with the A command to draw an arc.
Like most path segments, the arc command continues the previous segment. In this example we use the M command to move to the starting point and from there we start the curve.
The A command is a complex one.
First we set the horizontal and vertical radii of the arc. If these are equal, the arc is on a circle. If they are different, we get an elliptical arc.
Then we set a rotation. This value only has an effect if the previous two values are different. This is the angle of the x-axis of the ellipse relative to the x-axis of the SVG canvas.
Then the large arc flag determines if the arc is reaching the end point the short way or the long way.
The sweep flag flag determines if the arc is drawn in a clockwise or counterclockwise direction.
Finally, we set the end point coordinate. This is where the arc ends.
You can set any color value that is valid in CSS. This includes named colors, hex codes, the rgb function and more. Set it to none to hide.
Set the thickness of the stroke. It can be set to any positive number.
Set the shape to be used at the end of a line or open subpath.
Set the shape to be used at the corners of paths and basic shapes when they are stroked.
You can set any color value that is valid in CSS. This includes named colors, hex codes, the rgb function and more. Set it to none to hide.