SVG Line Draw Animation

<svg class="draw" viewBox="0 0 200 100"><path d="M10 80 C40 10 80 10 100 50 S160 90 190 20" fill="none" stroke="url(#dg)" stroke-width="4" stroke-linecap="round"/><defs><linearGradient id="dg"><stop offset="0" stop-color="#ff7a18"/><stop offset="1" stop-color="#ff477e"/></linearGradient></defs></svg>
<button class="draw-btn" id="dbtn">Redraw</button>

body{background:#0d1426;flex-direction:column;gap:18px}
.draw{width:280px}
.draw path{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.draw-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a2540;border:0;border-radius:10px;padding:11px 22px;cursor:pointer}

document.getElementById('dbtn').onclick=function(){var p=document.querySelector('.draw path');p.style.animation='none';void p.offsetWidth;p.style.animation='draw 2s ease forwards'};