さぁ!検索しよう!

TweenMax.jsでクリスマスケーキのイラストにアニメーションを加える方法です。

DEMO

ケーキのイラストを制作する

始めにケーキのイラストを制作しなければいけません。ケーキのイラストはillustratorで制作します。イラストの制作において注意すべき点は以下の2点です。

1. レイヤー名はどんなオブジェクトか分かるように

レイヤー名は後にSVGコードのidとなります。ですから、一目でどんなオブジェクトか分かるようなレイヤー名にします。

【ここにレイヤー名のキャプチャー】

2. 文字はオブジェクトに変換する

後に筆記アニメーションを行なうために、文字はオブジェクトに変換します。

イラストが完成したらSVGコードを取得

JavaScriptでイラストにアニメーションを加えるために、イラストが完成したらSVGコードを取得します。
取得方法は簡単です。「別名で保存」に進むと別ウィンドウが開くので、生成されたSVGコードをコピーしておきます。コードを見ていくと、レイヤー名がそのままidとなっていることが確認できます。

SVGコードを編集

先ほどコピーしたSVGコードをHTMLファイルに貼り付けます。続けて、わかりやすくするために、直接タグに指定されていたスタイルを消して、代わりに汎用クラスを追加します。汎用クラスはカラー.color-*.shadowの2つです。

HTML

    <div class="container">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 514 522" enable-background="new 0 0 514 522" xml:space="preserve">
            <rect id="bg" class="color-bg" width="514" height="522"/>
            <g id="foundation">
                <rect class="color-brown-1" x="108.229" y="497" width="148.771" height="25"/>
                <g>
                    <rect class="color-brown-1" x="257" y="497" width="148.771" height="25"/>
                    <rect class="shadow" x="257" y="497" width="148.771" height="25"/>
                </g>
            </g>
            <g id="sponges">
                <g class="sponge">
                    <rect class="color-beige" x="132.416" y="467" width="124.584" height="30"/>
                    <g>
                        <rect class="color-beige" x="257" y="467" width="124.583" height="30"/>
                        <rect class="shadow" x="257" y="467" width="124.583" height="30"/>
                    </g>
                </g>
                <g class="sponge">
                    <rect class="color-beige" x="132.416" y="417" width="124.584" height="30"/>
                    <g>
                        <rect class="color-beige" x="257" y="417" width="124.583" height="30"/>
                        <rect class="shadow" x="257" y="417" width="124.583" height="30"/>
                    </g>
                </g>
                <g class="sponge">
                    <rect class="color-beige" x="132.416" y="367" width="124.584" height="30"/>
                    <g>
                        <rect class="color-beige" x="257" y="367" width="124.583" height="30"/>
                        <rect class="shadow" x="257" y="367" width="124.583" height="30"/>
                    </g>
                </g>
            </g>
            <!--/sponges-->
            <g id="sponge-creams">          
                    <rect class="sponge-cream color-white" x="132.416" y="447" width="124.584" height="20"/>
                    <g class="sponge-cream">
                        <rect class="color-white" x="257" y="447" width="124.584" height="20"/>
                        <rect class="shadow" x="257" y="447" width="124.584" height="20"/>
                    </g>
                    <rect class="sponge-cream color-white" x="132.416" y="397" width="124.584" height="20"/>
                    <g class="sponge-cream">
                        <rect class="color-white" x="257" y="397" width="124.584" height="20"/>
                        <rect class="shadow" x="257" y="397" width="124.584" height="20"/>
                    </g>
            </g>
            <!--/sponge-creams-->
            <g id="cut-strawberries-1">
                <g class="cut-strawberry">
                    <path class="color-red-1" d="M183.731,460.506c0,1.937-1.563,3.506-3.491,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
                            c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.491,1.569,3.491,3.506V460.506z"/>
                        <path class="color-red-2" d="M135.907,464.012c-1.638,0-2.967-1.401-2.967-3.13v-7.763c0-1.729,1.329-3.131,2.967-3.131h44.334
                            c1.638,0,2.967,1.401,2.967,3.131v7.763c0,1.729-1.329,3.13-2.967,3.13H135.907z"/>
                        <path class="color-red-3" d="M135.907,464.012c-1.348,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
                            c1.348,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H135.907z"/>
                        <path class="color-red-4" d="M135.907,464.012c-1.059,0-1.92-1.066-1.92-2.38v-9.265c0-1.312,0.861-2.379,1.92-2.379h44.334
                            c1.06,0,1.92,1.067,1.92,2.379v9.265c0,1.313-0.86,2.38-1.92,2.38H135.907z"/>
                        <path class="color-red-5" d="M135.907,464.012c-0.77,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
                            c0.77,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.626,2.004-1.396,2.004H135.907z"/>
                        <path class="color-red-6" d="M139.633,449.988h36.882c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.882
                            c-0.578,0-1.048-1.288-1.048-2.118v-9.786C138.585,451.279,139.055,449.988,139.633,449.988z"/>
                        <path class="color-red-7" d="M143.358,449.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.312,2.235-0.697,2.235h-29.432
                            c-0.386,0-0.698-1.679-0.698-2.231v-9.557C142.66,451.671,142.973,449.988,143.358,449.988z"/>
                        <path class="color-red-8" d="M147.084,449.988h21.98c0.192,0,0.349,2.068,0.349,2.345v9.327c0,0.276-0.156,2.352-0.349,2.352h-21.98
                            c-0.193,0-0.35-2.068-0.35-2.345v-9.327C146.734,452.063,146.891,449.988,147.084,449.988z"/>
                        <rect class="color-white" x="150.809" y="449.988" width="14.53" height="14.023"/>
                </g>
            <g class="cut-strawberry">
                <path class="color-red-1" d="M249.609,460.506c0,1.937-1.563,3.506-3.49,3.506h-44.335c-1.927,0-3.49-1.569-3.49-3.506v-7.012
                        c0-1.938,1.563-3.506,3.49-3.506h44.335c1.926,0,3.49,1.568,3.49,3.506V460.506z"/>
                    <path class="color-red-2" d="M201.784,464.012c-1.638,0-2.967-1.401-2.967-3.13v-7.763c0-1.729,1.329-3.131,2.967-3.131h44.335
                        c1.638,0,2.967,1.401,2.967,3.131v7.763c0,1.729-1.329,3.13-2.967,3.13H201.784z"/>
                    <path class="color-red-3" d="M201.784,464.012c-1.349,0-2.443-1.234-2.443-2.755v-8.514c0-1.521,1.094-2.755,2.443-2.755h44.335
                        c1.348,0,2.443,1.234,2.443,2.755v8.514c0,1.521-1.095,2.755-2.443,2.755H201.784z"/>
                    <path class="color-red-4" d="M201.784,464.012c-1.059,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.862-2.379,1.921-2.379h44.335
                        c1.059,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.86,2.38-1.919,2.38H201.784z"/>
                    <path class="color-red-5" d="M201.784,464.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.335
                        c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H201.784z"/>
                    <path class="color-red-6" d="M205.51,449.988h36.883c0.577,0,1.047,1.289,1.047,2.117v9.786c0,0.829-0.47,2.12-1.047,2.12H205.51
                        c-0.577,0-1.046-1.288-1.046-2.119v-9.785C204.464,451.279,204.933,449.988,205.51,449.988z"/>
                    <path class="color-red-7" d="M209.236,449.988h29.431c0.385,0,0.698,1.679,0.698,2.23v9.557c0,0.554-0.313,2.236-0.698,2.236h-29.431
                        c-0.385,0-0.699-1.68-0.699-2.231v-9.557C208.538,451.671,208.852,449.988,209.236,449.988z"/>
                    <path class="color-red-8" d="M212.961,449.988h21.981c0.192,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.156,2.352-0.348,2.352h-21.981
                        c-0.192,0-0.35-2.068-0.35-2.345v-9.327C212.611,452.063,212.769,449.988,212.961,449.988z"/>
                    <rect class="color-white" x="216.688" y="449.988" width="14.529" height="14.023"/>
            </g>
            <g class="cut-strawberry">
                <g>
                        <path class="color-red-1" d="M315.486,460.506c0,1.937-1.563,3.506-3.489,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
                            c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.489,1.569,3.489,3.506V460.506z"/>
                        <path class="color-red-2" d="M267.663,464.012c-1.64,0-2.968-1.401-2.968-3.13v-7.763c0-1.729,1.328-3.131,2.968-3.131h44.334
                            c1.636,0,2.968,1.401,2.968,3.131v7.763c0,1.729-1.332,3.13-2.968,3.13H267.663z"/>
                        <path class="color-red-3" d="M267.663,464.012c-1.349,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
                            c1.349,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H267.663z"/>
                        <path class="color-red-4" d="M267.663,464.012c-1.06,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.861-2.379,1.921-2.379h44.334
                            c1.06,0,1.921,1.067,1.921,2.379v9.265c0,1.313-0.861,2.38-1.921,2.38H267.663z"/>
                        <path class="color-red-5" d="M267.663,464.012c-0.771,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
                            c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.628,2.004-1.396,2.004H267.663z"/>
                        <path class="color-red-6" d="M271.389,449.988h36.883c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.883
                            c-0.578,0-1.047-1.288-1.047-2.118v-9.786C270.342,451.279,270.811,449.988,271.389,449.988z"/>
                        <path class="color-red-7" d="M275.115,449.988h29.43c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235h-29.43
                            c-0.387,0-0.699-1.679-0.699-2.231v-9.557C274.416,451.671,274.729,449.988,275.115,449.988z"/>
                        <path class="color-red-8" d="M278.84,449.988h21.98c0.193,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.154,2.352-0.348,2.352h-21.98
                            c-0.192,0-0.35-2.068-0.35-2.345v-9.327C278.49,452.063,278.647,449.988,278.84,449.988z"/>
                        <rect x="282.566" y="449.988" fill="#FFFFFF" width="14.527" height="14.023"/>
                    </g>
                    <g opacity="0.1">
                        <path d="M315.486,460.506c0,1.937-1.563,3.506-3.489,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
                            c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.489,1.569,3.489,3.506V460.506z"/>
                        <path d="M267.663,464.012c-1.64,0-2.968-1.401-2.968-3.13v-7.763c0-1.729,1.328-3.131,2.968-3.131h44.334
                            c1.636,0,2.968,1.401,2.968,3.131v7.763c0,1.729-1.332,3.13-2.968,3.13H267.663z"/>
                        <path d="M267.663,464.012c-1.349,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
                            c1.349,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H267.663z"/>
                        <path d="M267.663,464.012c-1.06,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.861-2.379,1.921-2.379h44.334
                            c1.06,0,1.921,1.067,1.921,2.379v9.265c0,1.313-0.861,2.38-1.921,2.38H267.663z"/>
                        <path d="M267.663,464.012c-0.771,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
                            c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.628,2.004-1.396,2.004H267.663z"/>
                        <path d="M271.389,449.988h36.883c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.883
                            c-0.578,0-1.047-1.288-1.047-2.118v-9.786C270.342,451.279,270.811,449.988,271.389,449.988z"/>
                        <path d="M275.115,449.988h29.43c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235h-29.43
                            c-0.387,0-0.699-1.679-0.699-2.231v-9.557C274.416,451.671,274.729,449.988,275.115,449.988z"/>
                        <path d="M278.84,449.988h21.98c0.193,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.154,2.352-0.348,2.352h-21.98
                            c-0.192,0-0.35-2.068-0.35-2.345v-9.327C278.49,452.063,278.647,449.988,278.84,449.988z"/>
                        <rect x="282.566" y="449.988" width="14.527" height="14.023"/>
                    </g>
            </g>
            <g class="cut-strawberry">
                <g>
                        <path class="color-red-1" d="M381.365,460.506c0,1.937-1.564,3.506-3.489,3.506H333.54c-1.927,0-3.489-1.569-3.489-3.506v-7.012
                            c0-1.937,1.563-3.506,3.489-3.506h44.336c1.925,0,3.489,1.569,3.489,3.506V460.506z"/>
                        <path class="color-red-2" d="M333.54,464.012c-1.638,0-2.966-1.401-2.966-3.13v-7.763c0-1.729,1.328-3.131,2.966-3.131h44.336
                            c1.637,0,2.966,1.401,2.966,3.131v7.763c0,1.729-1.329,3.13-2.966,3.13H333.54z"/>
                        <path class="color-red-3" d="M333.54,464.012c-1.349,0-2.442-1.233-2.442-2.755v-8.514c0-1.521,1.094-2.755,2.442-2.755h44.336
                            c1.349,0,2.442,1.234,2.442,2.755v8.514c0,1.521-1.094,2.755-2.442,2.755H333.54z"/>
                        <path class="color-red-4" d="M333.54,464.012c-1.058,0-1.919-1.066-1.919-2.38v-9.265c0-1.312,0.861-2.379,1.919-2.379h44.336
                            c1.058,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.861,2.38-1.919,2.38H333.54z"/>
                        <path class="color-red-5" d="M333.54,464.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.336
                            c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H333.54z"/>
                        <path class="color-red-6" d="M337.266,449.988h36.885c0.576,0,1.046,1.289,1.046,2.117v9.786c0,0.829-0.47,2.12-1.046,2.12h-36.885
                            c-0.576,0-1.045-1.288-1.045-2.118v-9.786C336.221,451.279,336.689,449.988,337.266,449.988z"/>
                        <path class="color-red-7" d="M340.992,449.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235
                            h-29.432c-0.385,0-0.697-1.679-0.697-2.231v-9.557C340.295,451.671,340.607,449.988,340.992,449.988z"/>
                        <path class="color-red-8" d="M344.717,449.988h21.982c0.191,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.156,2.352-0.348,2.352
                            h-21.982c-0.191,0-0.349-2.068-0.349-2.345v-9.327C344.368,452.063,344.525,449.988,344.717,449.988z"/>
                        <rect class="color-white" x="348.443" y="449.988" width="14.529" height="14.023"/>
                    </g>
            <g opacity="0.1">
                <path d="M381.365,460.506c0,1.937-1.564,3.506-3.489,3.506H333.54c-1.927,0-3.489-1.569-3.489-3.506v-7.012
                    c0-1.937,1.563-3.506,3.489-3.506h44.336c1.925,0,3.489,1.569,3.489,3.506V460.506z"/>
                <path d="M333.54,464.012c-1.638,0-2.966-1.401-2.966-3.13v-7.763c0-1.729,1.328-3.131,2.966-3.131h44.336
                    c1.637,0,2.966,1.401,2.966,3.131v7.763c0,1.729-1.329,3.13-2.966,3.13H333.54z"/>
                <path d="M333.54,464.012c-1.349,0-2.442-1.233-2.442-2.755v-8.514c0-1.521,1.094-2.755,2.442-2.755h44.336
                    c1.349,0,2.442,1.234,2.442,2.755v8.514c0,1.521-1.094,2.755-2.442,2.755H333.54z"/>
                <path d="M333.54,464.012c-1.058,0-1.919-1.066-1.919-2.38v-9.265c0-1.312,0.861-2.379,1.919-2.379h44.336
                    c1.058,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.861,2.38-1.919,2.38H333.54z"/>
                <path d="M333.54,464.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.336
                    c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H333.54z"/>
                <path d="M337.266,449.988h36.885c0.576,0,1.046,1.289,1.046,2.117v9.786c0,0.829-0.47,2.12-1.046,2.12h-36.885
                    c-0.576,0-1.045-1.288-1.045-2.118v-9.786C336.221,451.279,336.689,449.988,337.266,449.988z"/>
                <path d="M340.992,449.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235h-29.432
                    c-0.385,0-0.697-1.679-0.697-2.231v-9.557C340.295,451.671,340.607,449.988,340.992,449.988z"/>
                <path d="M344.717,449.988h21.982c0.191,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.156,2.352-0.348,2.352h-21.982
                    c-0.191,0-0.349-2.068-0.349-2.345v-9.327C344.368,452.063,344.525,449.988,344.717,449.988z"/>
                <rect x="348.443" y="449.988" width="14.529" height="14.023"/>
            </g>
    </g>
        </g>
        <g id="cut-strawberries-2">
    <g class="cut-strawberry">
        <path class="color-red-1" d="M183.731,410.506c0,1.937-1.563,3.506-3.491,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
                c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.491,1.569,3.491,3.506V410.506z"/>
            <path class="color-red-2" d="M135.907,414.012c-1.638,0-2.967-1.401-2.967-3.13v-7.763c0-1.729,1.329-3.131,2.967-3.131h44.334
                c1.638,0,2.967,1.401,2.967,3.131v7.763c0,1.729-1.329,3.13-2.967,3.13H135.907z"/>
            <path class="color-red-3" d="M135.907,414.012c-1.348,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
                c1.348,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H135.907z"/>
            <path class="color-red-4" d="M135.907,414.012c-1.059,0-1.92-1.066-1.92-2.38v-9.265c0-1.312,0.861-2.379,1.92-2.379h44.334
                c1.06,0,1.92,1.067,1.92,2.379v9.265c0,1.313-0.86,2.38-1.92,2.38H135.907z"/>
            <path class="color-red-5" d="M135.907,414.012c-0.77,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
                c0.77,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.626,2.004-1.396,2.004H135.907z"/>
            <path class="color-red-6" d="M139.633,399.988h36.882c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.882
                c-0.578,0-1.048-1.288-1.048-2.118v-9.786C138.585,401.279,139.055,399.988,139.633,399.988z"/>
            <path class="color-red-7" d="M143.358,399.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.312,2.235-0.697,2.235h-29.432
                c-0.386,0-0.698-1.679-0.698-2.231v-9.557C142.66,401.671,142.973,399.988,143.358,399.988z"/>
            <path class="color-red-8" d="M147.084,399.988h21.98c0.192,0,0.349,2.068,0.349,2.345v9.327c0,0.276-0.156,2.352-0.349,2.352h-21.98
                c-0.193,0-0.35-2.068-0.35-2.345v-9.327C146.734,402.063,146.891,399.988,147.084,399.988z"/>
            <rect class="color-white" x="150.809" y="399.988" width="14.53" height="14.023"/>
    </g>
    <g class="cut-strawberry">
        <path class="color-red-1" d="M249.609,410.506c0,1.937-1.563,3.506-3.49,3.506h-44.335c-1.927,0-3.49-1.569-3.49-3.506v-7.012
                c0-1.938,1.563-3.506,3.49-3.506h44.335c1.926,0,3.49,1.568,3.49,3.506V410.506z"/>
            <path class="color-red-2" d="M201.784,414.012c-1.638,0-2.967-1.401-2.967-3.13v-7.763c0-1.729,1.329-3.131,2.967-3.131h44.335
                c1.638,0,2.967,1.401,2.967,3.131v7.763c0,1.729-1.329,3.13-2.967,3.13H201.784z"/>
            <path class="color-red-3" d="M201.784,414.012c-1.349,0-2.443-1.234-2.443-2.755v-8.514c0-1.521,1.094-2.755,2.443-2.755h44.335
                c1.348,0,2.443,1.234,2.443,2.755v8.514c0,1.521-1.095,2.755-2.443,2.755H201.784z"/>
            <path class="color-red-4" d="M201.784,414.012c-1.059,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.862-2.379,1.921-2.379h44.335
                c1.059,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.86,2.38-1.919,2.38H201.784z"/>
            <path class="color-red-5" d="M201.784,414.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.335
                c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H201.784z"/>
            <path class="color-red-6" d="M205.51,399.988h36.883c0.577,0,1.047,1.289,1.047,2.117v9.786c0,0.829-0.47,2.12-1.047,2.12H205.51
                c-0.577,0-1.046-1.288-1.046-2.119v-9.785C204.464,401.279,204.933,399.988,205.51,399.988z"/>
            <path class="color-red-7" d="M209.236,399.988h29.431c0.385,0,0.698,1.679,0.698,2.23v9.557c0,0.554-0.313,2.236-0.698,2.236h-29.431
                c-0.385,0-0.699-1.68-0.699-2.231v-9.557C208.538,401.671,208.852,399.988,209.236,399.988z"/>
            <path class="color-red-8" d="M212.961,399.988h21.981c0.192,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.156,2.352-0.348,2.352h-21.981
                c-0.192,0-0.35-2.068-0.35-2.345v-9.327C212.611,402.063,212.769,399.988,212.961,399.988z"/>
            <rect class="color-white"x="216.688" y="399.988" width="14.529" height="14.023"/>
    </g>
    <g class="cut-strawberry">
        <g>
                <path class="color-red-1" d="M315.486,410.506c0,1.937-1.563,3.506-3.489,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
                    c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.489,1.569,3.489,3.506V410.506z"/>
                <path class="color-red-2" d="M267.663,414.012c-1.64,0-2.968-1.401-2.968-3.13v-7.763c0-1.729,1.328-3.131,2.968-3.131h44.334
                    c1.636,0,2.968,1.401,2.968,3.131v7.763c0,1.729-1.332,3.13-2.968,3.13H267.663z"/>
                <path class="color-red-3" d="M267.663,414.012c-1.349,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
                    c1.349,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H267.663z"/>
                <path class="color-red-4" d="M267.663,414.012c-1.06,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.861-2.379,1.921-2.379h44.334
                    c1.06,0,1.921,1.067,1.921,2.379v9.265c0,1.313-0.861,2.38-1.921,2.38H267.663z"/>
                <path class="color-red-5" d="M267.663,414.012c-0.771,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
                    c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.628,2.004-1.396,2.004H267.663z"/>
                <path class="color-red-6" d="M271.389,399.988h36.883c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.883
                    c-0.578,0-1.047-1.288-1.047-2.118v-9.786C270.342,401.279,270.811,399.988,271.389,399.988z"/>
                <path class="color-red-7" d="M275.115,399.988h29.43c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235h-29.43
                    c-0.387,0-0.699-1.679-0.699-2.231v-9.557C274.416,401.671,274.729,399.988,275.115,399.988z"/>
                <path class="color-red-8" d="M278.84,399.988h21.98c0.193,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.154,2.352-0.348,2.352h-21.98
                    c-0.192,0-0.35-2.068-0.35-2.345v-9.327C278.49,402.063,278.647,399.988,278.84,399.988z"/>
                <rect class="color-white" x="282.566" y="399.988" width="14.527" height="14.023"/>
            </g>
            <g opacity="0.1">
                <path d="M315.486,410.506c0,1.937-1.563,3.506-3.489,3.506h-44.334c-1.928,0-3.491-1.569-3.491-3.506v-7.012
                    c0-1.937,1.563-3.506,3.491-3.506h44.334c1.927,0,3.489,1.569,3.489,3.506V410.506z"/>
                <path d="M267.663,414.012c-1.64,0-2.968-1.401-2.968-3.13v-7.763c0-1.729,1.328-3.131,2.968-3.131h44.334
                    c1.636,0,2.968,1.401,2.968,3.131v7.763c0,1.729-1.332,3.13-2.968,3.13H267.663z"/>
                <path d="M267.663,414.012c-1.349,0-2.444-1.233-2.444-2.755v-8.514c0-1.521,1.096-2.755,2.444-2.755h44.334
                    c1.349,0,2.444,1.234,2.444,2.755v8.514c0,1.521-1.096,2.755-2.444,2.755H267.663z"/>
                <path d="M267.663,414.012c-1.06,0-1.921-1.066-1.921-2.38v-9.265c0-1.312,0.861-2.379,1.921-2.379h44.334
                    c1.06,0,1.921,1.067,1.921,2.379v9.265c0,1.313-0.861,2.38-1.921,2.38H267.663z"/>
                <path d="M267.663,414.012c-0.771,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.626-2.004,1.396-2.004h44.334
                    c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.628,2.004-1.396,2.004H267.663z"/>
                <path d="M271.389,399.988h36.883c0.578,0,1.048,1.289,1.048,2.117v9.786c0,0.829-0.47,2.12-1.048,2.12h-36.883
                    c-0.578,0-1.047-1.288-1.047-2.118v-9.786C270.342,401.279,270.811,399.988,271.389,399.988z"/>
                <path d="M275.115,399.988h29.43c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235h-29.43
                    c-0.387,0-0.699-1.679-0.699-2.231v-9.557C274.416,401.671,274.729,399.988,275.115,399.988z"/>
                <path d="M278.84,399.988h21.98c0.193,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.154,2.352-0.348,2.352h-21.98
                    c-0.192,0-0.35-2.068-0.35-2.345v-9.327C278.49,402.063,278.647,399.988,278.84,399.988z"/>
                <rect x="282.566" y="399.988" width="14.527" height="14.023"/>
            </g>
    </g>
    <g class="cut-strawberry">
        <g>
                <path class="color-red-1" d="M381.365,410.506c0,1.937-1.564,3.506-3.489,3.506H333.54c-1.927,0-3.489-1.569-3.489-3.506v-7.012
                    c0-1.937,1.563-3.506,3.489-3.506h44.336c1.925,0,3.489,1.569,3.489,3.506V410.506z"/>
                <path class="color-red-2" d="M333.54,414.012c-1.638,0-2.966-1.401-2.966-3.13v-7.763c0-1.729,1.328-3.131,2.966-3.131h44.336
                    c1.637,0,2.966,1.401,2.966,3.131v7.763c0,1.729-1.329,3.13-2.966,3.13H333.54z"/>
                <path class="color-red-3" d="M333.54,414.012c-1.349,0-2.442-1.233-2.442-2.755v-8.514c0-1.521,1.094-2.755,2.442-2.755h44.336
                    c1.349,0,2.442,1.234,2.442,2.755v8.514c0,1.521-1.094,2.755-2.442,2.755H333.54z"/>
                <path class="color-red-4" d="M333.54,414.012c-1.058,0-1.919-1.066-1.919-2.38v-9.265c0-1.312,0.861-2.379,1.919-2.379h44.336
                    c1.058,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.861,2.38-1.919,2.38H333.54z"/>
                <path class="color-red-5" d="M333.54,414.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.336
                    c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H333.54z"/>
                <path class="color-red-6" d="M337.266,399.988h36.885c0.576,0,1.046,1.289,1.046,2.117v9.786c0,0.829-0.47,2.12-1.046,2.12h-36.885
                    c-0.576,0-1.045-1.288-1.045-2.118v-9.786C336.221,401.279,336.689,399.988,337.266,399.988z"/>
                <path class="color-red-7" d="M340.992,399.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235
                    h-29.432c-0.385,0-0.697-1.679-0.697-2.231v-9.557C340.295,401.671,340.607,399.988,340.992,399.988z"/>
                <path class="color-red-8" d="M344.717,399.988h21.982c0.191,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.156,2.352-0.348,2.352
                    h-21.982c-0.191,0-0.349-2.068-0.349-2.345v-9.327C344.368,402.063,344.525,399.988,344.717,399.988z"/>
                <rect class="color-white" x="348.443" y="399.988" width="14.529" height="14.023"/>
            </g>
            <g opacity="0.1">
                <path d="M381.365,410.506c0,1.937-1.564,3.506-3.489,3.506H333.54c-1.927,0-3.489-1.569-3.489-3.506v-7.012
                    c0-1.937,1.563-3.506,3.489-3.506h44.336c1.925,0,3.489,1.569,3.489,3.506V410.506z"/>
                <path d="M333.54,414.012c-1.638,0-2.966-1.401-2.966-3.13v-7.763c0-1.729,1.328-3.131,2.966-3.131h44.336
                    c1.637,0,2.966,1.401,2.966,3.131v7.763c0,1.729-1.329,3.13-2.966,3.13H333.54z"/>
                <path d="M333.54,414.012c-1.349,0-2.442-1.233-2.442-2.755v-8.514c0-1.521,1.094-2.755,2.442-2.755h44.336
                    c1.349,0,2.442,1.234,2.442,2.755v8.514c0,1.521-1.094,2.755-2.442,2.755H333.54z"/>
                <path d="M333.54,414.012c-1.058,0-1.919-1.066-1.919-2.38v-9.265c0-1.312,0.861-2.379,1.919-2.379h44.336
                    c1.058,0,1.919,1.067,1.919,2.379v9.265c0,1.313-0.861,2.38-1.919,2.38H333.54z"/>
                <path d="M333.54,414.012c-0.769,0-1.396-0.898-1.396-2.004v-10.016c0-1.104,0.628-2.004,1.396-2.004h44.336
                    c0.769,0,1.396,0.899,1.396,2.004v10.016c0,1.105-0.627,2.004-1.396,2.004H333.54z"/>
                <path d="M337.266,399.988h36.885c0.576,0,1.046,1.289,1.046,2.117v9.786c0,0.829-0.47,2.12-1.046,2.12h-36.885
                    c-0.576,0-1.045-1.288-1.045-2.118v-9.786C336.221,401.279,336.689,399.988,337.266,399.988z"/>
                <path d="M340.992,399.988h29.432c0.385,0,0.697,1.679,0.697,2.231v9.557c0,0.553-0.313,2.235-0.697,2.235h-29.432
                    c-0.385,0-0.697-1.679-0.697-2.231v-9.557C340.295,401.671,340.607,399.988,340.992,399.988z"/>
                <path d="M344.717,399.988h21.982c0.191,0,0.348,2.068,0.348,2.345v9.327c0,0.276-0.156,2.352-0.348,2.352h-21.982
                    c-0.191,0-0.349-2.068-0.349-2.345v-9.327C344.368,402.063,344.525,399.988,344.717,399.988z"/>
                <rect x="348.443" y="399.988" width="14.529" height="14.023"/>
            </g>
    </g>
</g>
<!--/cut-strawberreis-->
<g id="strawberries-1">
        <g class="strawberry">
            <path class="color-red-1" d="M194.005,268.841c6.283,0,23.131,26.271,23.131,42.262c0,15.992-23.131,14.278-23.131,14.278
                s-23.13,1.714-23.13-14.278C170.875,295.112,187.724,268.841,194.005,268.841z"/>
            <path class="shadow" d="M194.005,268.841v56.54c0,0,23.131,1.714,23.131-14.278
                C217.136,295.112,200.288,268.841,194.005,268.841z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M236.167,268.841c6.282,0,23.13,26.271,23.13,42.262c0,15.992-23.13,14.278-23.13,14.278
                s-23.13,1.714-23.13-14.278C213.037,295.112,229.885,268.841,236.167,268.841z"/>
            <path class="shadow" d="M236.167,268.841v56.54c0,0,23.13,1.714,23.13-14.278
                C259.297,295.112,242.449,268.841,236.167,268.841z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M278.164,268.841c6.281,0,23.129,26.271,23.129,42.262c0,15.992-23.129,14.279-23.129,14.279
                s-23.131,1.713-23.131-14.279C255.033,295.112,271.881,268.841,278.164,268.841z"/>
            <path class="shadow" d="M278.164,268.841v56.541c0,0,23.129,1.713,23.129-14.279
                C301.293,295.112,284.445,268.841,278.164,268.841z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M320.16,268.841c6.281,0,23.131,26.271,23.131,42.262c0,15.992-23.131,14.279-23.131,14.279
                s-23.131,1.713-23.131-14.279C297.029,295.112,313.877,268.841,320.16,268.841z"/>
            <path class="shadow" d="M320.16,268.841v56.541c0,0,23.131,1.713,23.131-14.279
                C343.291,295.112,326.441,268.841,320.16,268.841z"/>
        </g>
    </g>
        <g id="strawberries-2">
        <g class="strawberry">
            <path class="color-red-1" d="M173.09,292.012c6.282,0,23.131,26.271,23.131,42.262c0,15.992-23.131,14.278-23.131,14.278
                s-23.13,1.714-23.13-14.278C149.96,318.283,166.808,292.012,173.09,292.012z"/>
            <path class="shadow" d="M173.09,292.012v56.54c0,0,23.131,1.714,23.131-14.278
                C196.221,318.283,179.372,292.012,173.09,292.012z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M215.087,292.012c6.281,0,23.13,26.271,23.13,42.262c0,15.992-23.13,14.278-23.13,14.278
                s-23.131,1.714-23.131-14.278C191.956,318.283,208.804,292.012,215.087,292.012z"/>
            <path class="shadow" d="M215.087,292.012v56.54c0,0,23.13,1.714,23.13-14.278
                C238.217,318.283,221.368,292.012,215.087,292.012z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M257.083,292.012c6.282,0,23.13,26.271,23.13,42.262c0,15.992-23.13,14.278-23.13,14.278
                s-23.13,1.714-23.13-14.278C233.953,318.283,250.801,292.012,257.083,292.012z"/>
            <path class="shadow" d="M257.083,292.012v56.54c0,0,23.13,1.714,23.13-14.278
                C280.213,318.283,263.365,292.012,257.083,292.012z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M299.08,292.012c6.281,0,23.13,26.271,23.13,42.262c0,15.992-23.13,14.278-23.13,14.278
                s-23.131,1.714-23.131-14.278C275.949,318.283,292.797,292.012,299.08,292.012z"/>
            <path class="shadow" d="M299.08,292.012v56.54c0,0,23.13,1.714,23.13-14.278
                C322.21,318.283,305.361,292.012,299.08,292.012z"/>
        </g>
        <g class="strawberry">
            <path class="color-red-1" d="M341.076,292.012c6.281,0,23.13,26.271,23.13,42.262c0,15.992-23.13,14.278-23.13,14.278
                s-23.131,1.714-23.131-14.278C317.945,318.283,334.793,292.012,341.076,292.012z"/>
            <path class="shadow"  d="M341.076,292.012v56.54c0,0,23.13,1.714,23.13-14.278
                C364.206,318.283,347.357,292.012,341.076,292.012z"/>
        </g>
</g>
<!--/strawberries-->
<g id="ribon">
    <g>
        <g>
            <path class="color-green" d="M145.573,277.868c0,0,8.312,3.198,16.825-4.737c0,0,3.62,11.371,15.221,7.271
                c4.101,11.602,15.221,7.271,15.221,7.271c-0.823,11.609,6.887,16.064,6.887,16.064l0.144,0.069c0,0-8.311-3.198-16.825,4.738
                c0,0-3.62-11.372-15.221-7.271c-4.101-11.601-15.221-7.271-15.221-7.271c0.823-11.609-6.888-16.064-6.888-16.064"/>
            <path class="shadow" d="M162.398,273.131c-8.514,7.936-16.825,4.737-16.825,4.737l0.144,0.069l54.01,25.8
                c0,0-7.71-4.455-6.887-16.064c0,0-11.12,4.33-15.221-7.271C166.019,284.502,162.398,273.131,162.398,273.131z"/>
        </g>
        <g>
            <path class="color-green" d="M227.192,249.019c0,0-4.455,7.711-16.065,6.889c0,0,4.33,11.12-7.271,15.221
                c4.101,11.602-7.271,15.221-7.271,15.221c7.937,8.514,4.738,16.824,4.738,16.824l-0.069,0.145c0,0,4.455-7.711,16.065-6.888
                c0,0-4.33-11.12,7.271-15.221c-4.101-11.602,7.271-15.222,7.271-15.222c-7.937-8.514-4.738-16.824-4.738-16.824"/>
            <path class="shadow" d="M211.126,255.907c11.61,0.822,16.065-6.889,16.065-6.889l-0.069,0.145l-25.8,54.01
                c0,0,3.198-8.311-4.738-16.824c0,0,11.372-3.619,7.271-15.221C215.457,267.027,211.126,255.907,211.126,255.907z"/>
        </g>
        <polygon class="color-bordeaux-1" fill="#993333" points="238.704,316.803 250.667,312.574 250.74,312.421 214.227,294.98 206.347,311.477 242.86,328.918 
            242.933,328.764         "/>
        <polygon class="color-bordeaux-1" points="178.867,337.952 183.095,349.915 183.249,349.989 200.69,313.476 184.193,305.596 
            166.751,342.108 166.905,342.182         "/>
        <polygon class="color-bordeaux-2" points="154.684,319.742 157.574,327.92 194.392,310.662 192.835,306.257 191.278,301.853 
            151.481,310.682         "/>
        <polygon class="color-bordeaux-2" points="246.04,287.45 248.931,295.628 209.446,305.341 207.889,300.936 206.332,296.531 242.837,278.39 
                    "/>

            <rect class="color-bordeaux-2" x="192.389" y="296.952" transform="matrix(0.9428 -0.3333 0.3333 0.9428 -89.7283 84.1356)" width="16" height="13.344"/>
        <g>
            <circle class="color-yellow" cx="190.6" cy="299.516" r="7.495"/>
            <circle class="color-yellow" cx="204.733" cy="294.521" r="7.495"/>
        </g>
        <g>
                <rect class="color-yellow" x="197.262" y="301.992" transform="matrix(0.3333 0.9428 -0.9428 0.3333 425.0155 14.9553)" width="9.343" height="12"/>
            <polygon class="color-yellow" points="209.044,328.11 218.895,324.629 210.768,309.823 203.49,312.396 196.211,314.969 
                199.194,331.593             "/>

                <ellipse class="color-yellow" transform="matrix(0.9428 -0.3333 0.3333 0.9428 -97.4 88.4273)" cx="209.044" cy="328.111" rx="10.448" ry="2.416"/>

                <ellipse class="shadow" transform="matrix(0.9428 -0.3333 0.3333 0.9428 -97.4 88.4273)" cx="209.044" cy="328.111" rx="10.448" ry="2.416"/>
        </g>
    </g>
</g>
<!--/ribon-->
<g id="chocolate">
        <ellipse class="color-brown-2" transform="matrix(0.989 0.1482 -0.1482 0.989 50.2142 -44.9285)" cx="326.507" cy="314.396" rx="62.497" ry="27.733"/>
    <g class="chocolate-message">
        <path class="color-gold" d="M283.333,311.413l0.655-4.758l0.14-0.928c0.021-0.139,0.046-0.276,0.077-0.413
            c0.029-0.137,0.056-0.284,0.08-0.441c0.021-0.138,0.036-0.279,0.049-0.424c0.012-0.145,0.025-0.286,0.036-0.427
            c0.016-0.422-0.022-0.771-0.112-1.043c-0.092-0.272-0.271-0.43-0.539-0.47l-0.014-0.002c-0.342-0.052-0.677,0.019-1.008,0.21
            s-0.647,0.457-0.948,0.799s-0.589,0.73-0.861,1.167c-0.273,0.436-0.527,0.866-0.761,1.294c-0.011,0.008-0.017,0.021-0.02,0.039
            l-0.73,4.874c-0.017,0.11-0.08,0.158-0.191,0.142c-0.12-0.018-0.172-0.083-0.155-0.193l0.907-6.051
            c0.032-0.212,0.062-0.43,0.09-0.651c0.029-0.222,0.046-0.442,0.05-0.658c0.016-0.422-0.01-0.768-0.078-1.038
            c-0.068-0.27-0.208-0.42-0.421-0.452c-0.194-0.028-0.413,0.016-0.657,0.135s-0.487,0.295-0.729,0.527
            c-0.243,0.233-0.474,0.517-0.694,0.853c-0.221,0.335-0.408,0.703-0.562,1.104c-0.017,0.045-0.041,0.072-0.076,0.081
            c-0.034,0.01-0.062,0.013-0.08,0.01l-0.055-0.008c-0.09-0.032-0.125-0.108-0.106-0.229c0.155-0.41,0.353-0.796,0.591-1.157
            c0.237-0.36,0.494-0.668,0.769-0.924c0.273-0.258,0.555-0.45,0.845-0.582c0.288-0.132,0.557-0.178,0.806-0.141
            c0.176,0.026,0.318,0.097,0.429,0.212c0.11,0.116,0.195,0.259,0.255,0.428c0.06,0.17,0.094,0.359,0.105,0.568
            c0.011,0.209,0.01,0.425-0.006,0.65c0.004,0.227-0.009,0.457-0.039,0.688c-0.029,0.231-0.061,0.453-0.093,0.665l-0.022,0.152
            c0.226-0.372,0.469-0.741,0.731-1.107c0.264-0.366,0.543-0.688,0.839-0.964s0.604-0.489,0.925-0.641
            c0.319-0.149,0.655-0.203,1.007-0.159c0.213,0.031,0.384,0.104,0.513,0.218s0.229,0.258,0.295,0.434
            c0.069,0.175,0.113,0.371,0.133,0.587c0.019,0.215,0.021,0.435,0.007,0.658c-0.009,0.188-0.022,0.374-0.042,0.561
            c-0.018,0.186-0.04,0.371-0.068,0.556c-0.012,0.083-0.026,0.161-0.043,0.234c-0.016,0.072-0.028,0.146-0.04,0.22
            c0.197-0.366,0.421-0.727,0.672-1.081c0.252-0.354,0.529-0.666,0.835-0.937c0.304-0.271,0.633-0.479,0.984-0.623
            c0.353-0.146,0.732-0.188,1.138-0.127l0.015,0.002c0.194,0.029,0.358,0.11,0.493,0.244c0.137,0.133,0.245,0.291,0.326,0.474
            c0.081,0.182,0.135,0.373,0.161,0.576c0.026,0.201,0.027,0.386,0.003,0.552l-0.974,6.493c-0.017,0.111-0.012,0.226,0.019,0.343
            c0.029,0.117,0.078,0.227,0.143,0.326c0.065,0.1,0.144,0.187,0.236,0.262s0.19,0.12,0.292,0.136l0.041,0.006
            c0.175,0.026,0.354,0.002,0.535-0.074c0.181-0.077,0.354-0.184,0.515-0.32c0.163-0.136,0.309-0.291,0.438-0.465
            c0.13-0.174,0.236-0.345,0.318-0.512c0.013-0.026,0.038-0.049,0.073-0.067c0.036-0.018,0.067-0.024,0.096-0.021l0.055,0.008
            c0.076,0.06,0.11,0.116,0.103,0.171l-0.011,0.069c-0.075,0.188-0.189,0.378-0.341,0.572s-0.324,0.369-0.518,0.523
            c-0.193,0.155-0.402,0.277-0.628,0.367c-0.225,0.088-0.453,0.114-0.685,0.08l-0.041-0.006c-0.158-0.023-0.299-0.088-0.425-0.191
            s-0.233-0.223-0.321-0.359c-0.088-0.135-0.153-0.284-0.195-0.446c-0.041-0.163-0.052-0.313-0.031-0.451l0.968-6.451
            c0.021-0.147,0.02-0.307-0.007-0.476c-0.027-0.169-0.071-0.327-0.135-0.473c-0.063-0.147-0.143-0.271-0.241-0.376
            c-0.098-0.104-0.205-0.165-0.326-0.184c-0.415-0.062-0.804,0.007-1.163,0.208c-0.361,0.2-0.699,0.475-1.016,0.824
            c-0.316,0.349-0.603,0.742-0.856,1.181c-0.255,0.438-0.482,0.86-0.685,1.264c-0.011,0.008-0.018,0.017-0.019,0.025l-0.031,0.024
            l-0.64,4.73c-0.01,0.065-0.034,0.108-0.075,0.131c-0.041,0.021-0.085,0.03-0.131,0.023
            C283.365,311.574,283.317,311.515,283.333,311.413z"/>
        <path class="color-gold" d="M291.37,312.851c-0.205-0.138-0.362-0.301-0.471-0.487c-0.109-0.187-0.182-0.386-0.216-0.599
            c-0.033-0.213-0.045-0.418-0.036-0.614c0.005-0.028,0.008-0.06,0.009-0.099c0.001-0.037,0.003-0.069,0.008-0.098
            c0.033-0.221,0.104-0.453,0.21-0.696c0.107-0.244,0.244-0.464,0.411-0.66c0.165-0.198,0.351-0.36,0.555-0.491
            c0.203-0.129,0.42-0.202,0.647-0.214l0.374,0.056c0.229,0.054,0.415,0.186,0.563,0.396c0.147,0.21,0.202,0.445,0.163,0.703
            c-0.049,0.324-0.176,0.562-0.383,0.714c-0.207,0.153-0.448,0.266-0.723,0.338c-0.447,0.085-0.883,0.094-1.307,0.03l-0.181-0.027
            l-0.013,0.083c-0.017,0.178-0.013,0.353,0.014,0.526c0.025,0.175,0.084,0.336,0.174,0.486c0.092,0.15,0.224,0.279,0.396,0.385
            c0.172,0.106,0.397,0.18,0.675,0.222c0.295,0.044,0.565,0.03,0.813-0.041s0.47-0.177,0.671-0.316
            c0.199-0.141,0.38-0.305,0.541-0.493c0.16-0.188,0.311-0.376,0.452-0.562c0.052-0.04,0.111-0.055,0.177-0.045l0.055,0.009
            c0.06,0.047,0.083,0.103,0.073,0.167c-0.005,0.036-0.013,0.063-0.025,0.081c-0.143,0.195-0.302,0.393-0.479,0.594
            c-0.176,0.199-0.378,0.38-0.604,0.539c-0.227,0.16-0.482,0.279-0.769,0.359c-0.286,0.079-0.604,0.093-0.954,0.04
            C291.85,313.086,291.576,312.99,291.37,312.851z M292.407,310.749c0.225-0.051,0.415-0.134,0.567-0.248
            c0.154-0.113,0.248-0.281,0.281-0.503c0.026-0.175-0.017-0.332-0.128-0.473c-0.111-0.139-0.245-0.22-0.401-0.243l-0.069-0.011
            c-0.166-0.024-0.333-0.002-0.498,0.066c-0.167,0.069-0.319,0.17-0.456,0.3c-0.138,0.131-0.26,0.285-0.366,0.462
            c-0.106,0.178-0.188,0.362-0.245,0.551l-0.047,0.12l0.249,0.038C291.664,310.864,292.034,310.844,292.407,310.749z"/>
        <path class="color-gold" d="M297.031,313.757c-0.134-0.082-0.251-0.184-0.35-0.307c-0.101-0.124-0.179-0.259-0.237-0.404
            s-0.077-0.288-0.056-0.427c0.041-0.276,0.106-0.526,0.196-0.748c0.09-0.223,0.188-0.431,0.291-0.622
            c0.055-0.114,0.106-0.222,0.155-0.323c0.048-0.102,0.082-0.188,0.103-0.262l0.055-0.175l-0.025-0.019
            c0.003-0.019-0.043-0.059-0.138-0.12c-0.039-0.053-0.089-0.104-0.146-0.156c-0.058-0.051-0.109-0.089-0.152-0.114
            c-0.044-0.025-0.077-0.052-0.102-0.079s-0.059-0.054-0.102-0.079l-0.042-0.006l-0.004,0.026c-0.178,0.305-0.4,0.611-0.668,0.92
            c-0.269,0.309-0.557,0.578-0.864,0.806c-0.054,0.039-0.094,0.056-0.121,0.052c-0.064-0.01-0.103-0.038-0.114-0.088
            c-0.035-0.015-0.049-0.055-0.039-0.119c0.007-0.047,0.032-0.085,0.074-0.116c0.285-0.202,0.553-0.45,0.805-0.743
            c0.252-0.292,0.461-0.587,0.629-0.883l0.041-0.093l-0.194-0.212c-0.172-0.178-0.243-0.362-0.214-0.557
            c0.02-0.13,0.082-0.25,0.188-0.361s0.235-0.165,0.386-0.161l0.042,0.007c0.11,0.016,0.222,0.075,0.333,0.177
            c0.112,0.102,0.157,0.235,0.132,0.401c-0.029,0.193-0.103,0.4-0.22,0.618l-0.017,0.013l0.089,0.069
            c0.024,0.022,0.05,0.045,0.075,0.067c0.023,0.023,0.054,0.047,0.088,0.071l-0.024-0.033c0.062,0.038,0.117,0.077,0.168,0.117
            c0.05,0.042,0.101,0.079,0.152,0.114c0.007,0.012,0.02,0.025,0.036,0.042c0.017,0.016,0.032,0.035,0.048,0.056
            c0.05,0.047,0.103,0.102,0.159,0.166c0.057,0.065,0.084,0.136,0.082,0.211l-0.006,0.041c-0.02,0.129-0.058,0.259-0.114,0.387
            c-0.059,0.129-0.121,0.267-0.19,0.418c-0.085,0.185-0.177,0.391-0.277,0.616c-0.1,0.226-0.169,0.468-0.207,0.726
            c-0.015,0.093,0,0.189,0.041,0.29s0.099,0.194,0.17,0.28c0.072,0.087,0.156,0.16,0.251,0.221c0.095,0.063,0.188,0.1,0.28,0.113
            c0.203,0.03,0.399,0.006,0.592-0.074c0.19-0.079,0.377-0.19,0.56-0.334c0.181-0.143,0.356-0.302,0.525-0.479
            c0.168-0.179,0.33-0.354,0.488-0.528l-0.002,0.014c0.028-0.062,0.089-0.086,0.181-0.072c0.028,0.005,0.051,0.013,0.067,0.024
            c0.067,0.058,0.097,0.118,0.087,0.183c-0.002,0.01-0.009,0.024-0.022,0.046c-0.012,0.022-0.02,0.038-0.021,0.047
            c-0.157,0.166-0.325,0.345-0.506,0.54s-0.374,0.371-0.582,0.529c-0.207,0.157-0.429,0.28-0.663,0.367
            c-0.235,0.087-0.486,0.111-0.754,0.071C297.297,313.889,297.166,313.838,297.031,313.757z M296.284,309.248l0.097,0.114
            l0.04-0.078c0.039-0.07,0.067-0.137,0.087-0.199c0.018-0.064,0.031-0.118,0.038-0.165c0.007-0.046-0.011-0.086-0.052-0.121
            c-0.042-0.034-0.087-0.056-0.133-0.063c-0.049,0.012-0.096,0.04-0.141,0.086c-0.044,0.044-0.069,0.09-0.076,0.137
            C296.128,309.07,296.174,309.167,296.284,309.248z"/>
        <path class="color-gold" d="M301.987,314.5c-0.133-0.082-0.25-0.185-0.35-0.308s-0.179-0.258-0.236-0.403
            c-0.06-0.146-0.077-0.288-0.057-0.427c0.042-0.277,0.106-0.526,0.197-0.748c0.089-0.223,0.187-0.431,0.29-0.623
            c0.055-0.113,0.107-0.222,0.155-0.322c0.048-0.102,0.083-0.188,0.103-0.262l0.055-0.175l-0.025-0.019
            c0.003-0.02-0.043-0.059-0.137-0.12c-0.04-0.054-0.09-0.104-0.146-0.156c-0.059-0.051-0.11-0.089-0.153-0.114
            s-0.077-0.053-0.102-0.079c-0.024-0.028-0.058-0.054-0.102-0.079l-0.041-0.006l-0.005,0.026c-0.178,0.305-0.4,0.61-0.668,0.92
            c-0.269,0.309-0.557,0.577-0.864,0.806c-0.054,0.039-0.093,0.056-0.121,0.051c-0.063-0.009-0.103-0.037-0.114-0.087
            c-0.035-0.015-0.048-0.055-0.038-0.119c0.007-0.047,0.031-0.085,0.073-0.116c0.285-0.202,0.554-0.45,0.806-0.744
            c0.251-0.291,0.46-0.586,0.628-0.882l0.041-0.093l-0.194-0.212c-0.171-0.178-0.242-0.362-0.213-0.558
            c0.02-0.129,0.081-0.249,0.188-0.36c0.106-0.111,0.234-0.165,0.386-0.161l0.041,0.006c0.11,0.017,0.222,0.076,0.334,0.178
            s0.156,0.235,0.132,0.401c-0.029,0.193-0.104,0.399-0.221,0.618l-0.017,0.013l0.089,0.069c0.024,0.022,0.05,0.045,0.075,0.067
            c0.024,0.023,0.054,0.047,0.088,0.07l-0.023-0.032c0.061,0.038,0.116,0.077,0.167,0.117c0.051,0.041,0.101,0.079,0.152,0.114
            c0.008,0.012,0.02,0.025,0.036,0.042c0.017,0.016,0.032,0.035,0.049,0.056c0.049,0.047,0.102,0.101,0.158,0.166
            s0.084,0.136,0.082,0.21l-0.006,0.042c-0.02,0.129-0.058,0.259-0.114,0.387c-0.059,0.128-0.121,0.267-0.19,0.418
            c-0.085,0.185-0.177,0.39-0.277,0.616c-0.1,0.226-0.168,0.468-0.207,0.726c-0.014,0.093,0,0.188,0.042,0.29
            c0.041,0.1,0.098,0.194,0.17,0.28c0.071,0.087,0.155,0.16,0.25,0.221c0.095,0.062,0.188,0.1,0.28,0.113
            c0.203,0.03,0.4,0.006,0.592-0.074c0.19-0.08,0.377-0.191,0.56-0.334c0.182-0.143,0.356-0.302,0.525-0.479
            c0.168-0.179,0.33-0.354,0.488-0.528l-0.002,0.014c0.028-0.062,0.09-0.086,0.182-0.072c0.027,0.004,0.05,0.013,0.067,0.024
            c0.066,0.058,0.096,0.118,0.086,0.183c-0.002,0.01-0.009,0.024-0.021,0.046c-0.013,0.022-0.02,0.037-0.021,0.047
            c-0.157,0.166-0.325,0.345-0.505,0.54c-0.181,0.195-0.375,0.37-0.582,0.528c-0.208,0.158-0.43,0.281-0.664,0.368
            c-0.235,0.087-0.486,0.11-0.754,0.07C302.254,314.632,302.122,314.581,301.987,314.5z M301.24,309.991l0.097,0.114l0.041-0.079
            c0.038-0.069,0.066-0.136,0.086-0.199c0.019-0.063,0.031-0.117,0.038-0.164c0.007-0.046-0.011-0.087-0.052-0.121
            c-0.042-0.035-0.087-0.056-0.133-0.063c-0.049,0.012-0.096,0.04-0.141,0.086c-0.044,0.044-0.069,0.09-0.076,0.137
            C301.084,309.813,301.131,309.91,301.24,309.991z"/>
        <path class="color-gold" d="M306.042,320.267c-0.126-0.104-0.23-0.225-0.313-0.364c-0.084-0.141-0.142-0.288-0.175-0.444
            s-0.04-0.299-0.021-0.428c0.044-0.295,0.132-0.565,0.263-0.81c0.132-0.245,0.295-0.474,0.492-0.684
            c0.196-0.212,0.422-0.409,0.677-0.593c0.254-0.184,0.521-0.363,0.803-0.537l0.187-0.114l0.326-2.174
            c-0.355,0.353-0.74,0.633-1.153,0.839c-0.413,0.208-0.864,0.274-1.354,0.201c-0.166-0.025-0.329-0.09-0.487-0.193
            c-0.159-0.104-0.302-0.236-0.429-0.397c-0.128-0.16-0.223-0.344-0.286-0.553c-0.063-0.207-0.077-0.426-0.043-0.656l0.38-2.534
            c0.019-0.12,0.087-0.171,0.207-0.153c0.036,0.006,0.072,0.025,0.105,0.059c0.032,0.033,0.043,0.081,0.033,0.146l-0.38,2.534
            c-0.027,0.185-0.018,0.357,0.029,0.521c0.046,0.163,0.116,0.308,0.21,0.436c0.095,0.127,0.205,0.231,0.328,0.311
            c0.126,0.08,0.253,0.13,0.382,0.149c0.471,0.07,0.909-0.021,1.315-0.277c0.407-0.255,0.804-0.604,1.191-1.046l0.047-0.035
            l0.324-2.16c0.007-0.047,0.027-0.086,0.061-0.118c0.032-0.033,0.071-0.046,0.118-0.039c0.046,0.007,0.085,0.032,0.116,0.074
            s0.044,0.086,0.037,0.133l-0.332,2.215l-0.002,0.014l-0.369,2.465l0.282-0.184c0.438-0.284,0.875-0.584,1.31-0.9
            c0.435-0.317,0.847-0.702,1.234-1.153l-0.004,0.027c0.016-0.045,0.041-0.069,0.074-0.073c0.034-0.005,0.065-0.005,0.093-0.001
            c0.037,0.006,0.066,0.024,0.091,0.057l-0.01-0.029c0.057,0.056,0.082,0.115,0.072,0.18c-0.002,0.009-0.009,0.023-0.021,0.04
            c-0.013,0.017-0.02,0.035-0.022,0.053c-0.432,0.492-0.911,0.92-1.438,1.286c-0.526,0.364-1.05,0.705-1.569,1.023l-0.158,0.118
            l-0.42,2.797c-0.021,0.138-0.075,0.283-0.165,0.436c-0.089,0.151-0.195,0.283-0.321,0.397c-0.125,0.113-0.263,0.203-0.415,0.271
            c-0.151,0.067-0.306,0.088-0.462,0.064C306.314,320.436,306.169,320.371,306.042,320.267z M306.85,320.077
            c0.111-0.05,0.213-0.117,0.306-0.202c0.094-0.085,0.172-0.185,0.236-0.298c0.064-0.112,0.104-0.225,0.121-0.335l0.378-2.52
            l-0.286,0.212c-0.46,0.289-0.842,0.604-1.147,0.945c-0.306,0.342-0.493,0.743-0.563,1.204c-0.016,0.102-0.011,0.212,0.014,0.327
            c0.025,0.118,0.068,0.228,0.127,0.331c0.061,0.104,0.133,0.19,0.216,0.259c0.085,0.07,0.178,0.111,0.28,0.127
            C306.633,320.144,306.738,320.126,306.85,320.077z"/>
        <path class="color-gold" d="M322.864,317.877c-0.609-0.092-1.178-0.288-1.703-0.588c-0.525-0.301-0.973-0.685-1.342-1.15
            c-0.369-0.465-0.64-0.996-0.81-1.594c-0.17-0.596-0.203-1.24-0.099-1.933c0.092-0.618,0.315-1.2,0.672-1.746
            c0.355-0.547,0.789-1.015,1.301-1.405c0.511-0.391,1.072-0.684,1.682-0.881c0.61-0.195,1.215-0.249,1.815-0.159
            c0.405,0.061,0.74,0.144,1.003,0.249c0.262,0.105,0.479,0.226,0.653,0.36c0.173,0.135,0.316,0.283,0.429,0.447
            c0.112,0.163,0.226,0.338,0.339,0.524c-0.001,0.009-0.001,0.023,0.001,0.043c0.002,0.019,0.001,0.037-0.002,0.056
            c-0.004,0.028-0.015,0.05-0.03,0.066c-0.017,0.017-0.03,0.028-0.041,0.036c-0.021,0.017-0.044,0.024-0.067,0.025
            c-0.023,0.002-0.046,0.001-0.063-0.002c-0.065-0.01-0.099-0.033-0.104-0.073c-0.089-0.154-0.182-0.303-0.279-0.444
            c-0.096-0.142-0.223-0.271-0.38-0.39c-0.157-0.117-0.354-0.223-0.59-0.314c-0.237-0.094-0.544-0.167-0.922-0.224
            c-0.545-0.081-1.1-0.032-1.665,0.146c-0.565,0.18-1.087,0.453-1.566,0.819c-0.479,0.367-0.888,0.807-1.225,1.318
            c-0.336,0.51-0.548,1.057-0.635,1.639c-0.094,0.628-0.06,1.217,0.104,1.771c0.162,0.553,0.414,1.044,0.756,1.473
            c0.341,0.429,0.761,0.781,1.257,1.059s1.03,0.459,1.604,0.545c0.785,0.108,1.492,0.035,2.12-0.22
            c0.628-0.256,1.184-0.611,1.668-1.066c0.025-0.044,0.051-0.066,0.073-0.067c0.023-0.001,0.05,0.001,0.077,0.005
            c0.019,0.002,0.039,0.008,0.062,0.016c0.022,0.009,0.041,0.023,0.057,0.044c0.007,0.021,0.017,0.038,0.028,0.054
            s0.016,0.038,0.012,0.065c-0.008,0.046-0.027,0.077-0.057,0.091c-0.542,0.522-1.147,0.918-1.819,1.186
            c-0.674,0.268-1.43,0.342-2.271,0.226L322.864,317.877z"/>
        <path class="color-gold" d="M331.58,318.942c-0.11-0.083-0.199-0.183-0.266-0.301c-0.067-0.119-0.118-0.242-0.15-0.37
            c-0.033-0.128-0.041-0.247-0.024-0.358l0.302-2.008c0.028-0.192,0.031-0.386,0.008-0.578c-0.022-0.191-0.099-0.298-0.228-0.316
            c-0.287-0.044-0.564-0.02-0.833,0.073c-0.269,0.092-0.533,0.226-0.796,0.403c-0.147,0.101-0.288,0.203-0.421,0.306
            c-0.134,0.103-0.271,0.21-0.409,0.321c-0.107,0.087-0.209,0.168-0.306,0.244c-0.096,0.075-0.197,0.152-0.303,0.229l-0.258,1.718
            c-0.01,0.064-0.036,0.107-0.077,0.129c-0.04,0.023-0.079,0.031-0.115,0.025c-0.111-0.017-0.158-0.085-0.14-0.204l0.251-1.676
            c-0.008-0.011-0.008-0.044,0-0.099l0.002-0.014c0.003-0.019,0.01-0.032,0.021-0.04l0.162-1.08l-0.412,0.477l-0.576,0.636
            l0.016-0.012c-0.022,0.025-0.041,0.046-0.059,0.063c-0.017,0.016-0.047,0.021-0.094,0.014c-0.028-0.005-0.054-0.018-0.079-0.04
            c-0.035-0.015-0.059-0.039-0.067-0.074c-0.008-0.034-0.011-0.064-0.006-0.093c0.005-0.037,0.023-0.067,0.056-0.091l-0.015-0.002
            c0.071-0.093,0.146-0.182,0.225-0.264c0.077-0.083,0.156-0.17,0.236-0.262c0.123-0.132,0.24-0.267,0.351-0.4
            c0.109-0.135,0.222-0.269,0.337-0.403l0.182-0.171l0.72-4.804c0.061-0.406,0.175-0.729,0.343-0.968
            c0.095-0.128,0.204-0.231,0.33-0.312s0.28-0.107,0.465-0.079c0.167,0.024,0.3,0.118,0.404,0.28c0.103,0.161,0.183,0.35,0.24,0.566
            s0.092,0.441,0.104,0.674c0.013,0.233,0.006,0.433-0.019,0.6c-0.108,0.72-0.339,1.392-0.693,2.02
            c-0.354,0.626-0.77,1.215-1.248,1.766l-0.329,0.404l-0.187,1.246c0.052-0.04,0.104-0.079,0.152-0.118
            c0.048-0.04,0.099-0.08,0.151-0.12c0.203-0.158,0.411-0.317,0.624-0.479c0.213-0.162,0.435-0.304,0.665-0.425
            c0.23-0.122,0.466-0.211,0.706-0.27c0.24-0.058,0.489-0.068,0.748-0.029c0.147,0.022,0.261,0.083,0.34,0.186
            c0.079,0.102,0.133,0.218,0.16,0.35c0.026,0.132,0.041,0.266,0.039,0.401c-0.002,0.138-0.009,0.252-0.022,0.344l-0.302,2.008
            c-0.024,0.166,0.015,0.335,0.121,0.507c0.107,0.171,0.239,0.269,0.396,0.292c0.193,0.029,0.384,0.004,0.57-0.077
            c0.187-0.079,0.37-0.191,0.553-0.334c0.13-0.112,0.271-0.249,0.422-0.411c0.151-0.161,0.303-0.334,0.453-0.52l0.166-0.159
            l-0.032,0.023c0.025-0.044,0.051-0.065,0.074-0.066c0.023-0.002,0.05,0,0.076,0.004c0.047,0.007,0.082,0.021,0.107,0.044
            c0.043,0.026,0.06,0.075,0.049,0.149c-0.006,0.037-0.015,0.06-0.024,0.066c-0.026,0.044-0.051,0.081-0.073,0.11
            c-0.023,0.029-0.067,0.072-0.133,0.129l0.028,0.004c-0.138,0.158-0.29,0.324-0.457,0.497c-0.168,0.174-0.347,0.331-0.538,0.472
            c-0.19,0.142-0.396,0.253-0.616,0.332c-0.22,0.081-0.445,0.104-0.675,0.069C331.815,319.077,331.689,319.025,331.58,318.942z
             M328.515,314.18c0.459-0.544,0.854-1.111,1.189-1.698c0.332-0.587,0.548-1.203,0.645-1.85c0.023-0.156,0.029-0.335,0.017-0.535
            c-0.013-0.199-0.042-0.398-0.088-0.593c-0.048-0.188-0.104-0.33-0.17-0.43c-0.064-0.1-0.135-0.154-0.208-0.165
            c-0.176-0.026-0.324,0.05-0.445,0.23c-0.064,0.112-0.126,0.24-0.185,0.383c-0.06,0.142-0.1,0.291-0.124,0.448L328.515,314.18z"/>
        <path class="color-gold" d="M336.447,319.665c-0.134-0.081-0.251-0.184-0.35-0.307c-0.101-0.124-0.179-0.258-0.237-0.404
            c-0.059-0.145-0.077-0.288-0.056-0.426c0.041-0.277,0.106-0.526,0.196-0.749s0.188-0.43,0.291-0.622
            c0.055-0.114,0.106-0.222,0.155-0.323c0.048-0.102,0.082-0.188,0.103-0.261l0.055-0.176l-0.025-0.019
            c0.003-0.019-0.043-0.058-0.138-0.119c-0.039-0.054-0.089-0.105-0.146-0.156c-0.058-0.052-0.109-0.09-0.152-0.115
            c-0.044-0.024-0.077-0.052-0.102-0.079s-0.059-0.053-0.102-0.078l-0.042-0.007l-0.004,0.027c-0.178,0.304-0.4,0.61-0.668,0.919
            c-0.269,0.31-0.557,0.578-0.864,0.806c-0.054,0.039-0.094,0.056-0.121,0.052c-0.063-0.01-0.103-0.038-0.114-0.087
            c-0.035-0.016-0.049-0.055-0.039-0.12c0.007-0.046,0.032-0.085,0.074-0.116c0.285-0.201,0.553-0.45,0.805-0.743
            c0.252-0.292,0.461-0.586,0.629-0.883l0.041-0.092l-0.194-0.213c-0.172-0.177-0.243-0.362-0.214-0.557
            c0.02-0.129,0.082-0.249,0.188-0.36s0.235-0.166,0.386-0.161l0.042,0.006c0.11,0.017,0.222,0.075,0.333,0.178
            c0.112,0.102,0.157,0.235,0.132,0.401c-0.029,0.193-0.103,0.399-0.22,0.618l-0.017,0.012l0.089,0.069
            c0.024,0.022,0.05,0.045,0.075,0.068c0.023,0.023,0.054,0.046,0.088,0.07l-0.023-0.032c0.061,0.038,0.116,0.076,0.167,0.116
            c0.05,0.042,0.101,0.08,0.152,0.115c0.007,0.011,0.02,0.024,0.036,0.041s0.032,0.035,0.048,0.057
            c0.05,0.046,0.103,0.101,0.159,0.166c0.057,0.064,0.084,0.136,0.082,0.21l-0.006,0.041c-0.02,0.13-0.058,0.26-0.114,0.387
            c-0.059,0.129-0.121,0.268-0.19,0.418c-0.085,0.185-0.177,0.391-0.277,0.616c-0.1,0.227-0.169,0.469-0.207,0.727
            c-0.015,0.093,0,0.188,0.041,0.289s0.099,0.194,0.171,0.28c0.071,0.087,0.155,0.161,0.25,0.222
            c0.095,0.062,0.188,0.099,0.28,0.112c0.203,0.031,0.4,0.007,0.592-0.073c0.19-0.08,0.377-0.191,0.56-0.334
            c0.182-0.143,0.356-0.303,0.525-0.48c0.168-0.179,0.33-0.354,0.488-0.528l-0.002,0.014c0.028-0.062,0.089-0.085,0.181-0.071
            c0.028,0.004,0.051,0.013,0.067,0.023c0.067,0.058,0.097,0.118,0.087,0.183c-0.002,0.01-0.009,0.025-0.022,0.047
            c-0.012,0.021-0.019,0.037-0.021,0.046c-0.157,0.166-0.325,0.345-0.506,0.54s-0.374,0.371-0.582,0.529
            c-0.207,0.157-0.429,0.28-0.663,0.368c-0.235,0.087-0.486,0.11-0.754,0.07C336.713,319.797,336.582,319.747,336.447,319.665z
             M335.7,315.157l0.097,0.114l0.041-0.079c0.038-0.07,0.066-0.137,0.086-0.199c0.018-0.063,0.031-0.118,0.038-0.164
            c0.007-0.047-0.011-0.087-0.052-0.121c-0.042-0.035-0.087-0.056-0.133-0.063c-0.049,0.012-0.096,0.04-0.141,0.086
            c-0.044,0.044-0.069,0.09-0.076,0.136C335.544,314.979,335.59,315.075,335.7,315.157z"/>
        <path class="color-gold" d="M339.645,320.151c-0.115-0.084-0.213-0.183-0.295-0.299c-0.081-0.116-0.145-0.248-0.188-0.396
            s-0.056-0.292-0.034-0.43l0.429-2.865c0.019-0.121,0.083-0.173,0.193-0.156c0.12,0.018,0.171,0.087,0.152,0.208l-0.429,2.865
            c-0.016,0.102-0.009,0.202,0.02,0.3c0.027,0.099,0.069,0.19,0.128,0.274c0.059,0.085,0.125,0.155,0.201,0.215
            c0.077,0.059,0.152,0.093,0.226,0.104c0.185,0.027,0.355,0.018,0.514-0.029s0.313-0.125,0.468-0.233
            c0.152-0.109,0.311-0.247,0.471-0.411c0.162-0.165,0.339-0.355,0.532-0.571l-0.032,0.023c0.022-0.024,0.049-0.057,0.078-0.095
            s0.07-0.076,0.123-0.115c0.025-0.044,0.075-0.06,0.15-0.049c0.036,0.006,0.066,0.024,0.09,0.056
            c0.006,0.021,0.015,0.04,0.026,0.061c0.011,0.021,0.014,0.045,0.01,0.072c-0.006,0.037-0.023,0.068-0.056,0.091l-0.199,0.296
            c-0.171,0.191-0.334,0.369-0.491,0.534c-0.157,0.167-0.324,0.307-0.502,0.421c-0.178,0.115-0.365,0.2-0.563,0.255
            c-0.196,0.056-0.42,0.065-0.669,0.028C339.877,320.285,339.759,320.234,339.645,320.151z M339.874,314.042
            c-0.04-0.054-0.054-0.117-0.043-0.19c0.012-0.074,0.043-0.131,0.097-0.17c0.073-0.046,0.137-0.064,0.192-0.057
            c0.064,0.01,0.12,0.047,0.168,0.11c0.047,0.064,0.065,0.129,0.056,0.193s-0.046,0.12-0.109,0.167
            c-0.064,0.048-0.129,0.065-0.193,0.056C339.985,314.144,339.931,314.107,339.874,314.042z"/>
        <path class="color-gold" d="M343.632,320.792c-0.105-0.045-0.203-0.104-0.291-0.178c-0.088-0.075-0.158-0.158-0.21-0.251
            c-0.053-0.093-0.069-0.195-0.053-0.306c0.031-0.213,0.107-0.363,0.23-0.454c0.121-0.09,0.27-0.146,0.442-0.167
            c0.123-0.01,0.263-0.006,0.416,0.013c0.152,0.019,0.321,0.041,0.506,0.068l0.209,0.031l0.321,0.02l0.09-0.127
            c0.016-0.046,0.026-0.082,0.03-0.109c0.006-0.037,0.012-0.078,0.019-0.125c0.023-0.156-0.065-0.333-0.267-0.527
            c-0.202-0.195-0.479-0.438-0.833-0.728l0.014,0.002c-0.119-0.083-0.229-0.169-0.33-0.254c-0.1-0.086-0.203-0.185-0.31-0.294
            l-0.054,0.077c-0.091,0.099-0.185,0.201-0.279,0.305c-0.096,0.104-0.188,0.205-0.279,0.305c-0.19,0.198-0.374,0.411-0.549,0.64
            c-0.074,0.055-0.135,0.079-0.181,0.072l-0.069-0.011c-0.035-0.015-0.058-0.039-0.067-0.074c-0.009-0.033-0.011-0.064-0.007-0.093
            c0.006-0.036,0.024-0.067,0.056-0.091l-0.015,0.012c0.104-0.125,0.187-0.227,0.25-0.302s0.117-0.141,0.164-0.194
            c0.045-0.055,0.089-0.107,0.129-0.158c0.041-0.051,0.09-0.109,0.147-0.176c0.058-0.067,0.119-0.14,0.188-0.22
            c0.068-0.079,0.132-0.152,0.188-0.22l0.136-0.149c-0.12-0.14-0.218-0.285-0.289-0.432c-0.072-0.148-0.094-0.323-0.063-0.527
            c0.019-0.12,0.087-0.244,0.205-0.372c0.118-0.129,0.253-0.191,0.403-0.188l0.042,0.006c0.138,0.021,0.273,0.091,0.406,0.21
            c0.134,0.119,0.196,0.268,0.188,0.445c-0.02,0.129-0.068,0.271-0.148,0.424c-0.079,0.153-0.183,0.306-0.309,0.457
            c0.04,0.043,0.111,0.108,0.211,0.194c0.101,0.086,0.185,0.152,0.253,0.201c0.025,0.021,0.055,0.047,0.088,0.076
            c0.033,0.028,0.063,0.055,0.088,0.077l-0.01-0.03l0.14,0.105c0.136,0.105,0.274,0.217,0.418,0.331
            c0.143,0.116,0.269,0.237,0.377,0.362s0.195,0.254,0.261,0.386s0.087,0.268,0.066,0.406c-0.01,0.064-0.023,0.121-0.039,0.171
            c-0.018,0.049-0.035,0.096-0.05,0.142l-0.036,0.05c0.277,0.042,0.539,0.042,0.786-0.001c0.247-0.044,0.449-0.153,0.608-0.327
            c0.076-0.073,0.147-0.104,0.213-0.095c0.036,0.005,0.067,0.023,0.089,0.056l-0.008-0.03c0.058,0.057,0.081,0.116,0.071,0.181
            c-0.001,0.01-0.008,0.02-0.019,0.033c-0.012,0.012-0.019,0.027-0.021,0.046c-0.238,0.267-0.521,0.423-0.849,0.468
            c-0.328,0.045-0.659,0.052-0.993,0.021l-0.042-0.007l-0.125,0.166c-0.159,0.25-0.369,0.445-0.626,0.586s-0.505,0.193-0.745,0.157
            C343.834,320.864,343.739,320.836,343.632,320.792z M343.384,316.5c0.016,0.093,0.053,0.181,0.116,0.266l0.071,0.096l0.048-0.036
            l-0.003,0.014c0.073-0.111,0.136-0.213,0.188-0.304c0.051-0.092,0.083-0.174,0.094-0.248l0.011-0.069
            c0.007-0.046-0.015-0.095-0.063-0.145c-0.05-0.05-0.102-0.078-0.156-0.086l-0.069-0.011c-0.048,0.002-0.097,0.028-0.146,0.077
            s-0.08,0.106-0.09,0.17C343.369,316.316,343.369,316.408,343.384,316.5z M344.504,320.413c0.19-0.113,0.354-0.269,0.487-0.466
            l0.02-0.039l-0.388-0.059c-0.156-0.023-0.305-0.042-0.443-0.06c-0.14-0.016-0.268-0.018-0.381-0.008
            c-0.23,0.023-0.359,0.131-0.389,0.325c-0.014,0.092,0.041,0.183,0.164,0.271c0.123,0.09,0.255,0.145,0.393,0.165
            C344.133,320.569,344.313,320.525,344.504,320.413z M343.796,317.149l0.002-0.014
            C343.779,317.134,343.779,317.139,343.796,317.149z"/>
        <path class="color-gold" d="M347.393,316.202c0.007-0.046,0.032-0.085,0.075-0.115c0.041-0.031,0.086-0.045,0.132-0.038l0.983,0.147
            l0.409-2.727c0.007-0.047,0.031-0.086,0.073-0.117c0.043-0.031,0.086-0.043,0.133-0.036c0.046,0.007,0.083,0.031,0.11,0.072
            c0.025,0.042,0.036,0.086,0.029,0.133l-0.409,2.727l1.246,0.187c0.036,0.006,0.071,0.031,0.103,0.073s0.044,0.086,0.037,0.133
            c-0.008,0.046-0.031,0.08-0.072,0.103c-0.041,0.021-0.081,0.029-0.117,0.024l-1.246-0.187l-0.587,3.918
            c-0.032,0.212,0.028,0.391,0.181,0.537c0.153,0.146,0.322,0.232,0.507,0.26c0.369,0.055,0.701-0.051,0.996-0.317
            c0.296-0.269,0.624-0.639,0.987-1.112c0.025-0.044,0.055-0.066,0.089-0.071c0.033-0.005,0.064-0.005,0.092-0.001
            c0.037,0.006,0.067,0.024,0.09,0.057l-0.009-0.03c0.059,0.057,0.082,0.107,0.075,0.153c-0.003,0.019-0.009,0.036-0.021,0.054
            c-0.013,0.017-0.019,0.034-0.021,0.053c-0.186,0.228-0.363,0.443-0.537,0.648c-0.172,0.206-0.351,0.38-0.537,0.521
            c-0.188,0.142-0.38,0.249-0.579,0.323c-0.2,0.074-0.425,0.092-0.674,0.055c-0.12-0.018-0.244-0.058-0.372-0.12
            c-0.127-0.062-0.24-0.141-0.338-0.241c-0.099-0.1-0.175-0.218-0.23-0.354c-0.055-0.135-0.069-0.29-0.043-0.466l0.275-1.841
            c-0.294,0.324-0.599,0.623-0.913,0.896c-0.042,0.032-0.086,0.045-0.133,0.038c-0.009-0.002-0.028-0.008-0.054-0.017
            c-0.028-0.008-0.05-0.023-0.064-0.044c-0.034-0.024-0.046-0.073-0.035-0.147c0.006-0.037,0.024-0.067,0.057-0.091
            c0.217-0.185,0.43-0.382,0.641-0.59c0.21-0.209,0.411-0.446,0.602-0.71l0.212-1.412l-0.983-0.147
            C347.431,316.363,347.377,316.304,347.393,316.202z"/>
        <path class="color-gold" d="M352.678,322.021l0.488-3.254c0.015-0.102,0.002-0.198-0.042-0.29c-0.042-0.091-0.101-0.143-0.174-0.153
            c-0.084-0.013-0.321,0.184-0.712,0.588c-0.123,0.132-0.243,0.272-0.359,0.42c-0.117,0.147-0.233,0.293-0.35,0.437
            c-0.044,0.041-0.083,0.084-0.118,0.13c-0.036,0.048-0.082,0.108-0.142,0.185c-0.046,0.06-0.102,0.083-0.166,0.073
            c-0.027-0.004-0.054-0.017-0.079-0.039c-0.036-0.015-0.058-0.039-0.067-0.074c-0.009-0.033-0.011-0.064-0.007-0.093
            c0.006-0.037,0.024-0.067,0.057-0.091c0.034-0.042,0.081-0.099,0.139-0.17c0.059-0.072,0.126-0.153,0.207-0.245
            c0.093-0.118,0.194-0.242,0.304-0.372c0.108-0.13,0.23-0.266,0.364-0.405l-0.027-0.005c0.148-0.176,0.315-0.337,0.497-0.484
            c0.183-0.146,0.352-0.209,0.51-0.186c0.192,0.029,0.333,0.135,0.419,0.317c0.085,0.183,0.117,0.354,0.094,0.51l-0.069,0.457
            c0.264-0.31,0.566-0.554,0.91-0.734c0.344-0.18,0.704-0.241,1.083-0.185c0.128,0.02,0.243,0.075,0.343,0.165
            c0.1,0.091,0.184,0.195,0.251,0.313c0.066,0.118,0.114,0.244,0.142,0.375c0.026,0.132,0.032,0.253,0.016,0.363l-0.052,0.347
            c0.135-0.141,0.272-0.271,0.412-0.392c0.141-0.12,0.276-0.228,0.403-0.321c0.193-0.16,0.396-0.295,0.605-0.405
            c0.209-0.11,0.394-0.153,0.55-0.13c0.157,0.023,0.29,0.084,0.397,0.18c0.108,0.097,0.196,0.209,0.262,0.337
            s0.111,0.267,0.136,0.417c0.024,0.149,0.028,0.284,0.01,0.404l-0.307,2.05l-0.003,0.113c0.02,0.248,0.086,0.415,0.2,0.504
            c0.114,0.087,0.241,0.142,0.38,0.162c0.193,0.029,0.389,0.002,0.585-0.082c0.197-0.083,0.386-0.196,0.567-0.34
            c0.182-0.143,0.352-0.306,0.506-0.489c0.155-0.185,0.297-0.362,0.426-0.531c0.025-0.044,0.058-0.067,0.096-0.07
            c0.038-0.004,0.072-0.004,0.099,0l0.069,0.011c0.016,0.021,0.034,0.047,0.053,0.078c0.018,0.031,0.025,0.061,0.021,0.089
            c-0.005,0.036-0.018,0.063-0.038,0.079c-0.121,0.17-0.27,0.355-0.445,0.556c-0.177,0.2-0.369,0.384-0.578,0.551
            s-0.432,0.299-0.668,0.396s-0.479,0.126-0.728,0.089l-0.014-0.002c-0.111-0.017-0.22-0.048-0.326-0.092
            c-0.107-0.044-0.201-0.108-0.283-0.19c-0.082-0.084-0.146-0.191-0.192-0.326s-0.068-0.296-0.068-0.485l0.317-2.118
            c0.03-0.203-0.004-0.4-0.102-0.596c-0.099-0.193-0.24-0.305-0.425-0.332c-0.092-0.014-0.217,0.02-0.376,0.1
            c-0.158,0.08-0.334,0.195-0.526,0.346c-0.317,0.234-0.611,0.498-0.883,0.788l-0.217,0.222l-0.299,1.994
            c-0.01,0.064-0.035,0.107-0.075,0.129c-0.042,0.023-0.085,0.03-0.131,0.023c-0.12-0.018-0.172-0.087-0.154-0.207l0.436-2.908
            c0.025-0.166-0.008-0.34-0.098-0.523c-0.091-0.184-0.205-0.286-0.343-0.307c-0.306-0.046-0.606,0.021-0.901,0.198
            c-0.295,0.178-0.598,0.441-0.904,0.791l-0.235,0.249l-0.321,2.146c-0.018,0.12-0.082,0.171-0.192,0.155
            C352.712,322.209,352.66,322.14,352.678,322.021z"/>
        <path class="color-gold" d="M365.48,324.018c-0.114-0.089-0.211-0.194-0.291-0.32c-0.08-0.124-0.141-0.257-0.182-0.395
            c-0.041-0.139-0.057-0.273-0.046-0.404c-0.285,0.26-0.637,0.474-1.059,0.642c-0.421,0.168-0.854,0.219-1.297,0.152
            c-0.193-0.029-0.381-0.1-0.563-0.212c-0.183-0.112-0.342-0.249-0.477-0.411c-0.137-0.162-0.241-0.342-0.314-0.543
            c-0.074-0.199-0.097-0.4-0.066-0.604l0.002-0.013c0.072-0.48,0.273-0.873,0.603-1.178c0.328-0.304,0.71-0.535,1.144-0.692
            c0.433-0.156,0.878-0.252,1.332-0.288c0.452-0.035,0.841-0.029,1.164,0.019l0.097,0.015l0.042,0.006l0.041,0.007
            c0.016,0.021,0.029,0.032,0.038,0.034c0.01,0.001,0.022,0.008,0.039,0.02c0.008,0.012,0.011,0.025,0.008,0.044
            c-0.001,0.01,0.006,0.024,0.021,0.046l-0.007,0.041l-0.325,2.272c0.017,0.013,0.023,0.023,0.022,0.032l-0.002,0.014l-0.009,0.056
            c-0.001,0.009-0.005,0.013-0.015,0.012l-0.014-0.002l-0.049,0.502c-0.015,0.102-0.009,0.206,0.019,0.315
            c0.025,0.107,0.067,0.207,0.124,0.301s0.125,0.175,0.204,0.243c0.079,0.069,0.161,0.108,0.244,0.121
            c0.102,0.015,0.239-0.019,0.411-0.102c0.173-0.081,0.363-0.192,0.574-0.33c0.18-0.134,0.366-0.295,0.56-0.483
            c0.193-0.188,0.364-0.365,0.513-0.531l-0.002,0.014c0.024-0.044,0.054-0.066,0.088-0.072c0.033-0.004,0.064-0.004,0.093,0
            c0.036,0.006,0.066,0.024,0.09,0.057l-0.009-0.03c0.057,0.056,0.081,0.116,0.071,0.181c-0.006,0.036-0.024,0.067-0.057,0.09
            c-0.146,0.168-0.323,0.344-0.525,0.531c-0.203,0.187-0.409,0.358-0.622,0.515c-0.21,0.139-0.421,0.263-0.636,0.372
            s-0.414,0.15-0.599,0.123C365.723,324.159,365.595,324.105,365.48,324.018z M363.418,323.333c0.249-0.058,0.481-0.146,0.698-0.264
            c0.215-0.119,0.405-0.252,0.569-0.402c0.163-0.15,0.285-0.3,0.365-0.448l0.289-2.123c-0.307-0.036-0.665-0.037-1.075-0.005
            c-0.412,0.033-0.809,0.119-1.192,0.26c-0.385,0.141-0.724,0.338-1.017,0.591c-0.293,0.254-0.469,0.584-0.529,0.989l-0.005,0.028
            c-0.023,0.157-0.007,0.313,0.05,0.467c0.057,0.155,0.14,0.298,0.248,0.427c0.107,0.129,0.235,0.24,0.382,0.333
            s0.298,0.15,0.455,0.175C362.915,323.398,363.168,323.39,363.418,323.333z"/>
        <path class="color-gold" d="M369.454,324.662c-0.106-0.044-0.203-0.104-0.291-0.178c-0.089-0.074-0.158-0.158-0.21-0.251
            c-0.053-0.092-0.069-0.194-0.053-0.305c0.031-0.213,0.107-0.364,0.229-0.455c0.122-0.09,0.27-0.146,0.442-0.167
            c0.124-0.009,0.264-0.005,0.416,0.013c0.153,0.02,0.322,0.042,0.507,0.069l0.208,0.031l0.322,0.02l0.09-0.128
            c0.016-0.045,0.026-0.081,0.03-0.109c0.006-0.036,0.012-0.078,0.019-0.124c0.023-0.156-0.065-0.333-0.267-0.528
            c-0.203-0.194-0.479-0.438-0.833-0.727l0.014,0.002c-0.12-0.083-0.229-0.169-0.33-0.254c-0.101-0.086-0.203-0.185-0.31-0.295
            l-0.054,0.078c-0.092,0.098-0.185,0.2-0.28,0.304c-0.096,0.104-0.188,0.205-0.278,0.305c-0.19,0.199-0.374,0.411-0.549,0.64
            c-0.074,0.055-0.135,0.08-0.181,0.073l-0.069-0.011c-0.036-0.016-0.059-0.039-0.068-0.074c-0.008-0.034-0.01-0.064-0.006-0.093
            c0.006-0.037,0.023-0.067,0.056-0.091l-0.016,0.012c0.104-0.126,0.188-0.227,0.251-0.302c0.063-0.075,0.117-0.141,0.164-0.194
            c0.045-0.055,0.089-0.107,0.128-0.158c0.042-0.051,0.091-0.11,0.147-0.176c0.058-0.067,0.12-0.141,0.188-0.22
            c0.069-0.08,0.132-0.152,0.189-0.22l0.135-0.149c-0.12-0.141-0.217-0.285-0.289-0.433c-0.072-0.148-0.093-0.323-0.063-0.527
            c0.019-0.119,0.087-0.243,0.205-0.372c0.118-0.128,0.253-0.191,0.403-0.187l0.041,0.006c0.139,0.021,0.273,0.091,0.407,0.21
            c0.134,0.118,0.196,0.268,0.188,0.444c-0.02,0.13-0.068,0.271-0.148,0.425c-0.08,0.152-0.183,0.306-0.31,0.456
            c0.041,0.044,0.112,0.108,0.212,0.194c0.1,0.087,0.184,0.153,0.252,0.201c0.026,0.022,0.056,0.048,0.088,0.076
            c0.033,0.029,0.063,0.055,0.088,0.078l-0.01-0.031l0.141,0.106c0.135,0.105,0.274,0.216,0.417,0.331
            c0.144,0.116,0.269,0.237,0.378,0.362c0.107,0.124,0.195,0.253,0.261,0.386c0.064,0.132,0.087,0.268,0.066,0.405
            c-0.01,0.064-0.023,0.122-0.039,0.172c-0.018,0.049-0.035,0.096-0.051,0.141l-0.036,0.051c0.277,0.042,0.539,0.041,0.787-0.001
            c0.247-0.044,0.449-0.153,0.607-0.327c0.077-0.073,0.148-0.105,0.213-0.096c0.037,0.006,0.067,0.024,0.09,0.057l-0.009-0.03
            c0.058,0.056,0.081,0.116,0.071,0.181c-0.001,0.01-0.008,0.02-0.019,0.032c-0.012,0.013-0.019,0.028-0.021,0.047
            c-0.237,0.267-0.521,0.422-0.849,0.467c-0.327,0.046-0.659,0.053-0.993,0.021l-0.041-0.006l-0.125,0.165
            c-0.16,0.251-0.369,0.445-0.626,0.587c-0.258,0.141-0.505,0.193-0.745,0.156C369.656,324.735,369.562,324.707,369.454,324.662z
             M369.206,320.371c0.015,0.092,0.053,0.181,0.115,0.265l0.071,0.097l0.048-0.036l-0.002,0.014
            c0.072-0.111,0.136-0.213,0.187-0.305c0.052-0.091,0.084-0.173,0.095-0.248l0.011-0.069c0.007-0.045-0.015-0.094-0.063-0.144
            c-0.051-0.05-0.102-0.078-0.156-0.087l-0.07-0.011c-0.048,0.002-0.097,0.029-0.146,0.077c-0.051,0.049-0.08,0.107-0.09,0.171
            C369.191,320.188,369.191,320.279,369.206,320.371z M370.325,324.283c0.191-0.112,0.354-0.268,0.487-0.465l0.021-0.04
            l-0.388-0.058c-0.156-0.023-0.306-0.043-0.443-0.06c-0.141-0.016-0.268-0.018-0.382-0.008c-0.229,0.023-0.359,0.131-0.388,0.325
            c-0.014,0.092,0.04,0.183,0.164,0.271c0.123,0.089,0.254,0.145,0.393,0.165C369.955,324.44,370.134,324.396,370.325,324.283z
             M369.617,321.021l0.002-0.014C369.602,321.004,369.602,321.009,369.617,321.021z"/>
    </g>
</g>
<!--/chocolate-->
<g id="cream-sides">
    <rect class="cream-side color-white" x="132.422" y="367" width="124.584" height="130"/>
    <g class="cream-side">
        <rect class="color-white" x="256.995" y="367" width="124.584" height="130"/>
        <rect class="shadow" x="256.995" y="367" width="124.584" height="130"/>
    </g>
</g>
<!--/cream-side-->
<g id="cream-whips">
    <g class="cream-whip">
        <path class="color-white" d="M152.5,325.375c6.475,0,23.125,15.263,23.125,25.437c0,10.176-3.854,16.188-3.854,16.188H152.5h-19.271
            c0,0-3.854-6.012-3.854-16.188C129.375,340.638,146.024,325.375,152.5,325.375z"/>
        <path class="shadow" d="M152.5,325.375v41.624h19.271c0,0,3.854-6.012,3.854-16.188C175.625,340.638,158.975,325.375,152.5,325.375
            z"/>
    </g>
    <g class="cream-whip">
        <path class="color-white" d="M187.333,325.375c6.476,0,23.125,15.263,23.125,25.437c0,10.176-3.854,16.188-3.854,16.188h-19.271
            h-19.271c0,0-3.854-6.012-3.854-16.188C164.208,340.638,180.858,325.375,187.333,325.375z"/>
        <path class="shadow" d="M187.333,325.375v41.624h19.271c0,0,3.854-6.012,3.854-16.188
            C210.458,340.638,193.809,325.375,187.333,325.375z"/>
    </g>
    <g class="cream-whip">
        <path class="color-white" d="M222.166,325.375c6.476,0,23.126,15.263,23.126,25.437c0,10.176-3.854,16.188-3.854,16.188h-19.271h-19.27
            c0,0-3.854-6.012-3.854-16.188C199.042,340.638,215.691,325.375,222.166,325.375z"/>
        <path class="shadow" d="M222.166,325.375v41.624h19.271c0,0,3.854-6.012,3.854-16.188
            C245.292,340.638,228.642,325.375,222.166,325.375z"/>
    </g>
    <g class="cream-whip">
        <path class="color-white" d="M256.999,325.373c6.476,0,23.125,15.264,23.125,25.438c0,10.176-3.854,16.188-3.854,16.188h-19.271
            h-19.271c0,0-3.854-6.013-3.854-16.188C233.874,340.637,250.524,325.373,256.999,325.373z"/>
        <path class="shadow" d="M256.999,325.373V367h19.271c0,0,3.854-6.013,3.854-16.188
            C280.124,340.637,263.475,325.373,256.999,325.373z"/>
    </g>
    <g class="cream-whip">
        <path class="color-white" d="M291.833,325.374c6.476,0,23.125,15.264,23.125,25.438c0,10.176-3.854,16.188-3.854,16.188h-19.271
            h-19.271c0,0-3.854-6.013-3.854-16.188C268.708,340.638,285.357,325.374,291.833,325.374z"/>
        <path class="shadow" d="M291.833,325.374V367h19.271c0,0,3.854-6.013,3.854-16.188
            C314.958,340.638,298.309,325.374,291.833,325.374z"/>
    </g>
    <g class="cream-whip">
        <path class="color-white" d="M326.666,325.375c6.475,0,23.125,15.263,23.125,25.437c0,10.175-3.854,16.188-3.854,16.188h-19.271h-19.27
            c0,0-3.855-6.013-3.855-16.188C303.541,340.638,320.191,325.375,326.666,325.375z"/>
        <path class="shadow" d="M326.666,325.375v41.624h19.271c0,0,3.854-6.013,3.854-16.188
            C349.791,340.638,333.141,325.375,326.666,325.375z"/>
    </g>
    <g class="cream-whip">
        <path class="color-white" d="M361.5,325.375c6.476,0,23.125,15.263,23.125,25.437c0,10.176-3.854,16.188-3.854,16.188H361.5h-19.271
            c0,0-3.854-6.012-3.854-16.188C338.375,340.638,355.025,325.375,361.5,325.375z"/>
        <path class="shadow" d="M361.5,325.375v41.624h19.271c0,0,3.854-6.012,3.854-16.188C384.625,340.638,367.976,325.375,361.5,325.375
            z"/>
    </g>
</g>
<!--/cream-whips-->
<g id="spatula">
    <rect class="color-brown-3" x="119.015" y="207.082" width="26.803" height="111.759"/>
    <rect class="shadow" x="119.015" y="207.082" width="13.402" height="111.759"/>
    <rect class="color-gray" x="121.647" y="318.841" width="21.538" height="28.829"/>
    <path class="color-white" d="M132.417,497c5.947,0,10.769-4.093,10.769-9.143V347.67h-21.538v140.188
        C121.647,492.907,126.469,497,132.417,497z"/>
</g>
<g id="bag">
    <path class="color-white" d="M146.681,328.732c1.925,0.119,3.864,0.186,5.819,0.186c1.956,0,3.895-0.066,5.82-0.186l58.755-160.056
        c-16.743-16.115-39.5-26.027-64.575-26.027c-25.074,0-47.831,9.912-64.575,26.027L146.681,328.732z"/>
    <path class="shadow" d="M152.5,142.649v186.269c1.956,0,3.895-0.066,5.82-0.186l58.755-160.056
        C200.332,152.561,177.575,142.649,152.5,142.649z"/>
    <path class="color-gray" d="M170.245,296.248h-35.489l11.925,32.484c1.925,0.119,3.864,0.186,5.819,0.186
        c1.956,0,3.895-0.066,5.82-0.186L170.245,296.248z"/>
    <path class="shadow" d="M152.5,296.248v32.67c1.956,0,3.895-0.066,5.82-0.186l11.924-32.484H152.5z"/>
</g>
</svg>
</div>

CSSでスタイリング

以下のCSSを書きます。

body {
    background: #9AE5A1;
    margin: 0;
    padding: 0;
}

.container {
    margin: 0 auto;
    max-width: 580px;
    width: 75vw;
}

.color-bg {
    fill: #9AE5A1;
}

.color-brown-1 {
    fill: #D6BDAB;
}

.color-brown-2 {
    fill: #996666;
}

.color-brown-3 {
    fill: #996633;
}

.color-beige {
    fill: #F2EAC7;
}

.color-white {
    fill: #FFFFFF;
}

.color-red-1 {
    fill: #FF6666;
}

.color-red-2 {
    fill: #FF8080;
}

.color-red-3 {
    fill: #FF9999;
}

.color-red-4 {
    fill: #FFB3B3;
}

.color-red-5 {
    fill: #FFCCCC;
}

.color-red-6 {
    fill: #FFD9D9;
}

.color-red-7 {
    fill: #FFE6E6;
}

.color-red-8 {
    fill: #FFF2F2;
}

.color-green {
    fill: #66CC99;
}

.color-bordeaux-1 {
    fill: #993333;
}

.color-bordeaux-2 {
    fill: #CC6666;
}

.color-yellow {
    fill: #FFCC66;
}

.color-gold {
    fill: #FFCC99;
}

.color-gray {
    fill: #CCCCCC;
}

.shadow {
    fill-opacity: 0.1;
}

#foundation,
#sponges > .sponge,
#sponge-creams > .sponge-cream,
#cut-strawberries-1 > .cut-strawberry,
#cut-strawberries-2 > .cut-strawberry,
#cream-sides > .cream-side,
#cream-whips > .cream-whip,
#strawberries-1 > .strawberry,
#strawberries-2 > .strawberry,
#ribon,
#chocolate,
#spatula,
#bag {
    visibility: hidden;
}

.chocolate-message path {
    fill: none;
    stroke: #FFCC99;
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

CSSでは以下のことをしています。

汎用クラスを作成

先程HTML要素に追加した色や影に関する汎用クラスを作成します。

ケーキの初期設定

始めは何もない状態からアニメーションがスタートするので、CSSでは主に初期設定としてvisibility: hidden;で全要素を非表示にしています。

尚、非表示にはvisibility:hidden;を用います。display:none;ではない理由としては、display:none;ではふわりとした表示ができないためです。

筆記アニメーションさせるために

チョコレートに描く文字.chocolate-message pathには、筆記アニメーションを行なうために初期設定として以下を指定します。

.chocolate-message path {
    fill: none;
    stroke: #FFCC99;
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

JavaScriptでケーキにアニメーションを加える

いよいよJavaScriptでケーキにアニメーションを加えます。アニメーションにはjQueryプラグインTweenMax.jsを用います。

Tweenmaxを読み込む

以下のコードをHTMLの</body>直前に追加します。※事前にjQuery本体も読み込む必要あり。

TweenMax.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js">

TweenMaxの使い方

今回のようなストーリー性のあるアニメーションはTweenMaxのタイムライン記法で作成します。

タイムライン記法

タイムライン記法は以下のようにnew TimelineMax()でタイムラインを生成してから、それに続けてアニメーションのコードを書いてイきます。

タイムライン記法例
var tl = new TimelineMax();
tl.set($foundation,{
    y:25,
    autoAlpha:1
})
.set($sideCream,{
    scaleX:0,
    autoAlpha:1
})
.to($foundation, 0.25, {
    y:0,
    ease:Power2.easeIn
})

尚、上記のコードにもありますが、TweenMaxにおいて一つの要素をアニメーションさせるには.set().to()を用います。

アニメーションさせる要素をセット

要素をアニメーションするには始めに要素をセットしなければいけません。要素のセットには.set()を用います。

.set()
tl.set($foundation,{
    y:25,
    autoAlpha:1
})

.set()の引数には以下を指定することができます。

引数
第1引数 セットする要素
第2引数 要素のスタイル

尚、set()はあくまで準備であり、アニメーションは行われません。

セットした要素をアニメーション

.set()でセットした要素をアニメーションさせるには、.to()を用います。.to().set()の後に記述します。尚、to()のみの記述ではアニメーションは行われません。

.to()
.to($foundation, 0.25, {
    y:0,
    ease:Power2.easeIn
})

.to()の引数には以下を指定することができます。

引数
第1引数 アニメーションさせる要素
第2引数 アニメーションの時間
第3引数 要素のスタイル
第4引数 アニメーション発動のタイミング

兄弟要素を連続してアニメーション

苺を配置させる場面ではstaggrToで連続してアニメーションさせています。staggerToは兄弟要素を連続してアニメーションさせることができます。勿論間隔も調節することができます。

.staggerTo()
.set($cutStrawberry2,{
    y:-522,
    autoAlpha:1
})
.staggerTo($cutStrawberry2,0.25,{
    y:0,
    ease:Expo.easeOut
},0.25)

.staggerTo()の引数には以下を指定することができます。

引数
第1引数 アニメーションさせる要素群
第2引数 アニメーションの時間
第3引数 要素のスタイル
第4引数 アニメーション発動のタイミング

2つの要素を同時にアニメーション

遅延、早送り、時間を上手く調整してタイミングを合わせることで、2つの要素を同時にアニメーションさせることもできます。今回いえばナイフでクリームを塗る場面で行われています。

.to($spatula,1.5,{
    x:125.416
})
.to($spatula,1.5,{
    x:250.832
})
.to($sideCream[0],1.5,{
    scaleX:1
},'-=3')
.to($sideCream[1],1.5,{
    scaleX:1
},'-=1.5')

筆記アニメーション

筆記アニメーションは.chocolate-message pathstrokeDashoffset0にします。ここでは0.5秒かけて筆記アニメーションを行なっています。

.staggerTo($chocolateMessage,0.5,{
    strokeDashoffset:0
},0.15);

完成したJavaScript

完成したJavaScriptは以下の通りです。

var $foundation = $('#foundation'),//土台
    $sponge = $('#sponges > .sponge'),//スポンジ
    $spongeCream = $('#sponge-creams > .sponge-cream'),//スポンジ間のクリーム
    $cutStrawberry1 = $('#cut-strawberries-1 > .cut-strawberry'),//下から1番目のクリーム内に含まれている苺
    $cutStrawberry2 = $('#cut-strawberries-2 > .cut-strawberry'),//下から2番目のクリーム内に含まれている苺
    $strawberry1 = $('#strawberries-1 > .strawberry'),//奥に乗せられる苺
    $strawberry2 = $('#strawberries-2 > .strawberry'),//手前に乗せられる苺
    $ribon = $('#ribon'),//リボン
    $chocolate = $('#chocolate'),//チョコレート
    $chocolateMessage = $('.chocolate-message path'),//チョコレートに描かれるメッセージ
    $sideCream = $('#cream-sides > .cream-side'),//側面に塗られるクリーム
    $whipCream = $('#cream-whips > .cream-whip'),//ホイップクリーム
    $spatula = $('#spatula'),//へら
    $bag = $('#bag');//ホイップクリームが入っている袋

var tl = new TimelineMax();
//セットだけではアニメーションされない
tl.set($foundation,{//setで土台のアニメーションを準備
    y:25,//自身の高さ分下へ移動させ、画面外へ
    autoAlpha:1//setした段階で不透明に
})
.set($sideCream,{//側面に塗られるクリームのアニメーションを準備
    scaleX:0,//横(左)に向かって縮小し、見えない状態に
    autoAlpha:1//setした段階で不透明に
})
.to($foundation, 0.25, {//ここで土台を0.25秒かけてアニメーションさせる
    y:0,//0.25秒かけて上へ移動させ、元の位置に戻す
    ease:Power2.easeIn//イージングを加える
})
.set($sponge,{//全てのスポンジをセット
    y:-522,//上へ画面の高さ分の522、つまり画面上の外に移動させる
    autoAlpha:1//不透明にしておく
})
.to($sponge[0], 0.25, {//一番下のスポンジを0.25秒かけてアニメーションさせる
    y:0,//0.25秒かけて下へ移動させ、元の位置に戻す
    ease:Bounce.easeOut
})
.set($spongeCream,{//全てのスポンジ間のクリームをセット
    scaleX:0,//横(左)に向かって縮小し、見えない状態に
    autoAlpha:1
})
.to($spongeCream[0],1,{//一番下のスポンジ間のクリームを1秒かけてアニメーションさせる
    scaleX:1//1秒かけて右へ向かって拡大し、元の状態に戻す
})
.to($spongeCream[1],1,{//下から2番目のスポンジ間のクリームを1秒かけてアニメーションさせる
    scaleX:1//1秒かけて右へ向かって拡大し、元の状態に戻す
})
.set($cutStrawberry1,{//下から1番目のクリーム内に含まれている苺をセット
    y:-522,//上へ画面の高さ分の522、つまり画面上の外に移動させる
    autoAlpha:1
})
.staggerTo($cutStrawberry1,0.25,{//下から1番目のクリーム内に含まれている苺を1個ずつ0.25秒かけて連続してアニメーションさせる
    y:0,//1個ずつ0.25秒かけて下へ移動させ、元の位置に戻す
    ease:Expo.easeOut
},0.25)
.to($sponge[1], 0.25, {
    y:0,
    ease:Bounce.easeOut
})
.to($spongeCream[2],1,{
    scaleX:1,
})
.to($spongeCream[3],1,{
    scaleX:1,
})
.set($cutStrawberry2,{
    y:-522,
    autoAlpha:1
})
.staggerTo($cutStrawberry2,0.25,{
    y:0,
    ease:Expo.easeOut
},0.25)
.to($sponge[2],0.25,{
    y:0,
    ease:Bounce.easeOut
})
.set($spatula,{
    x:396.23,
    rotation:0,
    autoAlpha:1
})
.to($spatula,1,{
    x:0,
    rotation:720
})
.to($spatula,1.5,{
    x:125.416
})
.to($spatula,1.5,{
    x:250.832
})

.to($sideCream[0],1.5,{
    scaleX:1
},'-=3')
.to($sideCream[1],1.5,{
    scaleX:1
},'-=1.5')
.to($spatula,0.25,{
    autoAlpha:0
})
.fromTo($bag,0.7,{
    y:-522,
    autoAlpha:1
},{
    y:0
})
.set($whipCream,{
    scaleY:0,
    autoAlpha:1
})
.to($whipCream[0],0.5,{
    scaleY:1
})
.to($bag,0.5,{
    x:34.83
})
.to($whipCream[1],0.5,{
    scaleY:1
})
.to($bag,0.5,{
    x:69.66
})
.to($whipCream[2],0.5,{
    scaleY:1
})
.to($bag,0.5,{
    x:104.49
})
.to($whipCream[3],0.5,{
    scaleY:1
})
.to($bag,0.5,{
    x:139.32
})
.to($whipCream[4],0.5,{
    scaleY:1
})
.to($bag,0.5,{
    x:174.15
})
.to($whipCream[5],0.5,{
    scaleY:1
})
.to($bag,0.5,{
    x:208.98
})
.to($whipCream[6],0.5,{
    scaleY:1
})
.to($bag,0.25,{
    autoAlpha:0
})
.set($strawberry2,{
    y:-522,
    autoAlpha:1
})
.staggerTo($strawberry2,0.25,{
    y:0,
    ease:Expo.easeOut
},0.1)
.set($strawberry1,{
    y:-522,
    autoAlpha:1
})
.staggerTo($strawberry1,0.25,{
    y:0,
    ease:Expo.easeOut
},0.1)
.fromTo($ribon,1,{
    y:-522,
    x:-514,
    rotation:0,
    transformOrigin:"50% 50%",
    autoAlpha:1
},{
    y:0,
    x:0,
    rotation:720
})
.fromTo($chocolate,1,{
    y:-466.534,//-522+55.466
    x:389.006,//514-124.994
    autoAlpha:1,
    scale:6
},{
    y:0,
    x:0,
    scale:1,
    ease:Expo.easeOut
})
.staggerTo($chocolateMessage,0.5,{
    strokeDashoffset:0
},0.15);

終わりに

以上で、TweenMax.jsでクリスマスケーキのイラストにアニメーションを加える方法を終わります。

参考文献