Animating from curved shape to rectangle

[Policsek]

Hi, I'm working on a page transition animation. When leaving the page, I want to animate an element ( from height 0 to 100vh ) which will cover the whole page. This is easy, but what if I want to animate the element from a curved shape to a full rectangle ( like here, https://adrienlaurent.fr/ , use the nav bar to see the effect). 

 

My poor effect is simple and works just fine, but I'm not sure where should I start to animate it from that shape. I know I might need to use a SVG, but still confused. Maybe "border-top-left-radius & border-top-right-radius" could also help? 

 

Thank you!

See the Pen oNZJveR by bogdan-florin (@bogdan-florin) on CodePen

[akapowl]

 

Hey @Policsek

 

This thread here discusses how to achieve pretty much exactly that effect with SVG.

 

Check it out and see if it helps