SVGアニメーションでドロっと垂れる液体アニメーション

手順1

まずは、Illustratorで垂れる前の形のパスを作ります。
サイズはなんでも良いですが、1366×765が無難なので今回はそのサイズで作業します。

イラレで作ったパスアニメーションをする時の注意点ですが、ハンドルの角度が急すぎたり重なったりしていると書き出した時に勝手にアンカーポイントが追加されてアニメーションが作れなかったりするので、できるだけシンプルなハンドルの位置を意識して作りましょう。

今回はこんな感じのデータを作りました。
できるだけシンプルなハンドルを作りたかったので全ハンドルが平行になるように作ってます。

ここまでシンプルにしなくても大丈夫ですが初心者さんは最初はシンプルな形からはいるのがオススメです。

・長方形ツールで長方形を書く
　↓
・アンカーポイント追加

　↓
・アンカーポイントツールでハンドル作成

　↓
・ダイレクト選択ツールでアンカーポイントの位置を下げる

という手順で作成しました。ペンツールで一から書いても楕円を改造してもなんでも大丈夫です。

手順2

手順1で作ったパスを複製して、垂れた後の形を作ります。

SVGアニメーションはアンカーポイントがどこからどこまで移動したのかを繋げて作るアニメーションなので垂れた後の形は必ず一個目の形を複製して、アンカーポイントの移動のみで形を作ってください。

こんな感じで各アンカーポイントを真っ直ぐ下に下ろすだけで垂れた後の形を作成しました。

アンカーポイントを移動する時にもできるだけシンプルな移動の方が成功率が高いので初心者さんは↑の例のようにアンカーポイントを真っ直ぐ移動させるだけで形を作るのがおすすめです。

手順３

次に作った二つのパーツを書き出します。

Illustratorのメニューバーのウィンドウの中から「アセットの書き出しパネル」を出します。

作った二つのパーツを選択ツールで選択してアセットの書き出しパネルの上にドラックアンドドロップし、形式をSVG に変更します。

手順４

SVG で書き出したデータをエディタ(私はVSコードを使ってます)で開くとコードになっています。

Illustratorが自動で生成したコードなので無駄な部分が多いのでこの段階で中身を整理しておくのがおすすめです。
が、この手順は省いても問題ありません。

整理するのは二つのうちの一つで大丈夫です。サイズの大きい垂れた後の形の方を整理するのがおすすめ。

↓書き出したままのコード

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 743.57">
    <defs>
        <style>.cls-1{fill:#999;}</style>
    </defs>
    <g id="_レイヤー_1-2">
        <g id="_イヤー_1-2">
            <path class="cls-1" d="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"/>
        </g>
    </g>
</svg>

↓整理したコード

HTML

<?xml version="1.0" encoding="UTF-8"?><!-- この行は消さなくて良いが、HTMLに貼らなくてもいい-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 743.57">
            <path class="doro" d="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"/>
</svg>

CSS

.doro{
      fill:#999;
}

変更したのは

●SVG タグに勝手に付いているid属性ですが、使う予定がなければ属性ごと消して大丈夫です、もし使う場合は英語で名前を付け直しましょう。

●<defs><style>の中身はCSSなのでCSSファイルに移した方が扱いやすく私は好みです。(このままでも問題ありません)

●pathタグに付いているクラス名「cls-1」は毎回同じになってしまうのでHTML上に二個以上SVGを置く可能性がある場合は変えておかないと色等が上書きされてしまう可能性がありますので変えておきましょう。<defs><style>の中と一致させる必要があります。

●gタグはグループ化みたいな意味なので、今回のような１パーツのみのSVGデータの場合消しても大丈夫です。
二パーツ以上の場合も無駄にgタグが２重以上になっていたりしたら一つ残して消して大丈夫です。
gタグのidも使わない場合消すか、使う場合も半角英数で名前を付け直しましょう。

手順５

次に、整理したSV GコードをHTML上のbodyタグ内に貼り付けます。

貼り付けたら、pathタグに無理矢理閉じたぐを作りましょう。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 743.57">
            <path class="doro" d="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"></path>
</svg>

pathタグの中にanimateタグを入れ属性も書いていきます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 743.57">
            <path class="doro" d="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"><animate attributeType="XML" attributeName="d" dur="5s" repeatCount="indefinite" values=""></animate></path>
</svg>

今回animateタグに書いた属性は

●attributeType="XML"　→　SVG形式のデータをアニメーションさせるみたいな意味

●attributeName="d"　→　d属性をアニメーションさせるという意味(d属性の中身はアンカーポイントやハンドルの座標です。)

●dur="5s"　→　5秒間かけてアニメーションさせるという意味(数字は自由に変えてください)

●repeatCount="indefinite"　→　無限に繰り返すという意味(一度だけで良かったら書かなくても良い属性)

●values=""　→　この""中に垂れる前のpathタグのd属性と、垂れた後のpathタグのd属性を;で繋いで入れます。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 743.57">
            <path class="doro" d="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"><animate attributeType="XML" attributeName="d" dur="5s" repeatCount="indefinite" values="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z;
M1366,517.99c-79.37,0-75.19-192.16-146.67-192.16-99.8,0-67.76,417.74-232.09,417.74S824.32,196.34,726.86,196.34s-65.92,150.39-145.75,150.39-60.32-104.43-168.26-104.43-99.55,263.17-233.22,263.17S0,259,0,259V0H1366V517.99Z"></animate></path>
</svg>

垂れる前
垂れた後

この段階でアニメーションはできてるはずなので確認して見てください。

一度だけのアニメーションで良い場合はこれで完成です。「fill="freeze"」という属性を追加するとアニメーションが終わった状態のままで止まってくれます。

無限に繰り返して欲しい場合は↓みたいな感じで垂れる前の数値を最後に貼ってあげると戻る時もアニメーションになります。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 743.57">
            <path class="doro" d="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"><animate attributeType="XML" attributeName="d" dur="5s" repeatCount="indefinite" values="M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z;
M1366,517.99c-79.37,0-75.19-192.16-146.67-192.16-99.8,0-67.76,417.74-232.09,417.74S824.32,196.34,726.86,196.34s-65.92,150.39-145.75,150.39-60.32-104.43-168.26-104.43-99.55,263.17-233.22,263.17S0,259,0,259V0H1366V517.99Z;
M1366,284.06c-79.37,0-75.19-129.5-146.67-129.5-99.8,0-67.76,116.97-232.09,116.97s-162.92-116.97-260.38-116.97-65.92,112.79-145.75,112.79-60.32-112.79-168.26-112.79-99.55,129.5-233.22,129.5S0,154.56,0,154.56V0H1366V284.06Z"></animate></path>
</svg>

垂れる前
垂れた後