SVG Mask Reveal Background Image but from and within alphabet too

[atulraj89]

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

Should Look Like this

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

 

 

[ZachSaucier]

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. 

[PointC]

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.