SVG: Circle Arc

By Xah Lee. Date: . Last updated: .

The only way to draw an arc of a circle (such as used in pie chart), is by using the path element with the A command.

[see SVG Path: Elliptical Arc]

The path A command is not easy to understand.

Here's a JavaScript function that generates a circle arc using path element, by specifying the circle center, radius, and start/end degree.

const f_svg_ellipse_arc = (([cx,cy],[rx,ry], [t1, t2], phi ) => {
/* [
f_svg_ellipse_arc ([cx,cy],[rx,ry], [t1, t2], phi )
returns a SVG path element that represent a ellipse.
cx,cy → center of ellipse
rx,ry → major minor radius
t1,t → start/end angle, in radian.
phi → rotation on the whole
version 2019-05-17
 ] */
const delta = (t2 - t1) ;
const startX = Math.cos(phi) * rx * Math.cos(t1) + ( -Math.sin(phi) * ry * Math.sin(t1)) + cx;
const startY = Math.sin(phi) * rx * Math.cos(t1) + ( Math.cos(phi) * ry * Math.sin(t1)) + cy;
const endX = Math.cos(phi) * rx * Math.cos(t1+delta) + ( -Math.sin(phi) * ry * Math.sin(t1+delta)) + cx;
const endY = Math.sin(phi) * rx * Math.cos(t1+delta) + ( Math.cos(phi) * ry * Math.sin(t1+delta)) + cy;
const fA = ( (  Math.abs (delta) > Math.PI ) ? 1 : 0 );
const fS = ( (  delta > 0 ) ? 1 : 0 );
const path_2wk2r = document.createElementNS("http://www.w3.org/2000/svg", "path");
path_2wk2r.setAttribute("d", "M " + startX + " " + startY + " A " + [ rx , ry , phi , fA, fS, endX, endY ].join(" "));
return path_2wk2r;
});

Interactive Circle Arc

ellipse center major/minor radius
start/end angle (radians)

When cursor is in a input box, you can use up/down arrow or mouse wheel to increase/decrease.

SVG tutorial

  1. SVG Basics
  2. Path
  3. Path Elliptical Arc
  4. Circle Arc
  5. Specifying Styles
  6. Shape Styles
  7. Viewport
  8. viewBox
  9. Coordinate Transformation
  10. Text Element
  11. Font Size
  12. Structure Elements
  13. Scripting SVG
  14. SVG Clock
  15. Animation

Canvas Intro

  1. Canvas vs SVG
  2. Canvas intro
  3. Demo: Halma
  4. Demo: Raycaster
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog