Jump to content


Converting SVG path morphing animation to canvas

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

Hi, I have two problems with SVG version of this animation:


See the Pen WEzVma by asistapl (@asistapl) on CodePen

1. It's pretty slow when I have couple of similar animations morphing and blending on my site.
2. On Mac in Chrome and Safari (on Windows, Android and iOS works fine in every browser, on Mac works properly only in Firefox) colors are not blending to black which is a major problem for me and results in something like this:


It should be all black not burgundy, sooo it ruins whole idea :( 

I'll file chrome bug later but I think that it maybe a good idea to convert it to canvas for performance and correct color blending.
I've seen in figma which uses canvas that color blending works correctly there.

I'm writing this because I have no idea how to convert it to canvas.
If you have some suggestions how I should go about it, please let me know :) Thanks!

Link to comment
Share on other sites

Thank you @Sahil!

I solved it thanks to this thread:

and it works even in Edge (with Path2d polyfill) so it's even better than svg version, because Edge doesn't support mix-blend-mode.


See the Pen mGWrYa?editors=0010 by asistapl (@asistapl) on CodePen

  • 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.