# @rob10e/svg-path-js

> A declarative SVG path builder

Latest version **3.0.0** (published 2018-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rob10e/svg-path-js
pnpm add @rob10e/svg-path-js
yarn add @rob10e/svg-path-js
bun add @rob10e/svg-path-js
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2018-09-02 |
| First published | 2018-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8.9 |
| Dependencies | 0 |
| Unpacked size | 138.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Robert Tenney |
| Maintainers | rob10e |

## Links

- npm: https://www.npmjs.com/package/@rob10e/svg-path-js
- Repository: https://github.com/rob10e/svg-path
- Homepage: https://github.com/rob10e/svg-path#readme
- Issues: https://github.com/rob10e/svg-path/issues
- npm.io page: https://npm.io/package/@rob10e/svg-path-js

## Recent versions

- 3.0.0 (latest) — 2018-09-02
- 2.0.1 — 2018-09-02
- 2.0.0 — 2018-09-02
- 1.0.3 — 2018-09-02
- 1.0.2 — 2018-09-02

## README

![Travis CI](https://travis-ci.com/rob10e/svg-path.svg?branch=master)  [![codecov](https://codecov.io/gh/rob10e/svg-path/branch/master/graph/badge.svg)](https://codecov.io/gh/rob10e/svg-path) [![npm version](https://badge.fury.io/js/%40rob10e%2Fsvg-path-js.svg)](https://badge.fury.io/js/%40rob10e%2Fsvg-path-js) ![](https://david-dm.org/rob10e/svg-path.svg)
# svg-path-js

A declaritive SVG path builder


### Installation
```bash
$ npm i svg-path-js
```

### Usage
```javascript
import Builder from 'svg-path-js';

function renderSvgPath() {
  const builder = new Builder();
  const path = builder
                .moveTo(10, 10)
                .lineToRel(10, 10)
                .cubicToRel(20, 20, 40, 20, 50, 10)
                .smoothToRel(150, 150, 180, 80)
                .arcTo(30, 50, 0, false, true, 165.55, 162.45)
                .close();
        
  return <Path d={path}/>
  // => 'M 10 10 l 10 10 c 70 20, 120 20, 120 10 s 150 150, 180 80 A 30 50 0 0 1 165.55 162.45 z'
}
```

### API
[Full API documentation here](https://rob10e.github.io/svg-path/)

#### `new Builder()`
create an instance of the path builder

- **`moveTo(x: number, y: number)`** move to position without drawing a line *absolute*
- **`moveToRel(x: number, y: number)`** move to position without drawing a line *relative*
- **`lineTo(x: number, y: number)`** draw a line from current position to point *absolute*
- **`lineToRel(x: number, y: number)`** draw a line from current position to point *relative*
- **`horizontalTo(x: number)`** draw line from current position to point *absolute*
- **`horizontalToRel(x: number)`** draw line from current position to point *relative*
- **`verticalTo(y: number)`** draw a line from current position to point *absolute*
- **`verticalToRel(y: number)`** draw a line from current position to point *relative*
- **`cubicTo(x1: number, y1: number, x2: number, y2: number, x: number, y: number)`** draw a cubic bezier curve from current position to point *absolute*
- **`cubicToRel(y)`** draw a cubic bezier curve from current position to point *relative*
- **`smoothTo(x2: number, y2: number, x: number, y: number)`** draw a smooth curve from previous curve to point *absolute*
- **`smoothToRel(x2: number, y2: number, x: number, y: number)`** draw a smooth curve from previous curve to point *relative*
- **`quadTo(x1: number, y1: number, x: number, y: number)`** draw a quadradic curve from current position to point *absolute*
- **`quadToRel(x1: number, y1: number, x: number, y: number)`** draw a quadradic curve from current position to point *relative*
- **`quadStringTo(x: number, y: number)`** draw a quadradic curve from previous curve to point *absolute*
- **`quadStringToRel(x: number, y: number)`** draw a quadradic curve from previous curve to point *relative*
- **`arcTo(rx: number, ry: number, xAxisRotation: number, largeArc: boolean, sweep: boolean, x: number, y: number )`** draw arc from current position to point *absolute*
- **`arcToRel(rx: number, ry: number, xAxisRotation: number, largeArc: boolean, sweep: boolean, x: number, y: number )`** draw arc from current position to point *relative*
- **`close()`** return the path as an Svg formatted string, closing the path
- **`end()`** return the path as an Svg formatted string

*Note*:
 I was inpired to write this while building an application requiring a lot of fancy SVG path drawing.
 I hope this will help you as it helped me.

---
_Source: https://npm.io/package/@rob10e/svg-path-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._