I am trying to get these two similar SVG paths to morph into each other. They are essentially triangles where the sides are waves with crests and troughs. The effect I am trying to accomplish is so that the crests turn into troughs and their neighboring troughs turn into crests as if the waves are moving to the top/far point of the triangle.
I've looked into js libraries to do this and found Kute.js. It animates the SVG, but not at all what the shapes looking like. It collapses into the top point and then grows out, but never looks like either of the paths. I tried playing with morphPrecision and morphIndex for more quality, but can not seem to get the desired effect and to happen indefinitely/infinitely.
Here are the two paths and the js I am using to animation.
<svg>
<style type="text/css">
.yellow{fill:#EEFF41;}
</style>
<g id="body">
<path id="original" class="yellow" d="M140.3,39.3c-0.5-2.2-3.3-9.1-9.7-9.4c-12.4-0.7-11-9.6-14.8-12.2c-6.1-4.1-11.4,0.7-17.1-8.2
c-3.1-4.8-11-0.1-16.7-4.9c-1.8-1.5-3.9-2.7-5.8-3.5c-1.5-0.6-3.5-1-5.5-1.1c-2,0.1-4,0.5-5.5,1.1c-1.9,0.8-4,2-5.8,3.5
c-5.7,4.8-13.6,0-16.7,4.9c-5.7,8.9-11,4.1-17.1,8.2c-3.9,2.6-2.4,11.5-14.8,12.2c-6.4,0.4-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10
c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.4,7.7-4.3,11.7-4.3c4,0.1,7.8,3,11.7,4.3
c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,49.4,141.7,45.7,140.3,39.3z"/>
<path id="swimming" class="yellow" d="M140.3,38.9c-0.5-2.2-7.4-3.4-9.7-9.4c-4.1-11.1-10.2-12.6-14.8-12.2c-6.1,0.4-12-0.9-17.1-8.2
C95.4,4.4,88,2.2,82,4.2c-2.4,0.8-5.1,1.3-7.5-1c-1.3-1.3-2.1-1.8-3.8-1.8S68.3,2,66.9,3.2c-2.4,2.3-5.1,1.8-7.5,1
c-6.1-2-13.4,0.2-16.7,4.9c-5.1,7.3-11,8.6-17.1,8.2C21,17,14.9,18.4,10.8,29.5c-2.2,6-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10
c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.3,7.7-4.2,11.6-4.3c4,0.1,7.8,3,11.6,4.3
c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,48.9,141.7,45.3,140.3,38.9z" style="visibility:hidden;"/>
</g>
</svg>
var tween = KUTE.fromTo('#original', {path: '#original' }, { path: '#swimming' }, {morphPrecision:64, morphIndex:32, repeat:161803}).start();
Your main problem, I think, was that your morphPrecision
was way too big.
var tween = KUTE.fromTo('#original',
{path: '#original' },
{path: '#swimming' },
{duration: 2500,
yoyo: true,
repeat:Infinity,
morphPrecision:2}).start();
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script>
<script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js"></script>
<svg viewBox="0 0 200 100">
<g id="body">
<path id="original" class="yellow" d="M140.3,39.3c-0.5-2.2-3.3-9.1-9.7-9.4c-12.4-0.7-11-9.6-14.8-12.2c-6.1-4.1-11.4,0.7-17.1-8.2
c-3.1-4.8-11-0.1-16.7-4.9c-1.8-1.5-3.9-2.7-5.8-3.5c-1.5-0.6-3.5-1-5.5-1.1c-2,0.1-4,0.5-5.5,1.1c-1.9,0.8-4,2-5.8,3.5
c-5.7,4.8-13.6,0-16.7,4.9c-5.7,8.9-11,4.1-17.1,8.2c-3.9,2.6-2.4,11.5-14.8,12.2c-6.4,0.4-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10
c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.4,7.7-4.3,11.7-4.3c4,0.1,7.8,3,11.7,4.3
c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,49.4,141.7,45.7,140.3,39.3z"/>
<path id="swimming" class="yellow" d="M140.3,38.9c-0.5-2.2-7.4-3.4-9.7-9.4c-4.1-11.1-10.2-12.6-14.8-12.2c-6.1,0.4-12-0.9-17.1-8.2
C95.4,4.4,88,2.2,82,4.2c-2.4,0.8-5.1,1.3-7.5-1c-1.3-1.3-2.1-1.8-3.8-1.8S68.3,2,66.9,3.2c-2.4,2.3-5.1,1.8-7.5,1
c-6.1-2-13.4,0.2-16.7,4.9c-5.1,7.3-11,8.6-17.1,8.2C21,17,14.9,18.4,10.8,29.5c-2.2,6-9.2,7.3-9.7,9.4c-1.4,6.4,3,10.1,3.1,10
c5.2-6.5,13.1-2.2,22-6.2c3.4-1.5,8.5-6.7,12.3-7.8c6.8-2,14.2,0.7,20.6-1.5c3.9-1.3,7.7-4.2,11.6-4.3c4,0.1,7.8,3,11.6,4.3
c6.5,2.2,13.9-0.5,20.6,1.5c3.8,1.1,8.9,6.3,12.3,7.8c8.8,4,16.7-0.3,22,6.2C137.3,48.9,141.7,45.3,140.3,38.9z" style="visibility:hidden;"/>
</g>
</svg>