Drawing Arcs

Draws a circular arc with a given radius, position, and angle.

INFO

The arc is always drawn counter-clockwise from the from angle to the to angle.

TIP

For an easier way to draw angles between lines or vectors, see the Angle component.

To draw a circular sector, see the Sector component.

Props

Name	Type	Default	Description
from	number	0	The starting angle of the arc. Defaults to degrees unless radians is set.
to	number	0	The ending angle of the arc. Defaults to degrees unless radians is set.
position	PossibleVector2	[0,0]	The position of the center of the arc.
radius	number	3	The radius of the arc.
line-width	number	1.25	The width of the arc.
color	string	#000	The stroke color of the arc.
dashed	boolean	false	Whether the arc should be dashed.
radians	boolean	false	Whether to and from are provided in radians.
label	string|undefined	undefined	The label of the arc. If provided, will be drawn at the arc's halfway point.
label-size	"small"|"normal"|"large"	small	The size of the label.

Examples

Simple Arc

Code

<template>
  <Graph :units="false">
    <Arc :from="0" :to="180" :radius="2" />
  </Graph>
</template>

Arc with Position

Code

<template>
  <Graph :units="false">
    <Arc :position="[2, 0]" :from="180" :to="0" :radius="1" color="red" />
  </Graph>
</template>

Arc with Dashed Stroke

Code

<template>
  <Graph :units="false">
    <Arc :from="0" :to="270" :radius="2" :line-width="1.75" dashed />
  </Graph>
</template>

Arc with Label

Code

<template>
  <Graph :units="false">
    <Arc :from="0" :to="65" :radius="2" :line-width="1.75" label="α" />
  </Graph>
</template>