node package manager


balance svg paths


Make two paths equivalent in terms of structure while respecting their original shapes. So they can be easily tweened and animated. Currently its a pretty half-ass implementation. See test/cases.js for an analysis.


With your favorite package manager:

  • packin: packin add balance-svg-paths
  • component: component install jkroso/balance-svg-paths
  • npm: npm install balance-svg-paths

then in your app:

var balance = require('balance-svg-paths')


balance(a, b)

Define a and b using the same number of path segments while preserving their shapes. Where both a and b are normalized paths. It returns an Array containing the balanced paths in the same order they were input.

var a = [['c',0,0,50,0,50,0], ['c',0,0,0,50,0,50]]
var b = [['c',5,5,45,5,50,0]]
balance(a, b) // => [a, b.concat([['c',0,0,0,0,0,0]])]