popkinj / polymorph

Convert one SVG path to another.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Polymorph

Convert one svg path into another. Produce a new shape with the same amount of nodes in the first input yet shaped as the second input. This allows for sane transitions between the two shapes.

var newShape = polymorph.transpose(firstShape,secondShape);

This makes the assumption that firstShape is of the format M43 43 L 54 32 L 43 65Z". The secondShape can be any SVG Path format.

It makes most sense to transpose a more complex shape onto a simpler one. This way you don't lose any detail. But it works either way.

Here is an example of what you can do with the output. Aong with the help of a interpolator/animation engine like d3.

About

Convert one SVG path to another.


Languages

Language:LiveScript 61.8%Language:JavaScript 34.9%Language:HTML 3.4%