Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
OSUblake

Morphing SVGs with 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

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

  • Like 10
Link to comment
Share on other sites

Nice write up Blake, Thanks for sharing this goodness :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...

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.

.

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

×