In general this sort of transition is called a wipe. I might call it a "layered horizontal wipe". It's generally done by layering two images and then animating a clip path that's applied to the top image. Or you could fix the top image (so that it doesn't resize its dimensions) and animate its width.
It made me think of a lot of the transitions in Star Wars ...
Let me explore the topic a bit.
If we are attempting to do this with vector shapes, the shape itself must be right. It is easy to have deformed or disproportional shapes.
One way to prepare them is duplicating the overall shape and using the contour lines thicker on the shape it will be the final border of the shadow.
Now we have 2 shapes to ...
There is no good solution. I mean you can force a solutuon but it will never be a good solution since the standard does not give you any tools for this. The filters were supposed to be enough for you.
You can only use things that whatever subset your SVG engine supports. Using a different application will not change this. Besides filters the only other ...
You could use Illustrator CC's Rounded Corner Widget functionality.
Draw a shape without curves, then select only the corner widgets you want to round by Shift+clicking them to make a multiple selection, then click and drag them to make the curves.