spg

svg-path-generator

generate svg paths without memorizing the svg path spec / shortcodes http://www.w3.org/TR/SVG/paths.html

Showing:

Popularity

Downloads/wk

840

GitHub Stars

47

Maintenance

Last Commit

6yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

svg path generator

utilities to generate svg paths

installation

use with node or in browser with browserify

npm install svg-path-generator

usage

var Path = require('svg-path-generator');

var path = Path()
            .moveTo(10, 25)
            .lineTo(10, 75)
            .lineTo(60, 75)
            .lineTo(10, 25)
            .end();

console.log(path) // M 10 25 L 10 75 L 60 75 L 10 25

to use relative coordinates, call .relative() before any method

e.g.

var Path = require('svg-path-generator');

var path = Path()
            .moveTo(10, 25)
            .relative().lineTo(0, 50)
            .relative().lineTo(50, 0)
            .relative().lineTo(-50, -50)
            .end();

console.log(path) // M 10 25 l 0 50 l 50 0 l -50 -50

both paths are equivalent.

methods

svg path methods

  • moveTo(x, y)

    • moves current position to x,y without drawing anything
    • multiple sets of coordinates can be provided, i.e. Path.moveTo(x1, y1, x2, y2) is equivalent to Path.moveTo(x1, y1).moveTo(x2, y2)
  • lineTo(x, y)

    • moves current position to x,y while drawing a line from previous position
    • multiple sets of coordinates can be provided
  • horizontalLineTo(x)

    • move from previous position along the x axis, drawing a line
  • verticalLineTo(y)

    • move from previous position along the y axis, drawing a line
  • curveTo(x1, y1, x2, y2, x, y)

    • Draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.
    • multiple sets of coordinates can be provided
  • smoothCurveTo(x2, y2, x, y)

    • Draws a cubic Bézier curve from the current point to (x,y). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point.
    • multiple sets of coordinates can be provided
  • bezierCurveTo(x1, y1, x, y)

    • Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1) as the control point.
    • multiple sets of coordinates can be provided
  • smoothBezierCurveTo(x, y)

    • Draws a quadratic Bézier curve from the current point to (x,y). The control point is assumed to be the reflection of the control point on the previous command relative to the current point.
    • multiple sets of coordinates can be provided
  • ellipticalArc(rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y)

    • Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the current coordinate system. The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters. large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.
  • close()

    • closes the current path

other methods

  • .relative() call before any method to have the method accept relative instead of absolute coordinates
  • .end() converts the Path object to a string. This also gets called on the .toString() method

license

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100