Как создать рисованную SVG-анимацию с маской ⇐ CSS

[Гость]

Я пытаюсь создать приведенную ниже SVG-анимацию с маской. Я пробовал использовать свойства CSS stroke, но не смог добиться желаемого результата.





Вот созданный мною W-образный SVG.

путь { обводка: черный; заливка: нет; ширина штриха: 2; /* Отрегулируйте ширину обводки по желанию */ инсульт-дашаррай: 1000; смещение штриха-тире: 1000; анимация: нарисовать 4 секунды линейно вперед; } #path1 { задержка анимации: 0 с; } #path2 { задержка анимации: 4 с; } #path3 { задержка анимации: 8 с; } #path4 { задержка анимации: 12 с; } @keyframes рисует { к { штрих-дашоффсет: 0; }

Ссылка на CODEPEN: https://codepen.io/eshanrajapakshe/pen/KKbYQbG

Помогите мне создать эту анимацию или предложите способ это сделать.