svg-cubic
v0.1.0
Published
Draw a simple svg shape with a cubic path
Downloads
2
Maintainers
Readme
svg-cubic
Draw a simple svg shape with a cubic path
Install
npm i svg-cubic
API
constructor([options])
| Option | Action | | :------ | :------- | | w | svg width | | h | svg height | | d | direction of the drawing — top, right, bottom, left | | p1 | first point | | p1a | first anchor — offset from p1 in the same direction | | p1b | first anchor — offset from p1 in the perpendicular direction | | p2 | second point | | p2a | second anchor — offset from p2 in the same direction | | p2b | second anchor — offset from p2 in the perpendicular direction |
const Cubic = require('svg-cubic')
var cubic = new Cubic({p1:10, p2:50, p2b:25, w:100, h:200})
// also allowed
var cubic = Cubic({p1:10, p2:50, p2b:25, w:100, h:200})
// all options are also accessible via getter/setter
cubic.d = 'top'
cubic.p1 = 100
svg()
Return svg node
var cubic = Cubic({p1:10, p2:50, p2b:25, w:100, h:200})
/*
<svg viewBox="0 0 100 200" preserveAspectRatio="none">
<path d="M0 0 V10 C0 10 25 50 50 50 C75 50 100 10 100 10 V0 z"></path>
</svg>
*/
var svg = cubic.svg()
path()
Return path value
var cubic = Cubic({p1:10, p2:50, p2b:25, w:100, h:200})
cubic.p1 = 20
cubic.p1b = 30
// M0 0 V20 C30 20 25 50 50 50 C75 50 70 20 100 20 V0 z
var path = cubic.path()
Demo
npm i && npm start
Related
- svg-line
- svg-peak
- svg-quad
Thanks
Mainly forked / inspired on Codrops and Isaac Montemayor
License
MIT