How to make drawing effect?

Question

css

How to make a drawing effect when hovering over a link?
Just stretching this svg to 100% is not good. There are links with different widths.
Any ideas?


The svg itself, if anything:

<svg width="149" height="7" viewBox="0 0 149 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 3.0993C10.1667 1.83442 28.3 -0.177873 27.5 1.89192C26.5 4.47916 38.5 1.89192 41.5 1.89192C44.5 1.89192 52.5 1.89192 49.5 3.78922C46.5 5.68653 70.5 1.89192 75.5 1.89192C80.5 1.89192 72.5 6.0315 77.5 5.85902C82.5 5.68653 92.5 1.89192 99 1.89192C105.5 1.89192 99.5 6.89391 106 5.85902C112.5 4.82412 124.5 -0.00538788 129 1.89192C133.5 3.78922 123.5 6.20398 132.5 4.9966C139.7 4.0307 145.833 2.52435 148 1.89192" stroke="#458D36" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Answer 1

Answer 2

just kick this web (no) designer with kicks, let him do it himself xD

Answer 3

the block with the image is 100% wide, position the background from the center of the
block with the menu in width, for example, 900px, make some margin auto for it and layout the menus inside it already.

Answer 4

htmlbook.ru/css/calc
can be calculated.