points.js

Fast & Lightweight SVG Shape Manipulation library based on Points (@colinmeinke/points)

Note

• Please use these methods before tweening initializing, because it changes the points for better natural look
• This is extended version of Points

CDN

# unpkg
https://unpkg.com/points.js

# npmcdn
https://npmcdn.com/points.js

# jsDelivr
https://cdn.jsdelivr.net/npm/points.js

Installing

$ npm install points.js
# or
$ yarn install points.js

Docs

More information about other methods, see Points

Those functions does almost everything what you need, but sometimes hand-made changes required

autoNormalise

What it does?

It normalises your path data segments (curves, points, length, types) based on your from and to shapes.

Code

let [newFromShape, newToShape] = autoNormalise(fromShape, toShape); // Returns normalised path that equalised subpaths or path

autoReverse

What it does?

It determines the when firstShape should be reversed and reverses when necessary

Code

fromShape = autoReverse(fromShape, toShape);

autoIndex

What it does?

It finds closer and best index from fromShape closer to toShape and moves/changes/shifts fromShape points

Code

fromShape = autoIndex(fromShape, toShape);

autoCurve

What it does?

It compares two fromShape and toShape, when some point was mismatching, tries to normalise for correct work (line->curve)

Code

let [newFromShape, newToShape] = autoCurve(fromShape, toShape);

autoOptimize

What it does?

It converts Points object list to Array arrays list for future changing or controlling (for best performance) or for readable format when necessary

Code

let [newFromShape, newToShape] = autoOptimize(fromShape, toShape); // [['M', 10, 20], ['L', 50, 60]] - easier to tween, read and cleaner

splitAt

What it does?

Split the single-path to multi-path (sub-paths). (BETA, improvements would be nice)

Code

let subPaths = splitAt(fromShape, 0.3); // Split into 3-subpaths based on (1 / t:0.3)

autoFix

What it does?

Points.js#autoNormalise + when tweening/interpolation becomes ugly, it provides simple and fast solution for you

Code

let [newFromShape, newToShape] = autoFix(fromShape, toShape); // Returns normalised path that equalised subpaths with index matching