Nocturnal Pumpkin Maelstrom
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

svg-quad

0.1.0 • Public • Published

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

Install

npm i svg-quad

DownloadsWeekly Downloads

2

Version

0.1.0

License

MIT

Last publish

Collaborators

  • avatar