Create Smooth SVG Wave Effects – vue-surf

Install & Download:

# Yarn
$ yarn vue-surf
# NPM
$ npm i vue-surf

Description:

vue-surf is a Vue component to create customizable, smoothly animated waves using SVG. Can be used as content separators or background images for your web app.

How to use it:

1. Import the VueSurf component.

import { VueSurf } from "vue-surf";

2. Add the VueSurf component to the template. That’s it.

<template>
  <VueSurf />
</template>

3. Config the SVG waves using the following props.

width: {
  type: [Number, String],
  default: "100%",
  validator: lengthValidator,
},
color: {
  type: [String, Object] as PropType<string | LinearGradientColor>,
  default: "white",
  validator: colorValidator,
},
shape: {
  type: String as () => WaveShape,
  default: "wavy", // "wavy" | "serrated" | "petal"
  validator: shapeValidator,
},
apexesSeries: {
  type: Array as () => Apexes[],
  required: true,
  validator: apexesSeriesValidator,
},
apexesIndex: {
  type: Number,
  default: undefined,
},
side: {
  type: String as () => WaveSide,
  default: "top", // "top" | "bottom"
  validator: sideValidator,
},
repeat: {
  type: Boolean,
  default: true,
},
closure: {
  type: Boolean,
  default: true,
},
smooth: {
  type: [Boolean, Number],
  default: true,
},
marquee: {
  type: Boolean,
  default: true,
},
marqueeSpeed: {
  type: Number,
  default: 2,
},
transitionDuration: {
  type: Number,
  default: 500,
},
apexesSeriesTransformAuto: {
  type: Boolean,
  default: true,
},
apexesSeriesTransformDuration: {
  type: Number,
  default: undefined,
},
onApexesChanged: {
  type: Function as PropType<ApexesChangedCallback>,
  default: undefined,
},

4. API methods:

pauseMarquee: () => void;
resumeMarquee: () => void;
pauseApexesSeriesTransform: () => void;
resumeApexesSeriesTransform: () => void;

Preview:

Changelog:

v2.0.0 (09/23/2023)

• Deprecation exposed methods.
• Now, you can use apexesIndex to specify which set of apexes from apexesSeries the wave should display.
• Now, you can use apexesSeriesTransformAuto to toggle the transformation animation.
• bug fix