Converting SVG path morphing animation to canvas

[asistapl]

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!

[Sahil]

Here is @OSUblake's demo showing how you can use morphSVG on canvas.

 

See the Pen RWeOWX by osublake (@osublake) on CodePen.

 

[asistapl]

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.