SVG Liquid Animation

Pro

Any SVG as a body of water: ripples, drips, and a surface that follows the pointer.

svgliquidwaterlogoripplewavewebgltheme

Overview

SVG Liquid Animation is a React and Tailwind CSS liquid effect that turns any SVG logo into a small body of water, in Next.js or any React app, with no dependencies. The artwork becomes a signed distance field whose rounded rim rises into a dome like surface tension, and a GPU wave simulation inside it bounces ripples off the walls. The pointer drags a wake, a press drops a drip, and the frame loop stops once the last ripple settles. Choose a jelly, water, or mercury finish. A src on another domain needs CORS, since it is fetched as text.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add svg-liquid-animation

Usage

Import SvgLiquidAnimation from @/components/wensity/svg-liquid-animation and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1import { SvgLiquidAnimation } from "@/components/wensity/svg-liquid-animation";
 2
 3export default function Example() {
 4  return (
 5    <SvgLiquidAnimation
 6      src="https://assets.wensity.com/brand-icons/rune.svg"
 7      className="h-[520px] w-full"
 8    />
 9  );
10}

Props

Prop	Type	Default	Description
`src`	string	-	SVG url. Fetched as text and rasterized, so the liquid can read the paths.
`markup`	string	-	Raw SVG markup, when you already have the file as a string.
`children`	React.ReactNode	-	Inline svg, used when src and markup are omitted. It is serialized, so keep it presentational.
`finish`	"jelly" \| "water" \| "mercury"	"jelly"	Glossy jelly that holds its color, clear water that lets the page through, or liquid mercury.
`aqua`	boolean	true	Fills the liquid with water blue. Turn it off to keep the artwork's colors or use tint. Mercury ignores it.
`viscosity`	number	0.3	How thick the liquid is, from 0 to 1. Higher settles faster.
`refraction`	number	0.7	How far the surface bends what is under it, from 0 to 1.
`response`	number	0.8	How strongly the pointer stirs the liquid, from 0 to 1.
`speed`	number	1	Playback rate.
`tint`	string \| false	-	Recolors the mark when aqua is off. Omit it and the mark follows the theme. Pass false to keep a multicolor logo's own colors.
`theme`	"auto" \| "light" \| "dark"	"auto"	Which scheme the mark and the lighting follow. Auto reads the dark class on html.
`paused`	boolean	false	Freezes the liquid on the current frame.
`label`	string	"Liquid graphic"	Accessible name for the liquid graphic.

Featured in React 3D components.