Morphing SVGs with Canvas

[OSUblake 9,990 Likes (Superhero)]

Carl brought up this canvas morphing demo I made...

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

 
But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. 
 

// Path strings
var path1 = "M300,25l86.6,150H213.4Z"
var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28-8Z";

// Data for the start and end paths
var pathData = [path1, path2];

// Run it through the MorphSVGPlugin
MorphSVGPlugin.pathFilter(pathData);

 
Using the pathFilter method might seem awkward at first because it doesn't return anything. It mutates the array you pass into it with the transformed path strings...

See the Pen 1754cdf8805e7061094036125958200d?editors=0011 by osublake (@osublake) on CodePen

 
There are also some other things you can pass in the pathFilter method, like a shapeIndex and map type...

MorphSVGPlugin.pathFilter(pathData, 6, "complexity");

The next step is to decide on how you want to tween the pathData. In the past I would convert the pathData strings into a bunch of arrays of numbers, and tween the arrays using the EndArrayPlugin, kind of like in this demo I made before the MorphSVGPlugin came out...

See the Pen RPKdQz?editors=0010 by osublake (@osublake) on CodePen

 
But that can get messy, and there's a much better solution with modern browsers, the Path2D object. It will allow you to use SVG paths directly inside of canvas.

var path = new Path2D("M10 10 h 80 v 80 h -80 Z");
context.fill(path);

 
And since GSAP can tween complex strings, we now have a pretty straightforward way to do morphing inside canvas!

See the Pen EZNMEZ by osublake (@osublake) on CodePen

 
However, there is one issue. There won't be any IE support for this, and the SVG constructor feature is currently broken in Edge. Hopefully that will get resolved soon.
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8438884/
 
 
So there you go. High-performance morphing using GSAP and canvas. Morphing 50 different shapes while using a blend mode.  


.

See the Pen pRNYRM by osublake (@osublake) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Nice write up Blake, Thanks for sharing this goodness

[Carl 9,066 Likes (Superhero)]

That last demo is super sweet. Ran admirably on my phone.

[OSUblake 9,990 Likes (Superhero)]

Pixi particle emitter!!!

See the Pen oWzVvb by osublake (@osublake) on CodePen

 

Kinda hacked the plugin to draw on a canvas element. Probably not a good idea for production as that could easily break with future updates to the plugin.

.