As shown in the figure below, there are many methods to achieve the wave animation effect, such as CSS or JS methods can be achieved. However, when implemented in SVG, I find it easier than the other two methods. This article will show you how easy it is to use SVG to create wavy animations like this.

Let’s analyze how this wave effect works.

The wave effect is mainly composed of two animations. One is the change of the upper and lower positions of the wave, that is, the value of the Y axis of the element. Another wave-scrolling effect is actually created by changing the X-axis of a large SVG drawn wave.

One key to the overall effect is to use vector design software such as AI to design a wave shape:

Similar wave shapes can be easily drawn using the PEN tool in THE AI. The SVG code is as follows:

< SVG class = "wave - SVG" XMLNS = "http://www.w3.org/2000/svg" data - name = "3 - waves" viewBox = "0 0 600 215.43" > < title > wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" D = "M639, 986.07 c - 17-1-27, 33-33-40.5, 2.67 s - 24.58, 11.84, 40.46, 15 c - 13.56, 2.69-31.27, 2.9, 46.2, 1.35-17.7-1.83-35-9.06-35-9.06 S456, 987.07, 439986.07. S - 27.33-33-40.5, 2.67, 24.58, 11.84, 40.46, 15 c - 13.56 -, 2.69-31.27, 2.9, 46.2, 1.35-17.7-1.83-35-9.06-35-9. 06 s256, 987.07, 239986.07. S - 27.33-33-40.5, 2.67, 24.58, 11.84, 40.46, 15 c - 13.56 -, 2.69-31.27, 2.9, 46.2, 1.35-17.7-1.83-35-9.06-35 - 9.06 v205.06 h600V996S656, 987.07, 639986.07 Z < path > "< / SVG >Copy the code

SVG’s default path fill is black. The path color can be defined directly in the AI, or by style.

Now that we have the wave shape, let’s animate it. Let’s define the basic HTML effects:

<div class="wrapper"> <h3>animated svg</h3> <div> <div class="wave-svg-shape"> <svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" id="738255fe-a9fa-4a5e-963a-8e97f59370ad" data-name="3-waves" viewBox="0 0 600 215.43 "> < title > wave shape < / title > < path class =" 871 c1787 a54 - ad03 a7ef - 4-3 cd50e05767a" D = "M639, 986.07 c - 17-1-27, 33-33-40.5, 2.67 s - 24.58, 11.84, 40.46, 15 c - 13.56, 2.69-31.27, 2.9, 46.2, 1.35-17.7-1.83-35-9.06-35-9.06 S456, 987.07, 439986.07. S - 27.33-33-40.5, 2.67, 24.58, 11.84, 40.46, 15 c - 13.56 -, 2.69-31.27, 2.9, 46.2, 1.35-17.7-1.83-35-9.06-35-9. 06 s256, 987.07, 239986.07. S - 27.33-33-40.5, 2.67, 24.58, 11.84, 40.46, 15 c - 13.56 -, 2.69-31.27, 2.9, 46.2, 1.35-17.7-1.83-35-9.06-35 - 9.06 v205.06 h600V996S656, 987.07, 639986.07 Z "transform =" translate (76-985) "> < / path > < / SVG > < / div > < / div > < / div >Copy the code

Wave-svg-shape is used to animate the position of waves on the Y axis. Wave-svg is used to animate waves along the X axis.

Define basic CSS:

body > .wrapper {
    margin: 50px auto;
    text-align: center;
}
h3 {
    margin-bottom: 50px;
}
body > .wrapper > div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    position: relative;
}
.wave-svg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    overflow: hidden;
    transform: translateX(-100px);
}
.wave-svg-shape .wave-svg {
    width: 100%;
    height: auto;
    overflow: hidden;
    float: left;
    fill: #00A1DF;
    margin: 0;
}
Copy the code

In the style, transform defines the initial position of the wave on the X-axis and changes the fill color of the wave shape.

The following is the animation keyframe used to write two effects: wave-SVG-Shape: Transform

@keyframes fillUpSvg { 0% { transform: translateY(calc(100px/2)) scaleY(0); } 50% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(calc(100px/2)) scaleY(0); }}Copy the code

As you can see from the code above, which is mainly used for the translateY and scaleY attributes, at the initial 0% point, the element is 50px on the Y axis and shrinks to 0 on the Y axis, so that the element is just out of sight. Then change the value of the element to the default value to achieve the animation effect of the wave rolling up and down.

With the top and bottom effects in place, here is the X-axis scrolling animation for the wave-SVG element:

@keyframes waveSvgAnim { 0% { transform: translateX(calc(-100px * 2)); } 100% { transform: translateX(100px * 2); }}Copy the code

This is easy, just move the element along the X axis. The overall CSS code is as follows:

body > .wrapper { margin: 50px auto; vertical-align: top; text-align: center; } h3 { margin-bottom: 50px; } body > .wrapper > div { width: 100px; height: 100px; overflow: hidden; display: block; margin: 0 auto; position: relative; } .wave-svg-shape { position: absolute; top: 0; left: 0; width: 300px; height: 100%; overflow: hidden; transform: translateX(-100px); animation: fillUpSvg 10s ease-in-out infinite; } .wave-svg-shape .wave-svg { width: 100%; height: auto; overflow: hidden; float: left; fill: #00A1DF; margin: 0; animation: waveSvgAnim 1s linear infinite; } @keyframes fillUpSvg { 0% { transform: translateY(calc(100px/2)) scaleY(0); } 50% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(calc(100px/2)) scaleY(0); } } @keyframes waveSvgAnim { 0% { transform: translateX(calc(-100px * 2)); } 100% { transform: translateX(100px * 2); }}Copy the code

An elegant wave scrolling animation effect is achieved. This similar effect is used more often in some loading animations.

The demo address

Browser support for SVG is getting better and better, especially on mobile. Good use of SVG can not only improve the efficiency of animation development, but also greatly enhance the fun of animation.