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

自答一发：

<p 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>
</p>

.menubut{
    position: relative;
}
.menubut .font-menu{
    position: absolute;top: 10px;left: 10px;z-index: 2;display: block;width: 45px;line-height: 45px;text-align: center;font-size: 32px;
}
.menubut .font-menu:before{
    content: '\e605';color: #fff;cursor: pointer;
}
.menubut .round{
    position: absolute;top: 8px;left: 8px;z-index: 1;width: 50px;height: 50px;transform: rotate(-90deg);cursor: none;
}
.menubut .round circle{
    stroke-dasharray: 150;stroke-dashoffset: 150;stroke-linecap: round;transition: stroke-dashoffset .8s ease-out;
}
.menubut .font-menu:hover+.round circle{
    stroke-dashoffset: 0;
}

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