複数色あるSVGをCSSでfillアニメーションさせる時のコード削減法

こんにちは。
CSSでよく下記のようなアニメーションをSVGに設定するときってありますよね。

完成図

ネットから拾ってきたHTML5のロゴです。
コード自体はかなり汎用的に使われているものですし、そちらの解説は深くはしませんが、
塗りのカラーが複数ある時、

えっこれキーフレームアニメーションに一つ一つfillの色設定しなきゃあかんの？！

そう絶望した方もいる？かもしれませんので、ベストな答えではないかもしれませんが対応策をば。

結論としましては、

fill:currentColor;を使う

です。

fill:currentColorはその要素に設定されている文字色を塗りに指定できるというものです。
要は

インラインスタイルで<path>要素などに文字色を設定し、キーフレームアニメーションではfill:currentColor;を100%の時点に設定するだけ

ということです。

実際にデモ用に作成したコードを見ていきましょう。

CSS

        .svg { width: 500px;}
        .svg path{stroke:none; stroke-width:1px; fill:transparent; stroke-dasharray:1425px; stroke-dashoffset:1425px; animation:anim 2s ease-in 0s forwards;}
        @keyframes anim{
            0%{stroke-dashoffset:1425px; stroke: #000;}
            30%{fill:transparent;}
            60%{stroke-dashoffset:0; stroke:none;}
            100%{fill:currentColor;}
        }

HTML

<!-- 一部のみ抜粋 -->
<path d="M255.554813,70.7657143 L232.31367,331.125451 L127.843868,360.087912 L23.6617143,331.166242 L0.445186813,70.7657143 L255.554813,70.7657143 L255.554813,70.7657143 Z" fill="#E44D26" style="color:#E44D26;"></path>
<!-- Fillと一緒の文字色を設定しているのがわかります -->

これでどれだけ色の多いSVGがあっても大変じゃないですね！
文字色を文字色の用途で使っている場合もあると思うので、そのあたりは完璧な対処法ではないのですが。。
お役に立てたら幸いです。