Jump to content
Search Community

SVG Mask Reveal Background Image but from and within alphabet too

atulraj89 test
Moderator Tag

Recommended Posts

I have this SVG which is a text written Higher, I have seen Mask Reveal Question and its not hard to reveal the part of the SVG to show Background, but how to make it look like the part of alphabet as well. So after animation this AIM

image.png.234d6e7beb5f493062e1ec04505f8193.png

Should Look Like this

image.png.4132e3042c51791ff5a208046e9c4cfa.png

Just an Idea needed. or if someone already has something like this, I would be grateful for a working example. 

 

 

Link to comment
Share on other sites

Hey atulraj89. Most likely the easiest way to create this effect would be to convert the letters to paths, apply the clip effect, and then use MorphSVGPlugin to morph the M into the shape that you show in the second image. Alternatively you could look into animating the position of the M and animating the width of a <rect> within a clip path. 

  • Like 2
Link to comment
Share on other sites

I'm not sure I completely follow the desired result, but you could put the letters in a clipPath or mask (along with a rectangle) and then move them outside the bounds of the <rect>. Though I may be misunderstanding the end result here. Here's a pen with text in the mask. Maybe it'll help.

 

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

 

Happy tweening.

:)

 

 

  • Like 4
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
×
×
  • Create New...