背景重复之间的小差距

Question

所以我一直在玩CSS动画我似乎无法解决我的背景问题。我的重复波之间有一个很小的，几乎看不见的间隙。

原始图像上没有间隙，如果有任何不同，我会使用svg图像。

有什么想法吗？感谢。

CSS

public class Demo4 {
    public static void main(String args[]) {
        int i;
        int x = 0;

        for (i = 0; i < 10; i++) {
            x += i;
        }
        System.out.println(x);
    }
}   

HTML

    .hero {
      background-image: url('waves.svg');
      background-repeat: repeat-x;
      background-position: left bottom;
      height: 500px; 
      position: relative; 
      background-size:50px auto;
}