Interactive Liquid SVG Wobble Button

This is an Interactive Liquid SVG Wobble Button. It maps cursor proximity to discrete vector points along an SVG path, deforming the shape in real-time. Its function is to transform a static call-to-action into a physical, reactive object.

Specs

• Weight: ~15 KB (Relies on external ES modules for vector math and splines).
• Performance: [!] CPU-bound. Requires continuous DOM manipulation to update the d attribute of the SVG path at 60fps.
• Theming: Hardcoded SVG fills (#A78BFA, #4C1D95). Requires manual updates to the script or CSS variables integration.

Anatomy

The component bypasses CSS shapes entirely, relying on mathematical geometry.

• HTML (The Skeleton): A native <button> wrapper housing an inline <svg>. The SVG contains a hidden base path (#baseBtnPath), gradient definitions, and filter elements.
• CSS (The Skin): Minimalist. It strips native button styling and handles the :focus state by adjusting the SVG stroke. It also contains a .debug state to reveal the hidden coordinate structure.
• JS (The Nervous System): It samples the static SVG path into 32 discrete coordinate points. A requestAnimationFrame loop calculates the distance between the cursor and these points, displacing them mathematically before redrawing the shape using spline interpolation.

Logic

The core mechanism is the distance calculation and spring easing formula inside the animation loop.

if (l < range && !p.reset) {
  point.sub(new Vector2D(d.x, -(d.y * 0.675)));
  y = point.y;
} else {
  y = pointOrigins[index].y;
}
p.y += (y - p.y) * 0.1; // Spring easing

The script calculates the hypotenuse (l) between the cursor and each path node. If the cursor breaches the interaction threshold (range), the node is forcefully repelled. The subsequent line p.y += (y - p.y) * 0.1 applies constant friction, ensuring the node always snaps back to its origin when the cursor leaves, creating the elastic wobble.

Feel

Viscous and magnetic. The button surface repels the cursor like opposing magnets, but the tension springs back organically. It behaves less like a digital rectangle and more like a fluid trapped in a flexible membrane. The included debug mode beautifully exposes this hidden physical logic, making the invisible structural engineering entirely transparent.