How to add a background image to animated SVG

Question

I have an animated SVG shape. I need to add a background image masked by that SVG.

• Until the animation ends, the background image should be blurred.
• And once the animation is finished the background image should move a bit to the right with a smooth effect.

Here is the demo:

When I add the image, it doesn't work properly. Even animation stopped working.

.container {
  width: 500px
}

path {
  stroke: black;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 4s linear forwards;
}

#path1 {
  animation-delay: 0s;
}

#path2 {
  animation-delay: 4s;
}

#path3 {
  animation-delay: 8s;
}

#path4 {
  animation-delay: 12s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

<div class="container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 419 390" enable-background="new 0 0 409 382" xml:space="preserve">
        <defs>
        <clipPath id="svg-draw">
    <path class="st0" d="M48.7,164.2L43.5,339L201.4,131L156,344.5L378,70.2" stroke="black" stroke-width="90" stroke-linecap="round" stroke-linejoin="round"/>
              </clipPath>
      </defs>
      
        <image clip-path="url(#svg-draw)" height="100%" width="100%"
             xlink:href="https://cdn.pixabay.com/photo/2023/10/04/20/31/sunrise-8294459_960_720.jpg" />
    </svg>
</div>

Here is the CODEPEN I tried: https://codepen.io/eshanrajapakshe/pen/KKbLBrj

Looking for your help to do this.