minimorph

Super-light minimal, fast and memory effecient complex morph tool

         

Demo

• Play with Codepen

Alternatives

There a lot alternatives, maybe they better than this app, maybe not, it's your choice. I am just list

• GSAP MorphSVG - Paid app
• ShapeShifter - Free + GUI + SVG Shape optimize/preparer (can be used for it)
• Wilderness - Free + Well API + CDN
• svg-tween - Free + Simple & Minimal + CDN
• Flubber - Free
• SVGMorpheus - Free + For SVG Group only
• SnapSVG - Free - Popular well-known amazing tool, not only for morph, for all of SVG things
• RaphaelJS - Free - Same as SnapSVG, but for backward-compatible apps
• BonsaiJS - Free - Not tested or used (so review is too good, good docs)
• KuteJS - Free - CDN + Well API

Installation

Download the library and include it in your code:

<script src="js/morph.js"></script>

CDN-Hosted version

• See cdnjs-hosted version for get which result you want
• NOTE: @latest suffix sometimes saves life by loading latest, because sometimes CDN services will not load the latest

<script src="https://cdn.jsdelivr.net/npm/minimorph"></script>
<!-- or may you want -->
<script src="https://unpkg.com/minimorph"></script>
<!-- or like this -->
<script src="https://npmcdn.com/minimorph"></script>

More advanced users might want to...

Using grunt

PR are welcome...

Using gulp

PR are welcome...

Using node

var morph = require('minimorph');

Using import

import morph from 'minimorph';

Using getlibs

<script src="https://unpkg.com/getlibs"></script>
<script type="x-module">
import morph from 'minimorph';
</script>

Using npm, yarn or bower

$ yarn add minimorph
# or
$ npm install minimorph

Basic usage

morph.easing.moca = k => 0.5 + Math.pow(k * k / k * k, 4) / k * k - 0.5

let m = morph(
    { type: 'path',
      d: 'M480,50L423.8,182.6L280,194.8L389.2,289.4L356.4,430L480,355.4L480,355.4L603.6,430L570.8,289.4L680,194.8L536.2,182.6Z'
    },
    { type: 'path',
      d: 'M638.9,259.3v-23.8H380.4c-0.7-103.8-37.3-200.6-37.3-200.6s-8.5,0-22.1,0C369.7,223,341.4,465,341.4,465h22.1c0,0,11.4-89.5,15.8-191h210.2l11.9,191h22.1c0,0-5.3-96.6-0.6-205.7H638.9z'
    }, true)

let mw = morph.middleware([0, 0, 0], [0, 204, 255], 'color');

let p = document.querySelector('#path');
    p.setAttribute('d', m(0))


morph.frame({frame:
function anim(t) {
t = morph.easing.moca(t);
p.setAttribute('d', m(t));
p.setAttribute('fill', mw(t));

}, duration:2000, startTime:1000});

Tests

Currently only linting tests has and can be running with

npm test