Jump to content
Search Community

Path comparison with MorphSVGPlugin?

radiohead test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

First, I want to say thanks for all the hard work put into the greensock tools. It's fantastic.


It might be a stretch, but I was wondering if the MorphSVGPlugin might have some method for calculating the difference between 2 svg paths.

Essentially, I want to calculate how closely 2 shapes match. Say for example I have a 200x200 square, 300x200 rectangle, and 300x300 star.

Comparing the square and rectangle would return a higher accuracy value than comparing the square and star, since the square and rectangle paths match more closely, so to speak. Currently, im just comparing the area of the shapes, but it can only get me so far and I feel a path comparison would be more accurate. 

Perhaps there are methods in the precompiler that I can utilize? Any way to measure the total offset of the path after it morphs?


Any pointers are much appreciated!


Link to comment
Share on other sites

Hm, I can't think of an easy way, no. Technically there's a pathFilter() method that'd spit back the two shapes with matching numbers of anchors in a cubic bezier-based string which I suppose you could loop through and try to compare stuff, but I don't see a simple way to deliver what you're asking for. Maybe figuring out the total distance that each corresponding point must travel between the two shapes, but even that isn't a perfect way to do this (in my opinion). You'd have to figure out the center point for each shape and offset all the measurements accordingly (otherwise, if one shape is in the upper left corner and the other is in the lower right, the distances are artificially far because I assume you just want to know the overall shape differences, not the absolute distance that each anchor travels). 


I wish I had an easy answer for ya. Maybe someone else has an idea. 

  • Thanks 1
Link to comment
Share on other sites

I'm repositioning/scaling the shapes so that shouldn't be a problem, however, finding the correct shapeindex could be a headache since I'm actually comparing randomly drawn paths. Still,  looping through and comparing anchor points sounds like its on the right track. I appreciate the insight.

Here's my current codepen.

See the Pen aVLBMR by Radiohead (@Radiohead) on CodePen

Right now its just copying the svg to a canvas and doing an imagedata comparison. Again, not ideal, but maybe itll come in handy for someone else.


  • Like 2
Link to comment
Share on other sites

Hi @radiohead


To calculate the difference between two shapes, Clipper might work better than comparing pixel data. Well, it should at least be faster, and work in IE.




If you want to take that to the next level, gesture recognition might be another possibility. $1 recognition is probably the most basic/common.



Then you have machine learning, like with Google's Quick Draw game. I think that is using Paper.js, which can also do boolean operations like Clipper.





  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...