Advanced Curves

Simple Curve Parameter

Use curve (0-1) instead of manually specifying control points. Higher values create more pronounced curves.

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

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

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

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

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

Use bend to control which direction the curve bends.

{{< arrow from="50,50" to="250,50" curve="0.5" bend="left" >}}

{{< arrow from="50,50" to="250,50" curve="0.5" bend="right" >}}

Specify exact bend angle in degrees.

{{< arrow from="50,50" to="250,50" curve="0.5" bend="45" >}}

{{< arrow from="50,50" to="250,50" curve="0.5" bend="135" >}}

{{< arrow from="50,50" to="250,50" curve="0.5" bend="-45" >}}

Curve and bend work with any arrow direction.

{{< arrow from="50,30" to="250,100" curve="0.5" bend="left" color="blue" >}}

{{< arrow from="50,30" to="250,100" curve="0.5" bend="right" color="red" >}}

{{< arrow from="50,100" to="250,30" curve="0.5" bend="left" color="green" >}}

{{< arrow from="50,100" to="250,30" curve="0.5" bend="right" color="purple" >}}

{{< arrow from="50,20" to="50,120" curve="0.5" bend="left" >}}

{{< arrow from="150,20" to="150,120" curve="0.5" bend="right" >}}

{{< arrow from="50,50" to="250,50" curve="0.6" label="Easy curves!" >}}

{{< arrow from="50,50" to="250,50" curve="0.5" bend="left" color="crimson" head="stealth" width="3" >}}

{{< arrow from="50,50" to="250,50" curve="0.7" bend="right" color="steelblue" line="double" >}}

Compare manual control points with the simplified curve parameter.

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

{{< arrow from="50,80" to="250,80" curve="0.6" bend="left" color="teal" >}}

Use waypoints to create complex paths through multiple points.

{{< arrow from="30,50" to="270,50" waypoints="100,20; 150,80; 200,20" >}}

{{< arrow from="30,50" to="270,50" waypoints="100,20; 150,80; 200,20" smooth="false" >}}

{{< arrow from="30,80" to="270,80" waypoints="80,30; 120,100; 180,30; 220,100" color="purple" >}}

{{< arrow from="30,100" to="270,20" waypoints="80,100; 80,60; 150,60; 150,20; 220,20" smooth="false" color="steelblue" >}}

{{< arrow from="30,100" to="270,20" waypoints="80,100; 80,60; 150,60; 150,20; 220,20" color="teal" >}}

{{< arrow from="30,60" to="270,60" waypoints="80,20; 180,20; 180,100; 80,100; 80,60" color="crimson" head="stealth" >}}

{{< arrow from="20,50" to="280,50" waypoints="60,30; 100,70; 140,30; 180,70; 220,30" color="orange" width="3" >}}