Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
.doxie.render.js
.eslintrc
Changelog.yaml
License.md
Readme.md
index.js
package.json
register.js
test.js

Readme.md

>parametric-svg<

Stability: experimental Code style: airbnb

Parametric 2D graphics. As a custom HTML element.

 

<svg>
  <rect parametric:width="2 * (a + 3)"/>
</svg>

<parametric-svg a="5"><svg>
  <rect parametric:width="2 * (a + 3)"
                   width="16" />
</svg></parametric-svg>

<parametric-svg a="50"><svg>
  <rect parametric:width="2 * (a + 3)"
                   width="106" />
</svg></parametric-svg>

❤ CHECK IT OUT LIVE!

 

Getting started

If you’re building your app with webpack or something:

$ npm install @parametric-svg/element
require('@parametric-svg/element');

Otherwise you can drop our <script> from the fantastic wzrd.in CDN anywhere in your HTML document:

<script src="https://wzrd.in/standalone/@parametric-svg%2Felement@latest"></script>

If you’re going the <script> way, remember to swap latest with a concrete version number in production. You can also download the script from https://wzrd.in/standalone/@parametric-svg%2Felement@latest and serve it yourself.

If it still doesn’t work, have a look at our note about browser support.

 

Usage

Wrap an <svg> with a <parametric-svg> element – all parametric attributes within the <svg> will be immediately resolved and updated.

See the example to get a general idea what a parametric SVG is. You can read up on the syntax in the spec.

You can define variables by setting attributes on the <parametric-svg> element. Any time you update an attribute, your drawing will be updated. Lightening-fast!

 

Browser support

Any browser which supports ES5 and custom elements will do. You can make custom elements work in any browser using the great document-register-element polyfill.

 

API

FUNCTION SIGNATURES USE JSIG (?)
Register the <parametric-svg> element with custom settings
register(options: {
  logger?       : {warn: Function},
  document?     : Document,
  HTMLElement?  : Function,
}) => void

In most cases you’ll just import the main module and be fine with the default settings (see getting started). But if you want fine control, you can require('@parametric-svg/element/register'). The function you get back takes a single argument options with the following properties:

  • logger – A custom logger. Default: window.console.

  • document – A custom implementation of document – for headless tests or something. Default: window.document

  • HTMLElement – A custom HTMLElement constructor. If you’re passing a document, you’ll probably want to pass this as well. Default: window.HTMLElement.

 

License

MIT © Tomek Wiszniewski