Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version
31 points
4 hours ago
| 3 comments
| github.com
| HN
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

▲
flaburgan
35 minutes ago
[-]
It looks cool, but to have to navigate from one side of the screen to the opposite one is quite suboptimal
reply
▲
swyx
1 hour ago
[-]
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.
reply
▲
division_by_0
26 minutes ago
[-]
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.
reply
▲
orphea
46 minutes ago
[-]
Agree. I opened this iventions website, hated every second being there, closed it.
reply
▲
thekevan
1 hour ago
[-]
I saw this on Twitter about an hour ago and was going build one as well. Nice work!
reply