SVG 蒙版 - 变形动画

Question

我真的受到这个网站的启发：https://happyegg.com/

我找到了如何在 DIV 周围放置 SVG 蒙版，但我不知道如何在悬停（或单击）时制作变形动画。我希望 SVG 的路径能够平滑过渡。有什么想法吗？

.questions {
            height: 352px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 48px 24px;
            margin-bottom: 40px;
            clip-path: url(#questions-clipath);
}

<svg width="1" height="1" viewBox="0 0 2 1" fill="none" xmlns="http://www.w3.org/2000/svg">
                <clipPath id="questions-clipath">
                    <path
                        d="M0.55397 0.138522C0.553323 0.138684 0.373698 0.142241 0.344919 0.149355C0.328751 0.153235 0.146054 0.158732 0.130695 0.164553C0.11485 0.170535 0.116305 0.255578 0.116467 0.269482C0.117114 0.322351 0.117599 0.389287 0.111293 0.402868C0.10806 0.409658 0.105473 0.467054 0.103371 0.474168C0.101431 0.480797 0.0999756 0.535768 0.0999756 0.54272C0.0999756 0.555977 0.106604 0.657188 0.115658 0.668021C0.14185 0.699387 0.316302 0.698578 0.341362 0.692596L0.48946 0.687907C0.577413 0.684027 0.617995 0.684836 0.692691 0.69389L0.818153 0.702135C0.935209 0.708764 1.04968 0.707147 1.0728 0.689039C1.09592 0.670931 1.08072 0.495186 1.09834 0.431485C1.10158 0.420006 1.09964 0.315238 1.09576 0.30392C1.09139 0.291632 1.08315 0.185733 1.07247 0.176355C1.06083 0.166008 0.917263 0.157924 0.90158 0.15178C0.893172 0.148547 0.819447 0.145798 0.810555 0.143535C0.802147 0.141433 0.732949 0.139493 0.724056 0.138199C0.720984 0.137714 0.694469 0.137552 0.663265 0.137552C0.616055 0.137229 0.558497 0.137714 0.55397 0.138522Z"/>
                </clipPath>
            </svg>
            <div class="questions">
                <h3 class="questions-section-title">Got any questions?</h3>
                <p class="questions-section-paragraph">Here’s where you can see the questions people ask the most. You
                    could almost call these questions “frequently asked”.
                </p>
                <a href="/" class="cta cta-white">find out which ones</a>
            </div>

我有一个简单的 SVG 剪辑路径的结果：