- The first clip-path is a circle (top-left corner) - The second clip-path is a polygon, that acts like a ray (hardcoded, can be improved)
The original work by Iventions Events https://iventions.com/ uses JavaScript, but I found CSS-only approach more fun
Here's a demo and the codebase: https://github.com/Momciloo/fun-with-clip-path
But since the original implementation is also broken, I guess that's OK?
We really have a low bar for quality these days. I hope this won't be used anywhere that's relevant.
Design is about solving problems.
A menu is suppose to help you to quickly find and get to a specific section of your site.
Why do I have to click on a thing to reveal the menu even though on my laptop there is enough space to show it all? And then I have to move my mouse all to the other side of the screen?
Who is this for?
Nothing wrong with experimenting with CSS, but avoid ‘dribbblizing’ your designs if you intend to ship it to users who use your site for information or to get a job done.
Edit: commenting more on the iventions.com website where this effect is in use.
This effect imitates a spotlight, which is cited on the page and quite relevant for a company in the arts domain
Tried it today on my PC (big screen) - the intro animation is slow - 6-10 FPS and clicking on the menu item to reveal the items is slow as well. I could hear my fan spinning up.
Not everyone uses the latest greatest Mx chipset.
This tells me they haven't done any testing. Basically 'this looks cool' and 'works on my machine'.
And there's more than "minimal number of interactions" functionality. People generally like good looking stuff. While it may be superfluous, it may feel more pleasing than yet another dark gray text on a light grey square. It may even help remembering navigation, since it's easier to remember deviating design.