Two clip-paths, over the navigation:
- 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
one thing i dislike about "good design" in general is that it usually takes away from information density and practical convenience in order to achieve "good design". this feels like a bad tradeoff. i wish that designers cared about making things more accessible and delightful rather than impressing fellow designers.
Agree. Info-dense designs are also more difficult to implement and many designers lack experience in this area. E.g., creating a coherent design system that uses borders instead of excessive padding to separate elements is much more difficult than it may seem.
Agree. I opened this iventions website, hated every second being there, closed it.
It looks cool, but to have to navigate from one side of the screen to the opposite one is quite suboptimal
I saw this on Twitter about an hour ago and was going build one as well. Nice work!