---
title: "Meniscus"
description: "Bottom navigation bar whose top edge behaves like a liquid surface: one parametric SVG trough that leans and shallows with travel speed. Zero dependencies."
canonical: "https://vibing.inc/library/meniscus-vg-2134"
category: "Backgrounds, Effects & CSS Oddities"
subcategory: "Animated components"
license: "MIT"
author: "@hasib41"
source: "https://hasib41.github.io/meniscus-liquid-nav/"
---

# Meniscus
Bottom navigation bar whose top edge behaves like a liquid surface: one parametric SVG trough that leans and shallows with travel speed. Zero dependencies.
## Facts
- Source: https://hasib41.github.io/meniscus-liquid-nav/
- Category: Backgrounds, Effects & CSS Oddities / Animated components
- Author: @hasib41
- Licence: MIT
- Tags: svg-animation, navigation, vanilla-js, zero-dependency
## Why it's a gem
One physical idea, executed properly, in vanilla JS and SVG.
---
Listed in The Vibeary: https://vibing.inc/library/meniscus-vg-2134 · JSON: https://vibing.inc/api/public/library/gems/meniscus-vg-2134