Jump to content
GreenSock

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

Fill Missing Part of SVG

Recommended Posts

I have an image:


huRcE.png


and I want to fill the missing part of it. The best way I found was to convert the missing part of the image to SVG and then start filling the missing part using tweenmax. For reference, I have added the animation for filling the svg but it is not animating like what I need i.e. it is increasing from center point. I need to blend the animation like the image missing area is filling from one end. I can change the way of animating if there is any other way we can fill the missing part of the image?


I have also tried other solution of fill mode but smooth transition is not happening in it.


 


See the Pen vmJEeG by piyushwalia (@piyushwalia) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. I think for this you will do better using DrawSVG to animate the length of a thick stroke or perhaps multiple strokes.

 

 

You might want to animate a very thick stroke and then use the actual G shape as a mask or clipPath to make sure the stroked doesn't bleed outside the G.

Notice how the animated stroke fills the 5 nicely in the second demo:

without clipPath: http://codepen.io/GreenSock/pen/wdqGVb

With clipPath: http://codepen.io/GreenSock/pen/VbzaGy

 

In the full banner it plays faster and looks great: http://codepen.io/GreenSock/pen/zGjNGz?editors=0010

 

 

 

 

DrawSVG Plugin is available to Club GreenSock members.

  • Like 4
Link to post
Share on other sites

Yep it looks great when animated fast.. awesome catch Mighty Carl :)

Link to post
Share on other sites

Thanks Carl, but for that I have to purchase greensock club membership plan. Any other way if possible

Link to post
Share on other sites

You could use Carl's technique without DrawSVG by calculating the path length yourself and animating the strokeDashOffset. You'd need to use the getTotalLength() method.

 

Here's a similar question that shows how it could be done.

https://greensock.com/forums/topic/16003-draw-svg-polygon/?p=70364

 

My two cents worth: I'd recommend joining Club GreenSock and using DrawSVG (& many other plugins) to save quite a bit of time and frustration with browser inconsistencies.  

 

Happy tweening.

:)

  • Like 1
Link to post
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.

×