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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With