Wavy effect for my svg Bezier curve Does it possible?

Question

I'm trying to add wavy effect to my line

But idk what way is right. Guess, i need to change start and end points from js.

Thank you very much.

user_7394871 · Answer

To ensure that the SVG curve does not go beyond the SVG canvas, it is necessary to accurately calculate its overall dimensions.
It can be done with JS getBBox() method.

let bb = wave.getBBox();

console.log(bb);

Add the resulting numbers to the viewBox

Was viewBox ="0 0 1440 768" Now `viewBox ="- 83 -168 1668 987"

Technique of getting animation of `d` `path` attribute step by step

Load your svg file into a vector editor such as Inkscape
Select the path and clone it

Note

That the animation runs smoothly without jumps, it is necessary that the number of node points and their type are the same in the start and end positions.

Curve cloning is the easiest trick to meet this condition.

To change the curve clone, change the position of the node points (in the figure, the red curve)
Save the file in a vector editor
Copy the patches of the start and end positions of the curve
The animation of the d attribute is to move from the start position to the end

values="path-start;path-finish"

Update

If you want a repeating animation from the start position to the final position and back to the start position

values="path-start;path-finish;path-start"

You can change the shape of the curve in the final position to your liking.
Hope this answer helps you

user_7394871 · Answer

Another example of animating the `d` attribute

Here is another form of path that looks more like a wave

The technique for obtaining the final patch is the same as in the first example.

Start path

* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}

End path

* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}

Wave animation

* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}

UPDATE

codepen.io/manabox/pen/BPrNPg Like that. But without fill only stroke 2px

Wavy effect for my svg Bezier curve Does it possible?

2 Answers

Technique of getting animation of d path attribute step by step

Note

Another example of animating the d attribute

Technique of getting animation of `d` `path` attribute step by step

Another example of animating the `d` attribute