2

Can you advice how to make continuous loop for this back and forth animation of fire?

I use begin="0s;animation2.end", begin="animation1.end" and repeatCount="indefinite" but it doesn't work

<path fill="#D4563D" d="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418
    c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384
    c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z">
    <animate id="animation1"
             attributeName="d"
            attributeType="XML" 
             from="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418
                c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384
                c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z"
             to="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418
                c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384
                c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z" 
             dur="1s"
             />
    <animate id="animation2"
             attributeName="d"
             attributeType="XML"
             from="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418
                c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384
                c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z" 
             to="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418
                c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384
                c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
             dur="1s" 
             begin="1s" />
</path>
user2553908
  • 21
  • 3

2 Answers2

3

You can specify several key values of the animation in the values attribute of the animate element. They are semicolon-separated (as the spec states). The trick here is to declare an animation that goes from the first state to the intermediary state and back to the first state by using three key values, the first and the last being the same. With the repeatCount attribute set to indefinite, the animation continuously interpolates between the two states. Of course, the dur attribute must be doubled.

<path fill="#D4563D" d="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418
    c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384
    c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z">
    <animate 
        attributeName="d"
        begin="0s"
        dur="2s"
        repeatCount="indefinite"
        values="
            M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z;
            M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z;
            M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z"
        />
</path>
David Bonnet
  • 1,168
  • 11
  • 11
1

You should use repeatCount="1" and begin="0s;animation2.end" on first animation and begin="animation1.end" on second animation. Tested and working (on Chrome).

MS13
  • 327
  • 5
  • 16