How to animate svg path fill?

Question

css

Good afternoon! Please tell me how best to animate svg path fill? The line needs to be drawn smoothly.
Like how stroke-dasharray works.
svg example

<svg width="190" height="160" viewBox="0 0 90 60" fill="none"
           xmlns="http://www.w3.org/2000/svg">
        <path
          d="M8.71479 34.8585C6.76327 32.9048 3.59745 32.903 1.64372 34.8545C-0.31001 36.806 -0.311806 39.9719 1.63971 41.9256L8.71479 34.8585ZM28.7272 61.9687L25.1896 65.5022C26.1275 66.4412 27.4001 66.9687 28.7272 66.9687C30.0542 66.9687 31.3269 66.4412 32.2647 65.5022L28.7272 61.9687ZM88.4441 9.25911C90.3956 7.30538 90.3938 4.13956 88.4401 2.18805C86.4863 0.236534 83.3205 0.238329 81.369 2.19206L88.4441 9.25911ZM1.63971 41.9256L25.1896 65.5022L32.2647 58.4352L8.71479 34.8585L1.63971 41.9256ZM32.2647 65.5022L88.4441 9.25911L81.369 2.19206L25.1896 58.4352L32.2647 65.5022Z"
          fill="red" />
      </svg>

I will be grateful for help.

Answer 1

To work as a stroke-dasharray, you need to draw this line with a stroke (stroke). There is another option: use paht with fill (fill) as clipPath, for a line with a stroke and, again, animate this stroke through stroke-dasharray.