SVG Animations pattern edge

I want to create stripe animated background but for some reason can't remove vertical lines that appear on the edge of patterns.

Here is my svg:

<svg width="500" height="500">
      <defs>
                <linearGradient id='stripe-gradient' x1='0%' y1='0%' x2='100%' y2='100%'>
             <stop offset='0%'  stop-color='#AAA'></stop>
                         <stop offset='24.9%'  stop-color='#AAA'></stop>
             <stop offset='25%' stop-color='#666'></stop>
                         <stop offset='49.9%' stop-color='#666'></stop>
                         <stop offset='50%' stop-color='#AAA'></stop>
                         <stop offset='74.9%' stop-color='#AAA'></stop>
                         <stop offset='75%' stop-color='#666'></stop>
                         <stop offset='99.9%' stop-color='#666'></stop>
                         <stop offset='100%' stop-color='#AAA'></stop>
                </linearGradient>
        <pattern id='stripe-pattern' width='20' height='20' patternUnits='userSpaceOnUse' >
                          <rect x='-20' y='0' width='20' height='20' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'>
                                <animate attributeName='x' from='-20' to='0' dur='.5s' repeatCount='indefinite'></animate>
                          </rect>
                  <rect x='0' y='0' width='20' height='20' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'>
                                  <animate attributeName='x' from='0' to='20' dur='.5s' repeatCount='indefinite'></animate>
                          </rect>
        </pattern>
        <mask id='stripe-mask'>
          <rect x='0' y='0' width='100%' height='100%' fill='url(#stripe-pattern)' ></rect>
        </mask>      
      </defs>
      <rect class="hbar thing" x="0" y="0" width="200" fill="green" height="200" mask="url(#stripe-mask)"></rect>
    </svg>