Parametric 2D graphics in the browser. With pure SVG.

Heads up! This package is based on an earlier version of the spec. We’re planning to update it – but for now you’re better off using the <parametric-svg> custom element or the pair of low-level libraries parse and patch.

Installation

$ npm install parametric-svg

Usage

var parametricSvg = require('parametric-svg');

…or:

<script src="https://wzrd.in/standalone/[email protected]"></script>

What then? All I’ve got is this quick example – it must do for now: http://jsbin.com/matisi/7/edit?html,js,output.

API

parametricSVG(svgRoot, [parameters])

Parse and render all elements within the svgRoot. Defaults set with <ref> elements will be used for calculation, unless you override them with parameters.

Parameters

parameter	type	description
svgRoot	SVGSVGElement	An <svg> element.
[parameters]	Object	optional: A hash of additional parameters. They'll extend and override defaults set with <ref> elements.

Returns VirtualTree, A cached virtual DOM tree for lightning-fast redraws.

parametricSVG(element, parameters)

Pass any SVG node (like <circle>) to parse and render the node and all its descendants.

Parameters

parameter	type	description
element	SVGElement
parameters	Object	A hash of parameters.

Returns VirtualTree, A cached virtual DOM tree for lightning-fast redraws.

parametricSVG(virtualTree, [parameters])

Pass a cached VirtualTree to render the tree without reparsing any DOM. This is the fastest option.

Parameters

parameter	type	description
virtualTree	VirtualTree
[parameters]	Object	optional: Supply a hash of additional parameters. They'll extend and replace cached ones.

Returns VirtualTree, A cached virtual DOM tree for lightning-fast redraws.

undefined

License

MIT © Tomek Wiszniewski.