I saw this cool navigation reveal, so I made a simple HTML+CSS version
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
I saw this cool navigation reveal, so I made a simple HTML+CSS version launched on February 7, 2026 with 141 votes, #215 of 16,627 launches that month and more than 95% of that year's launches.
In plain words
This is a CSS-only implementation of a navigation reveal effect using two clip-paths: a circular mask in the top-left corner and a polygon ray. Built as an alternative to a JavaScript-based original, it demonstrates a pure CSS approach to creating interactive visual effects. The code is available on GitHub for developers interested in exploring clip-path techniques.
written from the facts on this page · September 2026
From the sources
Contribute to Momciloo/fun-with-clip-path development by creating an account on GitHub.
This is a simple code exploration, inspired by (and stollen from) https://iventions.com/ , saw it on X here . In this example, I'm trying to implement a menu that is revealed when the user clicks on a button. With HTML+CSS only. No JS. The menu is revealed by a circle that grows from the top-left corner of the screen to the bottom-right corner. A fun clip-path calculation that I used here (clip-path: circle(calc(1.42 * 100vmax) at 0 0);) is based on the vmax, which is the larger of the viewport width or height. Then multiplied it by 1.42, because 1.42 is the square root of 2, which is the ratio of the width to the height of the viewport. The second clip-path is a polygon that is used to…from github.com
Does a similar job
all alternatives →
CSS Pokemon – created with clip-path and CSS variables2016 · projects.lukehaas.me · ▲79A demonstrates of the use of the CSS clip-path property in combination with CSS variables and CSS transitions to create a low-poly animated Pokémon.
CSSeffectsSnippets.2019 · emilkowalski.github.io · ▲292A collection of CSS effects with a click to copy.
M. C. Escher spiral in WebGL inspired by 3Blue1BrownApr 2026 · static.laszlokorte.de · ▲176The latest 3Blue1Brown video [1] about the M. C. Escher print gallery effect inspired me to re-implement the effect as WebGL fragment shader on my own. [1]: https://www.youtube.com/watch?v=ldxFjLJ3rVY
CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…
More dev tools this month
the category →
Contribute to oosexgang/hackios-xnu-kernel development by creating an account on GitHub.
Dev tools · 21h ago · github.com
open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.
Dev tools · 29d ago · github.com
Contribute to reladraw/reladraw development by creating an account on GitHub.
Dev tools · 27d ago · github.com
OpenBot▲362Grok Bot alternative: free, local, open-source, multiplayer
Dev tools · 24d ago · openbot.run
Talanoa▲346Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…
Dev tools · 22d ago · talanoa.email
Source: Show HN post ↗
Launched alongside, February 2026
the whole month →
Lovon AI Therapy▲801Feel closer and have more fun with your partner every day!
AI · Feb 2026 · lovon.app
Hello my name is Ben Ward for the past 3 years I have been remastering the financial game Wall Street Raider created by Michael Jenkins originally on DOS in 1986. It has been a rough journey but I finally see the light at the end of the tunnel. I just recently redid the website and thought maybe the full story of how this project came to be would interest you all. Thank you for reading.
Work · Feb 2026 · wallstreetraider.com