Diamond wipe animation for revealing text

I was riffing on some ideas for revealing text in interesting ways.

Using shapes can be cool.

How about a diamond?

I went loud with the colours! 🔆🔊😎

The idea is to animate a clip path to reveal the text. I wanted the text reveal to happen within a bordered shape. To do this you need to have a shape for the clip path, and a separate element with the border that has the same shape. This is easier to do in SVG as you can work directly with a path element.

What do you think?

There are other wipes besides diamond wipes...

But, why eat hamburger when you can have steak!