How to Use the Animated Wave Widget

This widget allows you to create an elegant animated wave section by simply modifying a predefined data structure. Follow the steps below:

---

---

Instructions

1. Locate the Data Structure: In the JavaScript section, find the wavePaths array. This array contains the settings for each wave layer, such as color, opacity, and animation class.

2. Customize Fill Colors: To change the wave colors, update the fill property for each wave object. For example:

   { fill:"#ff5733", opacity: "0.3", class: "path-0" }

3. Adjust Opacity: To make the waves more or less transparent, modify the opacity property (e.g., 0.1 for very transparent, 1 for fully opaque).

4. Add or Remove Layers: You can add new wave layers by appending objects to the wavePaths array or remove layers by deleting an object.

5. Example Data Structure:

const wavePaths = [
    { fill: "#ff5733", opacity: "0.2", class: "path-0" },
    { fill: "#33c1ff", opacity: "0.3", class: "path-1" },
    { fill: "#28a745", opacity: "0.4", class: "path-2" }
];

6. Preview and Save:Preview and Save: Once changes are made, reload your webpage to preview the updated widget. Save your work after confirming it looks as desired.