Jump to content


Is it Possible to Morph a Path with a Fill Color to a Path with an SVG <image> Background?

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



With the morphSVG plugin, is it possible when morphing between two path shapes to have it so that the final path shape can display a background image (say, with the SVG <image> that has been clipped so it fits the shape).


What would happen is you'd have one path shape with a background that is just a fill colour, and this will then morph into the new path shape showing a background image.


I'm thinking this probably isn't possible?


I've set up a pen here of two shapes morphing in case it is possible and someone can illustrate how. 

See the Pen jpwQgW by pauljohnknight (@pauljohnknight) on CodePen


Link to comment
Share on other sites

It's a little tricky, but could be done. You can't animate from a solid color to an image, but with some opacity tweens you can fake it. 


To start with a solid color and morph to a background image, you could use a clip-path (or mask) on the image and morph it too. Maybe something like this:


See the Pen QBgPLj by PointC (@PointC) on CodePen


Another option would be to use a couple images in a pattern.


See the Pen WKOmbL by PointC (@PointC) on CodePen


Hopefully that gives you some ideas. Happy tweening and morphing.



  • Like 4
Link to comment
Share on other sites

Hi Craig,


Thanks for this, that's great.  I need to up my SVG knowledge.  Also before I start playing around with this, I've just realised because the shape I'm morphing has preserveAspectRation="none" on it to make it responsive, I'm think you probably can't have an <image> in an SVG with this attribute because it will distort the image when you reduce the window size?

I've done a quick screen cast and the image was going to go inside the main dark blue polygon that morphs in this video, but I'm thinking I may have to re-think by approach to this.


Link to comment
Share on other sites

Yup - if your SVG is set to preserveAspectRatio="none", your images in the SVG will get funky when squished.

  • Like 5
Link to comment
Share on other sites

Thanks Craig. I really like what you did with the image morph, so I'm going to see if I can't get to grips with that and look at tweaking the design accordingly. 

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