今回はillustratorで作成したロゴデザインを使用します。
■図形、テキストのすべてを「アウトライン化」します。

■アウトライン化後、
メインメニューより「ファイル」>「保存 / 別名で保存」を選択し、「SVG（svg）」形式で保存します。
(※SVG圧縮と間違えないように注意してください)

■「保存」ボタンのクリック後、オプションダイアログボックス表示されます。下記のように各項目を設定し「SVGコード」ボタンをクリックします。
※illustratorのバージョンによって「レスポンシブ」の項目がある場合はチェックをいれてください。

■Webブラウザーが起動し、SVGコードが表示されます。
このコードをコピーします。

■上記で取得したコードの＜ｓｖｇ＞～＜/ｓｖｇ＞までを、HTMLファイルの任意箇所にコピペします。

■HTMLのすべての＜ｐａｔｈ＞のタグにｃｌａｓｓ名を追加します。
※今回は「class=”logo_path”」を追加します。

■＜ｐａｔｈ＞のインライン要素に書かれた「style=”fill:#F2A305;」(内部の塗りの色)は、CSSで管理するので削除します
■ピンクの塗りのパスに「class=”pink”」を設定
↓　↓

■基本はこんな感じ

(「RERUN」をクリックするとアニメーションが繰り返されます)

まずは描いた輪郭の内部に色を付けます。
■CSSの@keyframesで、アニメーションのタイミングを設定していきます。

(「RERUN」をクリックするとアニメーションが繰り返されます)

————————————————-
@keyframesの0%はアウトラインの描き始めのタイミングの設定。

0%{
stroke-dashoffset:3000;/*線の開始位置*/
fill:transparent; /*塗りつぶしの色・透明*/
}
————————————————-
@keyframesの100%はアウトラインが描き終わったタイミングの設定。

100%{
stroke-dashoffset:0;/*線の終了の位置*/
fill:#8FD3F5; /*塗りつぶしの色*/
}
————————————————-
上記はアウトラインが描き終わったタイミングで3色が同時に塗りつぶされます。

■@keyframesのタイミングを増やして、3色それぞれ塗りつぶされるタイミングに変化をつけてみました。

(「RERUN」をクリックするとアニメーションが繰り返されます)