0.1.0 • Published 10 years ago
svg-peak v0.1.0
svg-peak
Draw a simple svg shape with a peak path
Install
npm i svg-peakAPI
constructor(options)
| Option | Action |
|---|---|
| w | svg width |
| h | svg height |
| d | direction of the drawing — top, right, bottom, left |
| p1 | first point |
| p2 | second point |
const Peak = require('svg-peak')
var peak = new Peak({p1:10, p2:50, w:100, h:200})
// also allowed
var peak = Peak({p1:10, p2:50, w:100, h:200})
// all options are also accessible via getter/setter
peak.d = 'top'
peak.p1 = 100svg()
Return svg node
var peak = Peak({p1:10, p2:50, w:100, h:200})
/*
<svg viewBox="0 0 100 200" preserveAspectRatio="none">
<path d="M0 0 V10 L50 50 L100 10 V0 z"></path>
</svg>
*/
var svg = peak.svg()path()
Return path value
var peak = Peak({p1:10, p2:50, w:100, h:200})
peak.p1 = 20
// M0 0 V20 L50 50 L100 20 V0 z
var path = peak.path()Demo
npm i && npm startRelated
- svg-cubic
- svg-line
- svg-quad
Thanks
Mainly forked / inspired on Codrops and Isaac Montemayor
License
MIT
0.1.0
10 years ago