5分で出来る シャボン玉っぽいオブジェクトを作るTIPS

SVG animationを使ってサクッとﾓﾆﾓﾆした有機物っぽい動きを作るためのTIPSです。
ただし、この方法はIE11およびEdgeは非対応ですのでご注意ください。
SVG animation 対応状況: https://caniuse.com/#feat=svg-smil

キーフレームとなる要素の用意

適当なグラフィックソフトを使って、アニメーションのフレームとなるベクター図形を用意します。
ポイントとして各フレームごとにあんまり大きく変化させないようにします。
ベースになるオブジェクトをつくって、アンカーポイントをちょっとだけずらすぐらいの調整にするがいい感じです。

SVGタグに落とし込む

要素をそれぞれSVGとして書き出し、アニメーションさせる要素（今回はpathのみ）を中身をコピペして定義していきます。
以下の例ではanimationの最後に一番最初の形のパスを指定して、繰り返した時に不自然な動きにならないようにしています。（あんまりスマートじゃないですね。もっといい方法がありそう）

このとき、各フレームの要素がviewBoxからはみ出してしまわないように注意してください。
各フレームごとの要素の最大値を使うのが手っ取り早いと思いますが、縦横比が大きく違うような物をアニメーションさせる場合はベクター図形を制作している段階で気をつけておく必要があります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 656 584">
    <path d="M625,319c0,164-178,279-342,279S4,429,4,265,173,4,337,4,625,155,625,319Z" style="fill:#b9efef;stroke:#b9efef;stroke-linejoin:round;stroke-width:8px">
        <animate attributeName="d"
                 repeatCount="indefinite"
                 dur="3s"
                 to="M652,265c0,164-151,315-315,315S4,456,4,292,209,4,373,4,652,101,652,265Z" />
        <animate attributeName="d"
                 repeatCount="indefinite"
                 dur="3s"
                 to="M607,292c0,164-169,279-333,279S4,384,4,220,200,4,364,4,607,128,607,292Z" />
        <animate attributeName="d"
                 repeatCount="indefinite"
                 dur="3s"
                 to="M652,265c0,164-151,315-315,315S4,456,4,292,209,4,373,4,652,101,652,265Z" />
        <animate attributeName="d"
                 repeatCount="indefinite"
                 dur="3s"
                 to="M625,319c0,164-178,279-342,279S4,429,4,265,173,4,337,4,625,155,625,319Z" />
    </path>
</svg>

必要に応じて動きをつける

パスを変化させるのと併せて、ゆっくり回転させるとそれっぽい感じになります。
SVG内で回転アニメーションをすることも出来るみたいですが、今回はシンプルにCSSのanimationを使いました。変化させる時間や回転速度は適宜調整するとそれっぽい感じ度が上がると思われます。

動作サンプル

See the Pen shabon by ampersand_xyz (@ampersand_xyz) on CodePen.