Dynamically Create an Arc

Includes sliders for the arc's radius-x, radius-y, plus angle. End points are draggable. Rotate and/or drag, plus scale the arc's <g> container. The SVG arc path is non-intuitive in its creation. This demonstrates the various values and how they impact the arc path. Also, it is recommended to include the arc path in a <g> container so any final transformations can be easily applied.
Start Point:End Point:
(Drag start/end points via cursor=pointer)
Enclose: *Center Lines:
*Draw lines from each end point to the arc's bounding box center
Radius x:
Radius y:
Note Circular arc: Radius y = Radius x
Angle:
Large Arc Flag: Sweep Flag:
Rotate ArcG   
Scale ArcG   


SVG Source:
Javascript: