Как сделать эффект стирания svg анимация в css

Question

Не получается сделать так, что бы рисовался черный треугольник, потом стирался (от начала к концу) и рисовался градиентный и так же сам стирался (от начала к концу). А так же зациклить все это.
Заранее спасибо!

<svg width="187" height="163" viewBox="0 0 187 163" fill="none" xmlns="http://www.w3.org/2000/svg" style="">
    <path d="M92.634 157.5L5.59843 6.74997C5.21355 6.08333 5.69466 5.24998 6.46446 5.24998L180.536 5.25C181.305 5.25 181.786 6.08334 181.402 6.75L94.366 157.5C93.9811 158.167 93.0189 158.167 92.634 157.5Z" stroke="#252020" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" class="kHYGvhKG_0"></path>
    <path d="M92.634 157.5L5.59843 6.74997C5.21355 6.08333 5.69466 5.24998 6.46446 5.24998L180.536 5.25C181.305 5.25 181.786 6.08334 181.402 6.75L94.366 157.5C93.9811 158.167 93.0189 158.167 92.634 157.5Z" stroke="url(#paint0_linear_449_33853)" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" class="kHYGvhKG_1"></path>
    <path d="M92.634 157.5L5.59843 6.74997C5.21355 6.08333 5.69466 5.24998 6.46446 5.24998L180.536 5.25C181.305 5.25 181.786 6.08334 181.402 6.75L94.366 157.5C93.9811 158.167 93.0189 158.167 92.634 157.5Z" stroke="#252020" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" class="kHYGvhKG_2"></path>
    <defs>
    <linearGradient id="paint0_linear_449_33853" x1="206" y1="56.5" x2="-19" y2="56.5" gradientUnits="userSpaceOnUse">
    <stop stop-color="#FC6076"></stop>
    <stop offset="1" stop-color="#FF9A44"></stop>
    </linearGradient>
    </defs>
    <style data-made-with="vivus-instant">
    .kHYGvhKG_0{stroke-dasharray:529 531;stroke-dashoffset:530;animation:kHYGvhKG_draw 1000ms linear 0ms forwards;}
    .kHYGvhKG_1{stroke-dasharray:529 531;stroke-dashoffset:530;animation:kHYGvhKG_draw 1000ms linear 1000ms forwards;}
    .kHYGvhKG_2{stroke-dasharray:529 531;stroke-dashoffset:530;animation:kHYGvhKG_draw 1000ms linear 2000ms forwards;}
    @keyframes kHYGvhKG_draw{100%{stroke-dashoffset:0;}}
    @keyframes kHYGvhKG_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>

БЛОГ НА HUSL

Как сделать эффект стирания svg анимация в css

Ответы (0 шт):