I built this interactive thermometer component that simulates liquid filling with animated bubbles rising through it.

The whole thing uses SVG for the thermometer shape and clip paths for the liquid effect, with CSS handling the smooth transitions and JavaScript managing the interactions.

Interactive Demo

Click anywhere on the thermometers to set new values and watch the liquid animations:

Technical Implementation

Animated Bubbles

Bubbles automatically appear when liquid level exceeds 30%, each with staggered timing and opacity transitions for realistic movement.

SVG Structure

Classic thermometer design using a single SVG path with circular bulb reservoir and narrow tube, ensuring clean scalability.

Dynamic Theming

Three colour schemes (red, blue, green) with vertical gradients that create depth and visual hierarchy in the liquid.

Interactive Controls

Click-to-fill functionality calculates percentage based on cursor position, with CSS transitions handling smooth animations.

Implementation Details

The complete source code is available on CodePen with vanilla JavaScript, HTML, and CSS.

Key Technologies Used:

SVG Paths for thermometer geometry
ClipPath for liquid masking effects
CSS Transitions for smooth animations
Linear Gradients for depth and visual interest
Vanilla JavaScript for interaction handling

I wanted to explore liquid simulation effects using pure CSS and SVG, without heavy animation libraries. The challenge was creating realistic bubble physics and smooth liquid transitions whilst keeping the code lightweight.

The project demonstrates how modern CSS features like clip-path and CSS animations can create engaging interactive components with minimal JavaScript overhead.

Questions about the implementation? Reach out on Bluesky.

SVG Liquid Thermometer with Animated Bubbles