Fun with clip-path

This is a simple code exploration, inspired by (and stollen from) https://iventions.com/, saw it on X here.

In this example, I’m trying to implement a menu that is revealed when the user clicks on a button. With HTML+CSS only. No JS.

There are two clip-paths:

The menu is revealed by a circle that grows from the top-left corner of the screen to the bottom-right corner. A fun clip-path calculation that I used here (clip-path: circle(calc(1.42 * 100vmax) at 0 0);) is based on the vmax, which is the larger of the viewport width or height. Then multiplied it by 1.42, because 1.42 is the square root of 2, which is the ratio of the width to the height of the viewport.

The second clip-path is a polygon that is used to simulate the “ray”.
The polygon is hardcoded now, but it can be calculated with js, for dynamic dimension that respect the navigation dimensions for responsiveness.

Thanks for stopping by.