波浪

path c 的用法

C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy
(x,y)表示的是曲线的终点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。

曲线数据分析

控制点的y值的大小决定了波峰是由高到低还是由低到高

第一条曲线起点低(806.2501)，结点高(755.7685)，就是一条向上的曲线（svg使用的是坐标系的第四象限，y值越大，越往下）

对应这一部分

第二条曲线起点高(755.7685)，结点低(827.65)，就是一条向下的曲线

对应这一部分

把所有的y值对应前移一个位置，可以得到波峰相反的曲线

见下图绿色曲线

制作无线循环动画

为了让两个波形可以首尾相连，把第一个曲线的最后一个y值，改为第二个曲线的第一个y值

移动第二条曲线到第一条曲线的结尾处

利用三条曲线加上动画，可以制作无线循环的动画

波浪动画

用两条曲线的路径值，不断切换，可以制作波浪形变的动画

<animate attributeName="d" dur="3s" repeatCount="indefinite" values="M 96.1271 806.2501
C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685
C 529.8998 755.7685 529.9529 827.65 673.0447 827.65
C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097
C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858
C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074
C 1676.3448 696.5074 1826.88 745.8917 1826.88 745.8917
L 1826.88 1283.07
L 96.1271 1283.07Z;

            M    96.1271    755.7685  
            C    96.1271    755.7685    241.441    827.65    384.5859    827.65  
            C    529.8998    827.65    529.9529    755.7685    673.0447    755.7685  
            C    818.4117    755.7685    817.7127    827.65    961.5035    827.65  
            C    1106.1715    827.65    1109.3353    738.2097    1249.9624    738.2097  
            C    1397.7941    738.2097    1387.886    833.6858    1538.4211    833.6858  
            C    1676.3448    833.6858    1826.88    696.5074    1826.88    696.5074  
            L 1826.88 1283.07  
            L 96.1271 1283.07Z;

            M 96.1271 806.2501  
            C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685  
            C 529.8998 755.7685 529.9529 827.65 673.0447 827.65  
            C 818.4117 827.65 817.7127 738.2097 961.5035 738.2097  
            C 1106.1715 738.2097 1109.3353 833.6858 1249.9624 833.6858  
            C 1397.7941 833.6858 1387.886 696.5074 1538.4211 696.5074  
            C 1676.3448 696.5074 1826.88 745.8917 1826.88 745.8917  
            L 1826.88 1283.07  
            L 96.1271 1283.07Z"></animate>  
            <animateTransform attributeName="transform" begin="0s" dur="3s" type="translate"  
                values="-100 0; 100 0; -100 0" repeatCount="indefinite" />  
    </path>  
</g>