CSS-only menu reveal: a neat clip-path trick using vmax × √2
A small front-end demo shows how to reveal a nav menu with pure CSS using two clip-path shapes — including a clever radius formula based on vmax and √2.
**Source:** GitHub (Momciloo/fun-with-clip-path)
A small web UI exploration demonstrates a navigation menu reveal animation using **HTML + CSS only** (no JavaScript), powered by two `clip-path` shapes.
## The technique
- A circular clip-path grows from the top-left corner to cover the viewport.
- The radius uses a clever calculation: `circle(calc(1.42 * 100vmax) at 0 0)`.
- `vmax` is the larger of viewport width or height.
- `1.42` ≈ **√2**, matching the diagonal ratio of a square.
- A second polygon clip-path simulates a “ray” effect.
## Why it matters (Front-end)
This is a neat example of modern CSS enabling interactive-feeling UI patterns without extra JS — useful for performance, progressive enhancement, and design experiments.
**Link:** https://github.com/Momciloo/fun-with-clip-path
Source: GitHub