resources/line.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 0.6">
  <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#pattern)" stroke-width="100%" />
  
  <defs>  
    <!-- Rainbow gradient -->
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0">
      <stop offset="0%" style="stop-color:#58a6ff;"/>
      <stop offset="12.5%" style="stop-color:#58a6ffcc;"/>
      <stop offset="25%" style="stop-color:#58a6ff99;"/>
      <stop offset="37.5%" style="stop-color:#58a6ff66;"/>
      <stop offset="50%" style="stop-color:#58a6ff33;"/>
      <stop offset="62.5%" style="stop-color:#58a6ff66;"/>
      <stop offset="75%" style="stop-color:#58a6ff99;"/>
      <stop offset="87.5%" style="stop-color:#58a6ffcc;"/>
      <stop offset="100%" style="stop-color:#58a6ff;"/>
    </linearGradient>
    
    <!-- Stitch 2 gradients together for seamless animation  -->
    <pattern id="pattern" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="150%" height="100%" fill="url(#gradient)">
        <animate attributeType="XML"
                 attributeName="x"
                 from="0" to="150%"
                 dur="5s"
                 repeatCount="indefinite"/>
      </rect>
      <rect x="-150%" y="0" width="150%" height="100%" fill="url(#gradient)">
        <animate attributeType="XML"
                 attributeName="x"
                 from="-150%" to="0"
                 dur="5s"
                 repeatCount="indefinite"/>
      </rect>
    </pattern>
  </defs>
</svg>