Package Exports

svg-morph

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svg-morph) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svg-morph

morph animation between two svg path arrays

example

run this demo

main.js:

var morph = require('svg-morph');
var pencil = require('svg-pencil');

var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');

var pa = pencil();
pa.appendTo(a);

var pb = pencil();
pb.appendTo(b);

var pts = {};
pa.on('points', function (ps) {
    pts.a = ps;
    pa.unregister();
    b.classList.remove('hide');
});

pb.on('points', function (ps) {
    pts.b = ps;
    pb.unregister();
    c.classList.remove('hide');
    
    var m = morph(pts.a, pts.b);
    m.appendTo(c);
});

index.html:

<html>
  <head>
    <style>
      .viewport {
        display: inline-block;
        border: 2px solid purple;
        width: 300px;
        height: 300px;
        cursor: crosshair;
        user-select: none;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="a" class="viewport"></div>
    <div id="b" class="viewport hide"></div>
    <div id="c" class="viewport hide"></div>
    <script src="bundle.js"></script>
  </body>
</html>

compile with browserify:

browserify main.js > bundle.js

then load index.html in a browser.

methods

var morph = require('svg-morph')

var m = morph(a, b, opts={})

Create a new morph animation svg that morphs between the point arrays a and b. Each element in a and b is of the form [x,y].

The opts are:

opts.svg - append to this svg, otherwise one will be created
opts.fill - fill color to use, default: 'none'
opts.stroke - stroke color to use, default: 'black'
opts.strokeWidth - stroke width to use, default: '1px'
opts.duration - animation duration, default: '1s'
opts.repeatCount - number of animation repetitions, default: 'indefinite'

The svg will have a single <path> element with an <animate> tag containing the morph data.

m.appendTo(target)

Append the m.element svg to the dom element or query string target.

install

With npm do:

npm install svg-morph

license

MIT