Show HN: I saw this cool navigation reveal, so I made a simple HTML+CSS version

Source: Hacker News

This is a simple code exploration, inspired by (and stolen from) , and originally seen on X here.

In this example I implement a menu that is revealed when the user clicks a button, using only HTML + CSS (no JavaScript).

Clip‑paths

1. Reveal circle – The menu is uncovered by a circle that expands from the top‑left corner to the bottom‑right corner. The clip‑path is calculated with:

   clip-path: circle(calc(1.42 * 100vmax) at 0 0);

   • 100vmax uses the larger of the viewport width or height.
   • Multiplying by 1.42 (≈ √2) ensures the circle’s diameter covers the diagonal of the viewport.

2. Ray polygon – A polygon clip‑path simulates a “ray” effect. The polygon is currently hard‑coded, but it could be generated with JavaScript to adapt dynamically to different navigation dimensions and maintain responsiveness.

Thanks for stopping by.