Basic Arrows

Straight Lines

The simplest arrow is a straight line from one point to another.

{{< arrow from="50,30" to="250,30" >}}

Quadratic Bezier Curves

Add one control point to create a smooth curve.

Curve Upward

{{< arrow from="50,80" to="250,80" control1="150,20" >}}

Curve Downward

{{< arrow from="50,30" to="250,30" control1="150,100" >}}

Curve Left

{{< arrow from="50,50" to="250,50" control1="50,120" >}}

Curve Right

{{< arrow from="50,50" to="250,50" control1="250,120" >}}

Cubic Bezier Curves

Add two control points for S-curves and more complex shapes.

S-Curve

{{< arrow from="50,30" to="250,130" control1="150,0" control2="150,160" >}}

Reverse S-Curve

{{< arrow from="50,130" to="250,30" control1="150,160" control2="150,0" >}}

Wave

{{< arrow from="50,80" to="300,80" control1="100,20" control2="250,140" >}}