SVG Line Animation Logo Image Fill

How to fade in SVG background image after line animation completes

HTML

<path class=path>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="501" height="133" viewBox="0 0 501 133">
  
  <defs>

    <pattern width="500" patternUnits="userSpaceOnUse" height="200" id="texture">
      <image xlink:href="wni-map.png" />
    </pattern>

    <text id="wni-animated-text-b" fill="#F8E81C" fill-opacity="0" font-family="Padaloma" font-size="144" letter-spacing="15">
      <tspan x="5.33" y="121">W</tspan> <tspan x="245.978" y="121" letter-spacing="10">N</tspan> <tspan x="417.402" y="121">I</tspan>
    </text>

    <filter id="wni-animated-text-a" width="103.8%" height="112.8%" x="-1.2%" y="-4.2%" filterUnits="objectBoundingBox">
      <feOffset dx="4" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/>
      <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="2"/>
      <feColorMatrix in="shadowBlurOuter1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
    </filter>

    <filter id="wni-animated-text-c" width="103.1%" height="110.6%" x="-.9%" y="-3.1%" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="1.5"/>
      <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"/>
      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0"/>
    </filter>

    <filter id="wni-animated-text-d" width="103.1%" height="110.6%" x="-.9%" y="-3.1%" filterUnits="objectBoundingBox">
      <feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="1.5"/>
      <feOffset dy="1" in="shadowBlurInner1" result="shadowOffsetInner1"/>
      <feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
      <feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0...

CSS

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear  alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}