~2kB gzipped

Demo

Install

yarn add wave-path

Import

import WavePath from 'wave-path';

Usage

const wavePath = new WavePath({
  svgEl: '.svg',       // required: SVGElement or selector
  // pathEl: 'path',   // optional: selector for <path> inside the SVG, defaults to 'path'
  isOpened: false,     // initial state

  numberPoints: 6,     // 3..8 (default 4)
  waveAmplitude: 30,   // 0..100 (default 30)

  delayPaths: 0.25,    // seconds between each <path> layer (default 0.25)
  duration: 1.5,       // seconds per layer animation (default 1)
});

wavePath.init();

// later
await wavePath.open();
await wavePath.close();
await wavePath.toggle();

// helper info
console.log(wavePath.isOpened);            // boolean
console.log(wavePath.totalDurationMs());   // number in ms
wavePath.stopIfActive();                   // kill active animation if any

Options

| Option | Type | Default | Description | |:----------------|:-----------------------|:------------:|:------------------------------------------------------------------------------------------------------| | svgEl | string \| SVGElement | required | Required. SVG container selector or element node. | | pathEl | string | 'path' | Selector for the <path> elements inside the SVG container. All matched paths are treated as layers. | | numberPoints | number | 4 | Number of wave control points (clamped to 3..8). Higher values give a more detailed edge. | | waveAmplitude | number | 30 | Wave ripple amplitude (clamped to 0..100). Set 0 for a straight edge animation. | | delayPaths | number | 0.25 | Delay between animations of each path layer (seconds). | | duration | number | 1 | Duration of each path layer animation (seconds). | | isOpened | boolean | false | Initial state. Use open(), close(), or toggle() at runtime. |

API

| Member / Method | Description | |:--------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------| | init() | Resolves DOM references, allocates internal buffers, and sets a stable initial shape based on isOpened. Safe to call again if the SVG content changes. | | toggle() | Toggles between opened/closed. Returns a Promise<void> resolved on animation complete. | | open() | Opens the overlay. Returns a Promise<void> resolved on animation complete. | | close() | Closes the overlay. Returns a Promise<void> resolved on animation complete. | | totalDurationMs() | Returns total duration of the current animation in milliseconds (includes delayPaths). Call after init() so pathCount is known. | | stopIfActive() | Stops the current animation if active. Useful for cancelling or resetting animations. | | destroy() | Cancels animations, clears references and caches; safe to call multiple times. | | isOpened (getter) | Current logical state of the overlay (boolean). |

Notes

• Layering: if your SVG contains multiple <path> nodes matching pathEl, each path is animated as a layer with delayPaths between layers.
• Rendering: the library updates d attributes of SVG <path> elements to produce smooth multi-segment cubic bezier wave transitions.
• Performance: the implementation uses typed arrays and reuses string buffers to reduce allocations.

License

MIT