Generate SVG path data declarative way. API inspired by https://github.com/andrewgrewell/svg-path-builder
$ npm install owd-path-builder
import { PathBuilder } from 'owd-path-builder';
const pathData = new PathBuilder()
.absolute()
.moveTo(10, 10)
.line(20, 20)
.relative()
.horizontalLine(10)
.verticalLine(10)
.curve(10, 0, 10, 10, 10, 10)
.quadraticCurve(10, 0, 10, 10)
.symmetricCurve(10, 20, 15, 15)
.arc(30, 50, -45, 0, 1, 215.1, 109.9)
.close()
.toString();
The above call will produce M10 10 L20 20 h10 v10 c10 0 10 10 10 10 q10 0 10 10 s10 20 15 15 a30 50 -45 0 1 215.1 109.9 Z
. You can learn more about the details of SVG paths from https://css-tricks.com/svg-path-syntax-illustrated-guide/
You can instantiate new builder instance by calling new PathBuilder()
.
absolute()
- switch next nodes to absolute moderelative()
- switch next nodes to relative mode (default)moveTo(x, y)
- move to positionline(x, y)
- draw line to positionhorizontalLine(x)
- draw horizontal line to positionverticalLine(y)
- draw vertical line to positioncurve(x1, y1, x2, y2, x3, y3)
- draw berier curvequadraticCurve(x1, y1, x2, y2)
- draw quadratic curvesymmetricCurve(x1, y1, x2, y2)
- draw symmetric curvearc(x1, y1, rotation, arc, sweep, x2, y2)
- draw arcclose()
- close the pathtoString()
- export path into string in SVG compatibile format
This package is experimental and was made primarily to be used in our team's internal projects. If you find this useful and want to improve the package, then contributions welcome. Please submit all pull requests against the master branch. Please include tests covering your improvements.
Jakub Przyborowski, Owls Department