https://github.com/alexsugak/react-svg-pathline
React component for drawing SVG path through set of points, smoothing the corners
https://github.com/alexsugak/react-svg-pathline
component corners line path react smooth svg
Last synced: 2 months ago
JSON representation
React component for drawing SVG path through set of points, smoothing the corners
- Host: GitHub
- URL: https://github.com/alexsugak/react-svg-pathline
- Owner: AlexSugak
- Created: 2016-07-03T18:14:44.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-02-07T09:33:23.000Z (over 2 years ago)
- Last Synced: 2025-04-09T23:37:46.390Z (2 months ago)
- Topics: component, corners, line, path, react, smooth, svg
- Language: JavaScript
- Homepage:
- Size: 59.6 KB
- Stars: 46
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-svg-pathline
React component for drawing SVG path through set of points, smoothing the corners
## Why?
SVG `polyline` is the simplest option for rendering "path" line through set of known points but it gives you a "broken" line with sharp corners.
Using SVG `path` you can get smooth corners but it requires adding more points to original set.
This component helps with rendering SVG path by generating correct SVG data from original set of points, producing "smooth path line" as result.
So instead of this:
```html
```
You get this:
```javascript
import React from 'react'
import {PathLine} from 'react-svg-pathline'
export class MyComponent extends React.Component {
render() (
)
}
```
## Installation
Requires [nodejs](http://nodejs.org/).
```sh
$ npm install react-svg-pathline
```
## Live Example
```sh
$ npm i && npm i react react-dom && npm start
```
Open a browser at localhost:8080