12

I have been searching for a good example on how to animate a svg path morph. I know how to do do pretty complex ones using SMIL, but snap.svg is new and shiny, and everyone seems to love it, so I'd like to take a look. I can't find a good example anywhere on how to do n animated path morph anywhere. Hopefully a snap.svg guru could point me in the right direction?

here's a link to the svg image and the code for it:

link to image

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
  <path id="thing"  d="M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z">
    <animate id="myAnimationElement" dur="2s" begin="0" repeatCount="indefinite" attributeName="d"
         values="M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z;

                M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z;"/>
  </path>
</svg>
Limon Monte
  • 52,539
  • 45
  • 182
  • 213
Les Ballard
  • 283
  • 1
  • 4
  • 17

2 Answers2

19

Not quite sure if you mean you just want the current animation in Snap or something different. Just to give an example of how one would typically do some animation...

s = Snap(400, 620);

var path = s.path("M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z");

path.animate({ d: "M179.4,83.5l62.4-11.8c15.3,43.4-76,102.6-22.6,111.5c61.5-27.6,126.1-56.9,202.6-46.1c18.7,18.9,21.5,39.8,12.2,62.3C250.6,296.7,52.4,259.2,179.4,83.5z" }, 1000, mina.bounce);

jsfiddle

Edit: There needs to be the same amount of points on the path to morph from/to.

Ian
  • 13,724
  • 4
  • 52
  • 75
  • great! thanks, exactly what I was looking for, If I want to animate to more paths I would do somethinglike this: '' – Les Ballard Apr 10 '14 at 20:20
  • As a sidenote, I'm pretty sure you need to have a similar structure to the paths or it won't work. For instance, you can't morph `M94.2,265.7L82,203.4c43.3-15.6,83.8-29.2,137.1-20.2c61.5-27.6,126.1-56.9,202.6 46.1c18.7,18.9,21.5,39.8,12.2,62.3C322.7,231.9,208.2,247.6,94.2,265.7z` ...to `M0 0 H 100 0 V 100 100 Z`. Someone correct me if I'm wrong. – corysimmons Feb 27 '15 at 16:32
  • You are correct, it can only manage if there is the same amount of points to morph from/to. – Ian Feb 27 '15 at 16:39
  • I wish there was a tool to prepare the string paths or curves, I mean there is GSAP morphSVG plugin and SVG Morpheus to do such, but the first it's a club member item and the second is quite hard to understand it's coding. – thednp Feb 12 '16 at 16:28
  • Why not use SVG Morpheus as it is from instructions, do you need to know its coding ? – Ian Feb 12 '16 at 16:45
  • I want to code a svg morph for my KUTE.js https://github.com/thednp/kute.js so far it only works if the paths have same number and type of points. – thednp Feb 12 '16 at 16:48
  • You would be too awesome to make a tutorial on your page about that :) – thednp Feb 12 '16 at 16:54
  • I cannot use SVG Morpheus because it only handles `g` groups of paths and not single paths. – thednp Feb 12 '16 at 17:23
  • The problem with SVG Morpheus and also SnapSVG is that they both work with prepared, ready made, paths they don't really have anything to do that on the fly. – thednp Feb 12 '16 at 18:04
7

If you're looking for something only for SVG Morph, you may not need the entire SnapSVG library, you can use KUTE.js. Really, take a look at this (Best viewed in Chrome and Firefox):

<div style="width: 220px">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
    <path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
                        c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path>
    <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
                        l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path>

  </svg>
</div>

<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script>
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script>

<script>
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1, morphIndex: 127}).start();

document.addEventListener('click', function(){
    !tween.playing && tween.start();
}, false);
</script>

It's free and really easy to use.

thednp
  • 4,401
  • 4
  • 33
  • 45
  • 1
    The answer precisely mentioned to explain how to animate path using Snap.svg and not any different library. You can add a comment about the lib Kute.js if you wish but not as an answer. – El pupi Jul 15 '22 at 21:26