【css】アンダーラインが波のように動くテキストリンクを作る

<ul class="list_link">
<li>
<a href="#" class="wave">
<span>HOME</span>
<svg class="wave_item" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
</svg>
</a>
</li>

<li>
<a href="#" class="wave">
<span>会社概要</span>
<svg class="wave_item" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
</svg>
</a>
</li>

<li>
<a href="#" class="wave">
<span>お問い合わせ</span>
<svg class="wave_item" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
</svg>
</a>
</li>
</ul>

.wave {
position: relative;
display: flex;
overflow: hidden;
padding-bottom: 15px;
}

.wave_item {
position: absolute;
fill: none;
stroke: #1f6dc6;
stroke-width: 2px;
transition: transform 0.7s;
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}

.wave:hover .wave_item {
transform: translate3d(-66.6%, 0, 0);
}