css – Animation of a wave (wave) svg by attribute d path

Question:

I have the following effect made with svg animation.

Svg code + animation path from sources:

The wave is coming from below. My task is to place it on top. And everything seems to be fine, with the help of illustrator I flipped the shape vertically to change the starting points of the animation movement. However, the movement path itself cannot be changed, since when loading the data-morph-shape in the illustrator, the transition points are not reflected, but only the result is reflected: the menu rectangle. Please tell me how to change the path based on changing the position of the svg file?

    <div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
    <path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
    </svg>

</div>

Answer:

  • It is better to draw a wave patch yourself in a vector editor, then you do not have to adjust anything and you don’t have to puzzle over why the animation doesn’t work.
* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}
<div class="morph-shape" id="morph-shape"  >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z"/>
</svg>
</div>
  • Now we draw the final position of the wave.
* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}
<div class="morph-shape" id="morph-shape"  >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300" preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;"/>
</svg>
</div>
  • Animating the d attribute of the wave patch
* {
padding:0;
margin:0;
}
body {
background:greenyellow;
}
</style>
<div class="morph-shape" id="morph-shape"  >
<svg xmlns="http://www.w3.org/2000/svg" width="200%" height="100%" viewBox="0 0 1000 300"  preserveAspectRatio="none">
<path fill="dodgerblue" d="M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z">
  <animate
    attributeName="d"
	dur="7s"
	repeatCount="indefinite" 
  values=" 
    M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;
	M0.00,49.98 C157.16,-41.94 281.88,148.52 500.00,49.98 L500.00,0.00 L0.00,0.00 Z;
    M0.00,49.98 C149.99,150.00 271.49,-49.98 500.00,49.98 L500.00,0.00 L0.00,0.00 Z" />
</path>	
</svg> 
</div>
Post Views: 0
Scroll to Top