npm install --save @vx/curve


A curve is a function that can be passed into other vx objects, mainly a LinePath to change the way the line is structured.

For example, checkout the difference between a Curve.natural:

natural curve

and a Curve.step:

step curve

The @vx/curve package is a wrapper over d3-shape curve functions.

Any function with the prefix curve in d3 can be used through vx like so:

import { curveCatmullRomOpen } from '@vx/curve';
let line = (<Shape.LinePath curve={curveCatmullRomOpen} />)

// or if you want namespace all Curves under the `Curve`
import * as Curve from `@vx/curve`;
let line = (<Shape.LinePath curve={Curve.curveCatmullRomOpen} />)


vx d3
curveBasis curveBasis
curveBasisClose curveBasisClosed
curveBasisOpen curveBasisOpen
curveStep curveStep
curveStepAfter curveStepAfter
curveStepBefore curveStepbefore
curveBundle curveBundle
curveLinear curveLinear
curveLinearClosed curveLinearClosed
curveMonotoneX curveMonotoneX
curveMonotoneY curveMonotoneY
curveCardinal curveCardinal
curveCardinalClosed curveCardinalClosed
curveCardinalOpen curveCardinalOpen
curveCatmullRom curveCatmullRom
curveCatmullRomClosed curveCatmullRomClosed
curveCatmullRomOpen curveCatmullRomOpen
curveNatural curveNatural