DEV Community

Cover image for Diamond wipe animation for revealing text
Rob OLeary
Rob OLeary

Posted on • Updated on • Originally published at


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!

Top comments (1)

robole profile image
Rob OLeary

jhomer saying "and beautiful star wipe and we're out

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.