svg-cubic v0.1.0

svg-cubic

Draw a simple svg shape with a cubic path

Install

npm i svg-cubic

API

constructor(options)

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