Working with path data - Best way to Morph SVGs?

[joepagan]

Hi,

I left a comment about this on a closed ticket already, though I doubt it will get noticed as this is quite a popular repo. Sorry if you have already seen it though I did post 9 days ago: https://github.com/juliangarnier/anime/issues/256

I want to know the best way to deal with path data, on an SVG that uses paths, specifically the d attribute.

I have tried exporting FROM and TO shapes in both illustrator & sketch and, it appears that the path data is not formatted in a way in which animejs can handle. When I trigger a morph, I get a bunch of errors, and, my animation is very glitchy:

Maybe I am just doing something wrong? I have provided some examples below to show what I mean:

Example from illustrator codepen: (Sorry I forgot to fork this while working on another example in a comment below, imagine it as broken as the other two)

M27.5,0h151A27.5,27.5,0,0,1,206,27.5h0A27.5,27.5,0,0,1,178.5,55H27.5A27.5,27.5,0,0,1,0,27.5H0A27.5,27.5,0,0,1,27.5,0Z

Example path data from sketch codepen:

M27.5,3.79416024e-15 C52.6666667,7.26639173e-15 77.8333333,1.07386232e-14 103,1.42108547e-14 C128.166667,1.07386232e-14 153.333333,7.26639173e-15 178.5,3.79416024e-15 L178.5,0 C193.687831,-2.78995922e-15 206,12.3121694 206,27.5 L206,27.5 C206,42.6878306 193.687831,55 178.5,55 C153.333333,55 128.166667,55 103,55 C77.8333333,55 52.6666667,55 27.5,55 L27.5,55 C12.3121694,55 1.85997282e-15,42.6878306 0,27.5 L-7.10542736e-15,27.5 C-8.96540017e-15,12.3121694 12.3121694,2.78995922e-15 27.5,0 Z

As the previous thread suggests, I can format my path data with this tool: https://shapeshifter.design/

Example path data from shapeshifter codepen:

M 27.5 0 L 178.5 0 C 193.688 0 206 12.312 206 27.5 C 206 42.688 193.688 55 178.5 55 L 27.5 55 C 12.312 55 0 42.688 0 27.5 C 0 12.312 12.312 0 27.5 0 Z

As you can see by the codepen, this doesn't actually work in this case either. Previously, shapeshifter has worked on another shape, though regardless, using shapeshifter, is unpractical if you want to work with SVGs a lot.

It seems like I'm missing a key step here, how are other users formatting this? Are there any tools, or, settings in sketch/illustrator I am missing that would provide me with the formatted path data which animejs requires?

[juliangarnier]

Both SVG shapes must have the same number of points, otherwise the transition between the two d coordinates will be broken.

[joepagan]

Thanks for getting back to me.

I tried this again as per your suggestion, I altered the SVG in Sketch, I noticed Sketch had sneakily added extra points along the path, which I did not ask it to, also these mystery points were not visible in Sketch, but they were in Illustrator!

I have now tried made a hover state with an SVG in illustrator, using the same amount of points here, but, it still glitches! https://codepen.io/joepagan/pen/LQOajm

I have added the SVG contents in the html area of this pen.

Also for convenience, I have added the svg files on drive if you wish to download & inspect them in an editor: https://drive.google.com/open?id=1YxrZPG61vc1hbezs0YZ9CLpReTb_B4xk https://drive.google.com/open?id=1DB3epIPkZPLc2Ci4aDdyZMr-fZ7g3awr

[joepagan]

Ok, I've managed to do it... https://codepen.io/joepagan/pen/YeEMym

So here I have made my alterations in Illustrator, then just use sketch to export it.

Maybe I'm not using sketch right, using the "Mirrored" feature for smoother curves seems to add extra points:

Here is an example where I have made the curves in sketch: https://codepen.io/joepagan/pen/qxVGbb

Each of the SVGs (shown in the html tab on codepen) have 8 points, though it still glitches, any suggestions?

[leiserfg]

In gasp MorphSVG they transform the d attr and add points to it for set the number of points match bettween states.

[leiserfg]

Look at https://github.com/notoriousb1t/polymorph or https://github.com/veltman/flubber

[joepagan]

@leiserfg thank you for the suggestions, I may have to just continue with GSAP then.

I'm still not 100% sure whether this is an issue with how Sketch is exporting svgs, or, animejs parsing the path data weirdly. If further information is required to debug this let me know.

[juliangarnier]

Both shapes must have the same number of coordinates, that also includes the bezier curves points.

Your initial shape should look like this:

I recommend drawing the initial shape from the final one.

[joepagan]

@juliangarnier thanks for getting back, I am quite certain I clicked the mirror option in Sketch (Which appears to add a bezier curve point), though I shall give this another go & report back.

[joepagan]

Sorry for the late response here, it seems like sketch was potentially adding extra points to a shape if you add a bezier.

I am sure there will definitely be circumstances in the future where the TO and FROM shapes have different points, especially with complex shapes, let alone with this very simple shape.

It is likely that a developer wont even be the one creating the SVGs (TO and FROM), it would be a designer (who isn't necessarily understanding of SVG requirements), the amount of points is then completely out of our control.

I know this is probably a ball-ache to account for from your side, though due to the SVGs I get given, I'll just have to use MorphSVG until this is reworked.