这种交互动画如何写？

Question

如图 一个菜单按钮 我想写一个交互动画
1.鼠标悬停 外层画出圆圈
2.鼠标移出 圆圈缩短至消失。
本人菜鸟 望各位大神不吝赐教 谢谢

自答一发：

<div class="menubut">

    <span class="iconfont font-menu"></span>

    <svg class="round">

        <circle cx="25" cy="25" r="23" stroke="#fff" stroke-width="3" fill="none"/>

    </svg>

</div>

菜单按钮用字体图标 圈圈用svg 但是：两者的位置，圈圈的大小需要不断调节各项参数使之协调，感觉不太好。
想了解各位前辈在实际工作中会怎样写这种交互动画？