svg-quad
v0.1.0 svg path draw curve quad quadratic
svg-quad
Draw a simple svg shape with a quadratic path
Install
npm i svg-quad
API
constructor([options])
Option | Action |
---|---|
w | svg width |
h | svg height |
d | direction of the drawing — top, right, bottom, left |
p1 | first point |
p2 | anchor |
const Quad = require('svg-quad')
var quad = new Quad({p1:10, p2:50, w:100, h:200})
// also allowed
var quad = Quad({p1:10, p2:50, w:100, h:200})
// all options are also accessible via getter/setter
quad.d = 'top'
quad.p1 = 100
svg()
Return svg node
var quad = Quad({p1:10, p2:50, w:100, h:200})
/*
<svg viewBox="0 0 100 200" preserveAspectRatio="none">
<path d="M0 0 V10 Q50 50 100 10 V0 z"></path>
</svg>
*/
var svg = quad.svg()
path()
Return path value
var quad = Quad({p1:10, p2:50, w:100, h:200})
quad.p1 = 20
// M0 0 V20 Q50 50 100 20 V0 z
var path = quad.path()
Demo
npm i && npm start
Related
Thanks
Mainly forked / inspired on Codrops and Isaac Montemayor
License
MIT