我想为我的svg矩形形状制作发光的动画。如何使用滤镜做到这一点？

Question

我正在尝试为svg矩形形状制作动画，以使该形状周围必须具有模糊的阴影，并且阴影比例会增大，不透明度会降低，然后比例会降低并且不透明度会增加。我该怎么办？

我对svg不太了解，也找不到适当的文档。我正在尝试制作与该网站的图形形状https://dribbble.com/year/2018相似的动画。 这是我的svg的代码：

<svg width="1200" height="500" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <linearGradient id="ghorz" x1="0%" y1="0%" x2="100%" y2="0%">
   <stop offset="0%" stop-color="black"/>
   <stop offset="10%" stop-color="white"/>
   <stop offset="90%" stop-color="white"/>
   <stop offset="100%" stop-color="black"/>
  </linearGradient>
  <linearGradient id="gvert" x1="0%" y1="0%" x2="0%" y2="100%">
   <stop offset="0%" stop-color="black"/>
   <stop offset="10%" stop-color="white"/>
  </linearGradient>

  <linearGradient id="linecolor">
   <stop offset="0%" stop-color="#FF355E"/>
   <stop offset="50%" stop-color="#66FF66"/>
   <stop offset="100%" stop-color="#50BFE6"/>
      </linearGradient>

      <mask id="mhorz" maskContentUnits="objectBoundingBox">
        <rect width="1" height="1" fill="url(#ghorz)"/>
      </mask>

      <mask id="mvert" maskContentUnits="objectBoundingBox">
        <rect width="1" height="1" fill="url(#gvert)"/>
      </mask>

    </defs>
    <g>
      <rect x="100" y="350" width="1000" height="2" fill="white" mask="url(#mhorz)"></rect>

      <rect id="line1" x="163" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <rect x="306" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <rect x="449" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <rect x="592" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <rect x="735" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <rect x="878" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <rect x="1021" y="50" width="2" height="300" fill="white" mask="url(#mvert)"></rect>
      <line x1="163" y1="310" x2="1021" y2="180" style="stroke:url(#linecolor);stroke-width:2"></line>
    </g>
  </svg>