Draw swoopy lines from one point to another. See it in action here.
In vanilla, a swoopy global is exported. You can use the latest version from unpkg.
<script src="https://unpkg.com/[email protected]/build/swoopy.js"></script>
<script src="https://unpkg.com/[email protected]/build/swoopy.min.js"></script>If you'd rather host it yourself, download the latest release from the build directory.
npm i swoopy -Sconst swoopy = require("swoopy");# swoopy.arc(a, b[, offset[, precision]]) · Source
Returns an array of points representing a circular arc running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how round you want your arc to be. If an offset is not specified, it defaults to 1, which will return the points of a semicircle. An offset of 0 returns the points of a straight line segment. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
const arc = swoopy.arc([0, 0], [10, 0]); // Returns the points of a semicircle between <0, 0> and <10, 0>.# swoopy.cat(a, b[, offset[, precision]]) · Source
Returns an array of points representing the catenary curve running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how far perpendicularly from the midpoint of a and b to translate the control point of the Bézier curve. If an offset is not specified, it defaults to 0.5, or one-quarter the distance between a and b. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
const cat = swoopy.cat([0, 0], [10, 0]); // Returns the points of a catenary curve between <0, 0> and <10, 0>, with an offset that is one-quarter the distance between <0, 0> and <10, 0>.# swoopy.cubic(a, b[, offset[, precision]]) · Source
Returns an array of points representing the cubic Bézier curve running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how far perpendicularly from the midpoint of a and b to translate the control points of the Bézier curve. If an offset is not specified, it defaults to 0.5, or one-quarter the distance between a and b. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
const cubic = swoopy.cubic([0, 0], [10, 0]); // Returns the points of a cubic Bézier curve between <0, 0> and <10, 0>, with offsets that are one-quarter the distance between <0, 0> and <10, 0>.# swoopy.quad(a, b[, offset[, precision]]) · Source
Returns an array of points representing the quadratic Bézier curve running between point a and point b, both of which must be passed as an array of two numbers representing the x- and y-coordinates of the points. You may pass an optional offset representing how far perpendicularly from the midpoint of a and b to translate the control point of the Bézier curve. If an offset is not specified, it defaults to 0.5, or one-quarter the distance between a and b. You may pass an optional precision representing how precisely to interpolate between the two points. A lower precision corresponds to more points interpolated along the curve. If a precision is not specified, it defaults to 0.1.
const quad = swoopy.quad([0, 0], [10, 0]); // Returns the points of a quadratic Bézier curve between <0, 0> and <10, 0>, with an offset that is one-quarter the distance between <0, 0> and <10, 0>.