Search code examples
svgsvg-animate

Smoothly animating wavy line

I am trying to create a smooth wavy animation, similar to the motion of a whip (I know, settle down), at the moment I have a path generated and two states which I'm animating between. However it is not a smooth transition, and I'd also need to add many more states before it looks convincing. See code below:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
	.st0{
	  fill:none;
	  stroke:#000000;
	  stroke-width:20;
	  stroke-miterlimit:10;
	  -webkit-transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          transition: 1s;
	}
</style>

<path class="st0" d="M291,302c0,0,0-40,40-40s177,40,177,40">
	<animate attributeName="d" attributeType="XML"
       from="M291,302c0,0,0-40,40-40s177,40,177,40;"
       to="M291,302c0,0,65.3,15.9,148.7-53c50-41.3,68.3,53,68.3,53"
       begin="0"  dur="1s" repeatCount="indefinite" />
</path>
</svg>

Solution

  • As Robert said, all the parameters of the initial and final patches should be the same.

    Two paths are distinguished by the presence of the parameter "s" in the formula of the inital path. 

     "M291,302c0,0,0-40,40-40s177,40,177,40;"
 "M291,302c0,0,65.3,15.9,148.7-53c50-41.3,68.3,53,68.3,53"

    It is necessary to give the formulas of both paths to the same number of points and the same set of parameters.

    To do this, in the vector editor, you need to transform the initial path to the final path, preserving the number of node points.

    enter image description here

    • Your "s" parameter controls the second node of the initial path

    It is enough to move it a little and it will disappear from the path formula.

    You save the file *.svg in the vector editor, but do not close the editor.
    Copy to your animation application the formula of the initial path. 

    d="m291 302c0 0 129 1 173-33 32-24 40 41 40 41"
    • Re-edit the image by dragging the node points to the final path location

    enter image description here

    • Copy the final path formula to your application.

    To animation transition from the initial position to the final and back to the initial, it looked smooth to specify three path positions. 

    "m291 302c0 0 5-40 45-40 40 0 172 40 172 40;
 m291 302c0 0 129 1 173-33 32-24 40 41 40 41;
 m291 302c0 0 5-40 45-40 40 0 172 40 172 40"

    Final animation code: 

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
	.st0{
	  fill:none;
	  stroke:#000000;
	  stroke-width:15;
	  stroke-linejoin:round;
	  stroke:orangered;
	 
	}
</style>

<path class="st0" d="m291 302c0 0 5-40 45-40 40 0 172 40 172 40" >
<animate attributeName="d" attributeType="XML" dur="4s"  repeatCount="indefinite"
values=
"m291 302c0 0 5-40 45-40 40 0 172 40 172 40;
 m291 302c0 0 129 1 173-33 32-24 40 41 40 41;
 m291 302c0 0 5-40 45-40 40 0 172 40 172 40" />
</path>
	
</svg>

    Update

    answer the question in the comments

    From your file, remove the command - <animate attributeName="d"../>

    • edit the file and save it:

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
	.st0{
	  fill:none;
	  stroke:#000000;
	  stroke-width:20;
	  stroke-miterlimit:10;
	 
	}
</style>

<path class="st0" d="M291,302c0,0,0-40,40-40s177,40,177,40" />
	
</svg>

    • Open this file in a vector editor and then follow my instructions in the main answer