There is such a picture on svg .

 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve"> <style type="text/css"> .st0{fill:#CCCCCC;} .st1{fill:#00B4D5;} </style> <g> <g> <path class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/> <path class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z"/> <path class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 S110.2,404.3,102.2,404.3z"/> <path class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 S379.8,375.6,387.8,375.6z"/> </g> </g> </svg>

How to make an animation, as shown here in this gif .

enter image description here

    2 answers 2

    Found a solution, you need to do so.

     <animate id= second xlink:href="#b" attributeName="class" begin="first.end-0.5s" values="st0;st1" dur="1s" />

    Here we set the parameter begin . This is the beginning of the animation, and ask that it will begin half a second before the previous one is completed.

    Why half a second? Because one animation in our example lasts one second.

    Well, for this there is such a parameter.

    first.end

    where first is the id the animate element after which we want the current one to start.

     <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve"> <style type="text/css"> .st0{fill:#CCCCCC;} .st1{fill:#00B4D5;} </style> <g> <g> <path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z"/> <path id="b" class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z"/> <path id="c" class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 S110.2,404.3,102.2,404.3z"/> <path id="d" class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 S379.8,375.6,387.8,375.6z"/> </g> <animate id="first" xlink:href="#c" attributeName="class" begin="0s;third.end" values="st0;st1" dur="1s" /> <animate id="second" xlink:href="#b" attributeName="class" begin="first.end-0.5s" values="st0;st1" dur="1s" /> <animate id="third" xlink:href="#d" attributeName="class" begin="second.end-0.5s" values="st0;st1" dur="1s"/> </g> </svg>

      Animation of discrete color switching, as in the example of the author of the question, can be done in another way. Really completely on pure SVG, without using class switching with color filling in CSS.

      To do this, use the SVG color fill animation command:

       <animate id="an_c" attributeName="fill" dur="0.5s" begin="an_b.end" values="#00B4D5;#CCCCCC" calcMode="discrete" />, где

      values - switching from one color to another in discrete mode calcMode="discrete"

      The order of execution of animations is provided by the chain of commands begin="an_b.end" that is, when the animation ends with id id="an_b" the animation id="an_c"

       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="490" height="490" viewBox="0 0 490 490" > <path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z" fill="#CCCCCC"/> <path id="b" class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 S110.2,404.3,102.2,404.3z" fill="#CCCCCC"> <animate id="an_b" attributeName="fill" dur="0.5s" begin="0s;an_d.end" values="#00B4D5;#CCCCCC" calcMode="discrete" /> </path> <path id="c" class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z" fill="#CCCCCC"> <animate id="an_c" attributeName="fill" dur="0.5s" begin="an_b.end" values="#00B4D5;#CCCCCC" calcMode="discrete" /> </path> <path id="d" class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 S379.8,375.6,387.8,375.6z" fill="#CCCCCC"> <animate id="an_d" attributeName="fill" dur="0.5s" begin="an_c.end" values="#00B4D5;#CCCCCC" calcMode="discrete" /> </path> </svg>

      For smoother color switching, remove the discrete mode:

       <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="490" height="490" viewBox="0 0 490 490" > <path id="a" class="st0" d="M340.2,263.8c46.3-3.3,82.5-42.9,82.5-90.3c0-41.2-28-77.7-66.3-87.8C348.2,36.4,305.8,0,254.9,0 c-36.9,0-71.1,20-89.3,51.6c-3.5-0.7-7.2-1-10.8-1c-31.1,0-56.4,25.3-56.4,56.4c0,4,0.4,7.9,1.2,11.7 c-20.1,14.6-32.3,38.2-32.3,63.2c0,42.2,33.9,79.8,74,82c0.2,0,0.4,0,0.6,0h197.7C339.7,263.9,340,263.9,340.2,263.8z M142.1,244.1c-29.9-1.8-55-30.2-55-62.2c0-20.7,11.1-40,29-50.4c4.2-2.4,6-7.5,4.3-12c-1.5-3.9-2.2-8.1-2.2-12.5 c0-20.2,16.4-36.6,36.6-36.6c4.3,0,8.5,0.7,12.5,2.2c4.8,1.8,10.2-0.4,12.4-5.1c13.6-29,43.2-47.7,75.3-47.7 c43.1,0,78.7,32.3,82.8,75.1c0.4,4.5,3.8,8.1,8.2,8.8c32.5,5.6,57,35.6,57,69.8c0,36.3-28.6,67.9-63.8,70.6H142.1z" fill="#CCCCCC"/> <path id="b" class="st1" d="M181.4,307.2v55.5c0,9.6-7.8,17.3-17.3,17.3h-29.2c-4.3-14-17.3-24.3-32.7-24.3C83.4,355.7,68,371,68,389.9 s15.3,34.2,34.2,34.2c15.4,0,28.4-10.2,32.7-24.3h29.2c20.5,0,37.1-16.7,37.1-37.1v-55.5c0-5.5-4.4-9.9-9.9-9.9 C185.9,297.3,181.4,301.7,181.4,307.2z M102.2,404.3c-7.9,0-14.4-6.4-14.4-14.4s6.4-14.4,14.4-14.4c7.9,0,14.4,6.4,14.4,14.4 S110.2,404.3,102.2,404.3z" fill="#CCCCCC"> <animate id="an_b" attributeName="fill" dur="0.8s" begin="0s;an_d.end" values="#00B4D5;#CCCCCC" /> </path> <path id="c" class="st1" d="M245,297.3c-5.5,0-9.9,4.4-9.9,9.9v116c-13.7,4.2-23.9,16.9-24.2,31.8c-0.2,9.1,3.1,17.8,9.4,24.4 c6.3,6.6,14.8,10.4,23.9,10.6h0.8l0,0c18.4,0,33.7-15,34.1-33.3c0.2-9.1-3.1-17.8-9.4-24.4c-4.1-4.3-9.2-7.4-14.8-9.1v-116 C254.9,301.7,250.5,297.3,245,297.3z M255.4,446c2.6,2.8,4.1,6.4,4,10.2c-0.2,7.7-6.6,14-14.3,14h-0.4c-3.8-0.1-7.4-1.7-10-4.4 c-2.6-2.8-4.1-6.4-4-10.2c0.2-7.7,6.6-14,14.3-14h0.4C249.2,441.6,252.7,443.2,255.4,446z" fill="#CCCCCC"> <animate id="an_c" attributeName="fill" dur="0.8s" begin="an_b.end" values="#00B4D5;#CCCCCC" /> </path> <path id="d" class="st1" d="M325.9,399.9h29.2c4.3,14,17.3,24.3,32.7,24.3c18.8,0,34.2-15.3,34.2-34.2s-15.3-34.2-34.2-34.2 c-15.4,0-28.4,10.2-32.7,24.3h-29.2c-9.6,0-17.3-7.8-17.3-17.3v-55.5c0-5.5-4.4-9.9-9.9-9.9s-9.9,4.4-9.9,9.9v55.5 C288.8,383.2,305.4,399.9,325.9,399.9z M387.8,375.6c7.9,0,14.4,6.4,14.4,14.4s-6.4,14.4-14.4,14.4s-14.4-6.4-14.4-14.4 S379.8,375.6,387.8,375.6z" fill="#CCCCCC"> <animate id="an_d" attributeName="fill" dur="0.8s" begin="an_c.end" values="#00B4D5;#CCCCCC" /> </path> </svg>