Shape Slideshow with Clip-path

Rounded shapes are back in fashion! Specifically, pill shaped forms are really hot right now, as can be seen on Icelandic Explorer for example:

On Gucci Beauty you can see many rounded shapes, especially rounded cards:

Window-like shapes are also super trendy, as can be seen in this beautiful poster design by Ana Sakac:

Another example is this great design by mashiqo:

I recently also stumbled across this beautiful Dribbble shot by Tyshchuk Maryna:

I thought that this might be somehow possible to do with a clip-path animation, so I started experimenting. It turns out that by using any kind of <basic-shape> you can create a unique look for a slideshow transition, or any other kind of transition, like a hover for example:

As a result, I have created four demos showing some ideas that might spark your inspiration. I really hope you like them!

Here is that pill-shaped look I was after:

Note that for non-supporting browsers, we’ll simply see the slide move without a clip-path applied to it.

Thank you for checking by and hope you enjoy this!