Animate SVG with animateTransform (translate + skew) - svg
How can I make the red bar skew into the position of the green?
I am trying to animate a logo with SVG animation. Therefore I am using skewX and transition for the animateTransform, but somehow only the skewX animation is executed. The transition seems not to work. (if I run the animations without the text part it works, but all together, seems to be conflicting.
Updated (to be more clear):
The group with the ID "Bar-Falling" has 2 animations:
<animateTransform attributeName="transform" type="skewX" ..
and
<animateTransform attributeName="transform" type="translate" ...
Why is the translate animation not working?
Any help appreciated.
<svg xmlns="http://www.w3.org/2000/svg" width="1492.94" height="157.41" viewBox="0 0 1492.94 157.41">
<g id="Socia">
<path d="M36,117.5a23,23,0,0,0,7.3,8.5A29.61,29.61,0,0,0,54,130.8a48.92,48.92,0,0,0,12.6,1.6,75.9,75.9,0,0,0,9.5-.7,34.66,34.66,0,0,0,9.5-2.8A21.28,21.28,0,0,0,93,123a14.49,14.49,0,0,0,3-9.4,13.49,13.49,0,0,0-3.9-9.9,30,30,0,0,0-10.2-6.3A107,107,0,0,0,67.58,93c-5.3-1.3-10.8-2.7-16.3-4.2a130.32,130.32,0,0,1-16.4-5.2,55.48,55.48,0,0,1-14.3-7.9,36.83,36.83,0,0,1-10.4-12.2,36.88,36.88,0,0,1-3.9-17.6,38.27,38.27,0,0,1,5-20.1,44.16,44.16,0,0,1,13-14.2,55.38,55.38,0,0,1,18.1-8.4A76.8,76.8,0,0,1,62.58.5a102.66,102.66,0,0,1,22.7,2.6,56.65,56.65,0,0,1,19.3,8.5A43.2,43.2,0,0,1,118,26.7,46.44,46.44,0,0,1,123,49H91a29,29,0,0,0-2.9-11.2,19.51,19.51,0,0,0-6.4-7,29.43,29.43,0,0,0-9.2-3.6,53.39,53.39,0,0,0-11.3-1,42.55,42.55,0,0,0-8,.8,21.89,21.89,0,0,0-7.3,2.9,19.1,19.1,0,0,0-5.3,5.3,14.83,14.83,0,0,0-2.2,8,12.77,12.77,0,0,0,1.8,7.1,15.36,15.36,0,0,0,6.6,5.2,81.69,81.69,0,0,0,13.7,4.6c5.8,1.5,13.5,3.5,22.9,5.9,2.8.6,6.7,1.6,11.7,3.1A55.17,55.17,0,0,1,110,76.2a45.3,45.3,0,0,1,12.8,13c3.6,5.4,5.3,12.3,5.3,20.8a45.31,45.31,0,0,1-4,19.2,40.82,40.82,0,0,1-11.9,15.1,55.62,55.62,0,0,1-19.5,10,95.22,95.22,0,0,1-27.1,3.6,93.77,93.77,0,0,1-24.2-2.9,62,62,0,0,1-20.7-9.6,47.67,47.67,0,0,1-14.2-16.7,48.29,48.29,0,0,1-5.3-24.1h32.1A28.77,28.77,0,0,0,36,117.5" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<path d="M143.18,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0A49.82,49.82,0,0,1,248,76.75a66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<path d="M320.53,65.1a20.57,20.57,0,0,0-12,3.3,26.45,26.45,0,0,0-7.9,8.4,35.46,35.46,0,0,0-4.3,11.5,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.56,24.56,0,0,0,7.6,8.1,21.19,21.19,0,0,0,11.8,3.2c7.2,0,12.7-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h29c-2,14.5-7.6,25.5-16.9,33.1s-21.2,11.4-35.6,11.4a59.53,59.53,0,0,1-22.5-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.67,39.67,0,0,1,16.6,31h-29.3c-2.1-12.7-9.5-19-22.3-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<rect x="386.78" y="44.39" width="29.9" height="109" style="fill: #fac800"/>
<rect x="386.48" y="3.5" width="29.9" height="24.39" style="fill: #fac800"/>
<path d="M508.33,111.74a49.13,49.13,0,0,1-.5,6.7,24,24,0,0,1-2.8,8.3,20.12,20.12,0,0,1-7.1,7.1c-3.2,2-7.8,3-13.7,3a39.35,39.35,0,0,1-6.9-.6,17.52,17.52,0,0,1-5.9-2.2,10.38,10.38,0,0,1-4-4.3,16.38,16.38,0,0,1,0-13.7,13,13,0,0,1,3.9-4.5,17.82,17.82,0,0,1,5.7-2.8q3.3-1,6.6-1.8c2.4-.4,4.8-.8,7.1-1.1s4.7-.6,6.9-1a42.07,42.07,0,0,0,6.1-1.6,12.08,12.08,0,0,0,4.7-2.6ZM469,78.54c.6-5.9,2.5-10.1,5.9-12.7s8-3.8,14-3.8a63,63,0,0,1,7.5.5,16.4,16.4,0,0,1,6.1,2.1,11.81,11.81,0,0,1,4.2,4.4,15.71,15.71,0,0,1,1.6,7.7,8.25,8.25,0,0,1-2.7,7.1,20.59,20.59,0,0,1-8.1,3.7,75.83,75.83,0,0,1-11.6,1.9c-4.3.4-8.8,1-13.3,1.7a120.86,120.86,0,0,0-13.3,2.8,39.23,39.23,0,0,0-11.8,5.3,27.7,27.7,0,0,0-8.4,9.6,32.25,32.25,0,0,0-3.3,15.3,34.11,34.11,0,0,0,2.8,14.5,27,27,0,0,0,7.9,10.1,33.43,33.43,0,0,0,11.9,6,54.46,54.46,0,0,0,14.5,1.9,66.48,66.48,0,0,0,19.8-3,39.48,39.48,0,0,0,16.9-10.3,45.11,45.11,0,0,0,.7,5.3,33.42,33.42,0,0,0,1.4,5.2h30.4a25.69,25.69,0,0,1-3-10.1,112.67,112.67,0,0,1-.8-14.2V73a26.57,26.57,0,0,0-4.4-16,29.58,29.58,0,0,0-11.5-9.2,51.51,51.51,0,0,0-15.4-4.5,116.21,116.21,0,0,0-16.7-1.2,90.08,90.08,0,0,0-18,1.8,51.32,51.32,0,0,0-16.1,6,36.1,36.1,0,0,0-11.8,11.2,34.16,34.16,0,0,0-5.3,17.5Z" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
</g>
<g id="Bar-Falling">
<rect x="555.29" y="3.59" width="33.1" height="150.6" style="fill: #F11344" >
<animateTransform
attributeName="transform"
type="skewX"
from="0"
to="-20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"/>
<animateTransform
attributeName="transform"
type="translate"
from="0"
to="20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
additive="sum"/>
</rect>
</g>
<g id="Placeholder-For-Where-Bar-Should-Be-Positioned-After-Animation">
<polygon points="645.83 3.59 588.13 154.19 555.63 154.19 613.33 3.59 645.83 3.59" style="fill: #00ff00">
</polygon>
</g>
<g id="Bar-1">
<rect x="666.29" y="3.59" width="33.1" height="150.6" style="fill: #fac800">
<animate
attributeType="CSS"
attributeName="opacity"
begin="0.2s"
from="0"
to="1"
dur="1s"/>
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0"
dur="0.2s"/>
</rect>
</g>
<g id="Bar-2">
<rect x="722.44" y="4.09" width="33.1" height="150.6" transform="translate(-1.37 1.61) rotate(-0.16)" style="fill: #fac800">
<animate
attributeType="CSS"
attributeName="opacity"
begin="0.3s"
from="0"
to="1"
dur="1s"/>
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0"
dur="0.3s"/>
</rect>
</g>
<g id="Income">
<animateTransform
attributeName="transform"
type="translate"
additive="sum"
from="-120"
to="0"
begin="0s"
dur="0.3s"
repeatCount="1"
fill="freeze"
/>
<rect id="I" x="777.18" y="3.59" width="33.1" height="150.6" style="fill: #fac800">
</rect>
<path id="N" d="M862.43,45.82V61h.6a34,34,0,0,1,14.8-13.8,42.53,42.53,0,0,1,18.5-4.3,51.05,51.05,0,0,1,19.7,3.3,29.52,29.52,0,0,1,12.2,9,35.46,35.46,0,0,1,6.2,14.2,95.87,95.87,0,0,1,1.8,18.5v67h-30V93.22q0-13.5-4.2-20.1c-2.8-4.4-7.8-6.7-15-6.7-8.1,0-14.1,2.4-17.8,7.3s-5.5,12.8-5.5,23.9v57.2h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="C" d="M1008.48,65.1a21.34,21.34,0,0,0-12,3.3,25.09,25.09,0,0,0-7.8,8.4,35.79,35.79,0,0,0-4.3,11.4,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.89,24.89,0,0,0,7.6,8.2,21.41,21.41,0,0,0,11.8,3.2c7.1,0,12.6-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h28.9c-2,14.5-7.6,25.5-16.9,33.1s-21.1,11.4-35.6,11.3a57.17,57.17,0,0,1-22.4-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.7,39.7,0,0,1,16.6,31.1h-29.3c-2.1-12.7-9.5-18.9-22.4-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="O" d="M1075.53,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0,49.82,49.82,0,0,1,29.2,29.7,66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="M" d="M1229.53,45.34v14.8h.4a42.4,42.4,0,0,1,14.2-13.1,37.49,37.49,0,0,1,19.1-4.6,42.79,42.79,0,0,1,19,4.1,26.94,26.94,0,0,1,13,14.2,47,47,0,0,1,13.2-12.7,36,36,0,0,1,19.7-5.5,61.65,61.65,0,0,1,16,2.1,32.63,32.63,0,0,1,12.6,6.7,30.31,30.31,0,0,1,8.2,12.1,50.43,50.43,0,0,1,3,18v72.9H1338V92.64c0-3.6-.2-7.1-.4-10.3a22.39,22.39,0,0,0-2.3-8.4,14,14,0,0,0-5.6-5.7,20.34,20.34,0,0,0-10-2.2,19,19,0,0,0-10.2,2.4,17,17,0,0,0-6.1,6.4,25.86,25.86,0,0,0-2.9,8.9,67.25,67.25,0,0,0-.7,10v60.7h-29.9V93.24c0-3.2,0-6.4-.2-9.6a26.56,26.56,0,0,0-1.8-8.8,13.84,13.84,0,0,0-5.3-6.4,20.26,20.26,0,0,0-10.8-2.5,21.25,21.25,0,0,0-5.6,1,16.77,16.77,0,0,0-6.7,3.6,22.1,22.1,0,0,0-5.6,7.6,30.3,30.3,0,0,0-2.3,13v63.4h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="E" d="M1422.58,128c4.5,4.4,11,6.5,19.4,6.5a27.06,27.06,0,0,0,15.6-4.5c4.3-3,7-6.2,8-9.6H1492c-4.2,13-10.7,22.4-19.4,28s-19.2,8.5-31.6,8.4a62.37,62.37,0,0,1-23.3-4.2,49.43,49.43,0,0,1-17.5-11.7,53.12,53.12,0,0,1-10.9-18.1,65.4,65.4,0,0,1-3.9-23.2,63.24,63.24,0,0,1,3.9-22.8,52.6,52.6,0,0,1,29-30.4A57,57,0,0,1,1441,42a51.87,51.87,0,0,1,24.2,5.3,48.45,48.45,0,0,1,17,14.5,58.48,58.48,0,0,1,9.6,20.7,76.29,76.29,0,0,1,2.1,24.3h-78.7c.5,9.8,2.9,16.9,7.4,21.2m33.9-57.3c-3.6-3.9-9-5.9-16.3-5.9a27,27,0,0,0-11.9,2.4,23.25,23.25,0,0,0-7.6,6,21.33,21.33,0,0,0-4,7.6,34.33,34.33,0,0,0-1.4,7.1h48.6c-1.4-7.6-3.9-13.3-7.4-17.2" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
</g>
</svg>
Related
How to add animation in the clippath of svg
I'm learning how to use svg clippath. And I know how to use the static clippath. <svg width="500" height="150"> <clipPath id="circle"> <circle cx=50 cy=50 r=50></circle> </clipPath> <circle cx=50 cy=50 r=50></circle> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'> </rect> </svg> there I can get a clip rect. code Image but when I try to add an animation, the rect could out of the clippath. <svg width="500" height="150"> <clipPath id="circle"> <circle cx=50 cy=50 r=50></circle> </clipPath> <circle cx=50 cy=50 r=50></circle> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" ></animateMotion> </rect> </svg> The rect is out of clippath what I need is when the rect is out of clippath, it could not be seen any more. The clippath is not allow to move. So how to get the rectangle in motion to remain in the clippath？
You put the clipped rect in a group and you apply the animation to the group like so: <svg viewBox="0 0 400 300"> <clipPath id="circle"> <circle cx=50 cy=50 r=50> </circle> </clipPath> <g> <circle cx=50 cy=50 r=50></circle> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;" clip-path='url(#circle)'> </rect> <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" ></animateMotion> </g> </svg> UPDATE The OP is commenting that his question has now been revised. My question is how to not show the rectangle when it moves outside the clippath? In this case you put the animated rect in a group and you clip the group like so: <svg viewBox="0 0 500 150"> <clipPath id="circle"> <circle cx=50 cy=50 r=50></circle> </clipPath> <g clip-path='url(#circle)'> <circle cx=50 cy=50 r=50></circle> <rect x="0" y="0" width="30" height="15" style="stroke: #ff0000; fill: none;" > <animateMotion path="M10,50 q60,50 100,0 q60,-50 100,0" begin="0s" dur="10s" repeatCount="indefinite" rotate="auto" ></animateMotion> </rect> </g> </svg>
Svg alternate animateMotion
I want to have repeating alternate direction for the animation <animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" > <mpath href="#path1"/> </animateMotion> Keypoints and KeyTimes are not working Full code: <svg width="200" height="200" viewBox="0 0 700 700"> <g> <path id="path1" d="M200,350 C 200,440 400,150 400,250 M200,350" fill="none" stroke="blue" stroke-width="7.06" /> <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" /> <animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" > <mpath href="#path1"/> </animateMotion> </g> </svg>
First there is an issue with your code. You are animating a group of shapes and you are using one of those shapes as mpath.
In the next examples I'm animating the triangle over the integral like shape. In order to animate the triangle in both ways I'm rewriting the mpath so that the path will reverse to the starting point.
svg{width:90vh}
<svg viewBox="0 0 700 700">
<path id="path1" d="M200,350 C 200,440 400,150 400,250 C400,150 200,440 200,350" fill="none" stroke="blue" stroke-width="7.06" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<animateMotion keyPoints="0;1;0" keyTimes="0;0.5;1" dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath href="#path1"/>
</animateMotion>
</path>
</svg>
However if you want the triangle to stay the same side of the curve when reversing, in this case I'm using 2 animations, each one begining when the previous one ends. For the second animation I'm using rotate="auto-reverse"
svg{width:90vh}
<svg viewBox="0 0 700 700">
<path id="path1" d="M200,350 C 200,440 400,150 400,250" fill="none" stroke="blue" stroke-width="7.06" />
<path id="path2" d="M400,250 C400,150 200,440 200,350" fill="none" stroke="blue" stroke-width="7.06" />
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06">
<animateMotion id="a1" dur="3s" rotate="auto" begin="0;a2.end">
<mpath href="#path1" />
</animateMotion>
<animateMotion id="a2" dur="3s" rotate="auto-reverse" begin="a1.end">
<mpath href="#path2" />
</animateMotion>
</path>
</svg>
Please observe that the path for the second animation is the path for the first animation reversed.
SVG hide an object until needed
I'm able to move an object along a Bezier Curve but am having some difficulty with 'defs' and 'use'. My object (circle) appears at 0,0 before the animation begins, then appears in the correct position. <svg viewBox="0 0 500 300" style="border:1px solid black; width:500; height:500;" xmlns="http://www.w3.org/2000/svg" > <path id="track" d="M100,200 C200,150 300,250 400,200" stroke-width="3" stroke="#000" fill="none"/> <circle id="circ1" r="10" cx="0" cy="0" fill="red" > <animateMotion begin="1s" dur="6s" fill="freeze"> <use href="#circ1" cx="100" cy="200"/> <mpath xlink:href="#track"/> </animateMotion> </circle> </svg> How can I make it appear at the beginning of the Bezier line, not at 0,0?
You can use <set> elements to set the position of the circle at the begining of the curve. Next at 1s you need to set again the position of the circle on 0,0 <svg viewBox="0 50 500 300" style="border:1px solid black; width:500; height:300;" xmlns="http://www.w3.org/2000/svg" > <path id="track" d="M100,200 C200,150 300,250 400,200" stroke-width="3" stroke="#000" fill="none"/> <circle id="circ1" r="10" cx="0" cy="0" fill="red"> <set begin="0" attributeName="cx" to="100" /> <set begin="0" attributeName="cy" to="200" /> <set begin="1s" attributeName="cx" to="0" /> <set begin="1s" attributeName="cy" to="0" /> <animateMotion begin="1s" dur="6s" fill="freeze"> <!--<use href="#circ1" cx="100" cy="200"/>--> <mpath xlink:href="#track"/> </animateMotion> </circle> </svg> Yet another solution would be changing the origin of the curve so that it begins in the 0,0. Please observe that I've changed the value of the viewBox attribute so that you can still see the curve in the middle of the svg canvas. <svg viewBox="-100 -150 500 300" style="border:1px solid black; width:500; height:300;" xmlns="http://www.w3.org/2000/svg" > <path id="track" d="M0,0C100,-50,200,50,300,0" stroke-width="3" stroke="#000" fill="none"/> <circle id="circ1" r="10" cx="0" cy="0" fill="red" > <animateMotion begin="1s" dur="6s" fill="freeze"> <!--<use href="#circ1" cx="100" cy="200"/>--> <mpath xlink:href="#track"/> </animateMotion> </circle> </svg>
How to drag a SVG to start an animation?
I have made a beer tap where you can click on the handle to start the animation. I would like to change it so that you have to click and drag the handle back to start the animation. How would something like this be achieved? If you cannot drag to activate the animation. How can I speed up the pulling back animation and freeze it at the pulled back position until complete? I would also like to know why the small bubbles do not stop and reset when the handle is clicked again like the rests of the animation? JsFiddle to SVG <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="233.816px" height="643.371px" viewBox="0 0 233.816 643.371" enable-background="new 0 0 233.816 643.371" xml:space="preserve"> <path id="pour" fill-rule="evenodd" clip-rule="evenodd" fill="#C06028" d="M134.793,600.695c0,2.761-2.239,5-5,5h-5c-2.761,0-5-2.239-5-5 v-340c0-2.761,2.239-5,5-5h5c2.761,0,5,2.239,5,5V600.695z" opacity="0"> <set attributeName="opacity" to="1" begin="taphandle.click" repeatCount="0" fill="freeze" /> <animate id="animatePour" dur="0.1s" attributeName="opacity" from="1" to="0" begin="taphandle.click + 4.9s" repeatCount="0" fill="freeze" /> </path> <g id="beer-glass_1_"> <g id="beer_1_"> <linearGradient id="beer-fill-g" x1="0.5" y1="1" x2="0.5" y2="0"> <stop offset="0" stop-opacity="1" stop-color="#C06028"> <animate id="#animateBeer1"attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="taphandle.click" fill="freeze"/> </stop> <stop offset="0" stop-opacity="0" stop-color="#C06028"> <animate id="#animateBeer2" attributeName="offset" values="0;1" repeatCount="1" dur="5s" begin="taphandle.click" fill="freeze"/> </stop> </linearGradient> <path id="beer-fill" fill-rule="evenodd" clip-rule="evenodd" fill="url(#beer-fill-g)" d="M80.068,383.621 c-0.731,4.043,0.561,17.75-0.415,24.842c-2.13,15.49-0.908,28.531,0.895,36.818c2.295,10.549,5.457,21.016,6.568,31.691 c2.496,23.989,4.08,48.079,5.804,72.144c1.403,19.584,2.343,39.203,3.899,58.773c0.143,1.793,3.068,4.441,5.066,4.832 c10.412,2.041,20.926,4.717,31.436,4.861c19.596,0.268,39.221-0.885,58.813-1.842c4.91-0.24,9.746-1.992,14.617-3.043 c2.994-0.645,4.346-2.301,4.535-5.545c1.4-24.098,3.053-48.18,4.475-72.277c1.855-31.391,4.037-62.657,11.771-93.394 c1.838-7.306,3.26-29.661,1.873-44.111c-0.568-5.906-0.922-8.063-0.717-11.75L80.068,383.621z"/> <g id="beer-bubbles"> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="108.337" cy="631.698" r="5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 3s" dur="2s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="133.793" cy="630.698" r="4"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 2s" dur="3s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="181.17" cy="636.198" r="4.5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 5.5s" dur="1s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="204.337" cy="622.622" r="5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 3.5s" dur="1.5s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="164.003" cy="626.622" r="4"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 2s" dur="3s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="122.293" cy="620.122" r="2.5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 5s" dur="1s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="187.17" cy="624.122" r="1.5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 4s" dur="1.5s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="149.837" cy="634.198" r="2.5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 5s" dur="2s" repeatCount="indefinite"/> </circle> <circle opacity="0.9" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" cx="104.837" cy="619.122" r="1.5"> <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -250" begin="taphandle.click + 2s" dur="3s" repeatCount="indefinite"/> </circle> </g> </g> <path id="glass-light" opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M99.138,412.893 c-7.283-0.969-7.33-0.976-8.471,6.327c-2.135,13.66,1.293,26.705,3.902,39.969c3.234,16.442,5.487,33.095,7.663,49.723 c1.531,11.703,2.247,23.514,3.282,35.28c0.293,3.328,1.399,5.123,4.586,3.42c0-10.257,0.45-20.234-0.104-30.155 c-0.844-15.104-1.839-30.24-3.801-45.228c-1.547-11.831-5.221-23.38-6.855-35.205C98.267,429.25,99.138,421.208,99.138,412.893z"/> <path id="glass_1_" opacity="1" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M234.15,406.965 c-0.014-0.075-2.215-51.691-2.229-51.76c-0.605-2.835-3.385-1.696-5-0.793c-0.01,0.156,2.971,52.208,2.963,52.364 c-0.613,11.878,0.381,24.086-2.236,34.485c-7.735,30.736-9.917,62.003-11.771,93.394c-1.423,24.097-3.074,48.18-4.476,72.277 c-0.188,3.244-1.54,4.9-4.534,5.545c-4.871,1.05-9.707,2.803-14.617,3.043c-19.592,0.957-39.218,2.109-58.813,1.841 c-10.51-0.145-21.024-2.819-31.437-4.86c-1.998-0.391-4.923-3.039-5.066-4.833c-1.557-19.57-2.497-39.188-3.899-58.772 c-1.724-24.065-3.307-48.154-5.804-72.145c-1.111-10.676-4.273-21.143-6.567-31.69c-2.504-11.511-2.756-25.218-0.936-37.101 c0.124-0.809,0.32-52.052,0.463-52.843c-2.516-1.228-3.44-0.6-4.063,0.005c-0.246,0.239-1.166,52.796-1.186,52.916 c-0.515,2.971-1.537,8.079-1.939,10.334c0,4,0,8,0,12c0.937,5.031,1.485,10.173,2.876,15.076 c6.298,22.195,8.559,44.973,10.181,67.853c1.175,16.572,2.348,33.146,3.4,49.726c1.293,20.367,2.598,40.735,3.618,61.116 c0.412,8.237,2.684,12.077,10.593,14.702c3.285,1.091,6.725,1.868,10.156,2.33c6.703,0.902,13.448,1.483,20.176,2.197 c13.333,0,26.666,0,40,0c3.264-0.371,6.563-0.554,9.785-1.15c7.938-1.472,15.993-2.617,23.703-4.901 c5.107-1.513,7.354-5.948,7.484-11.659c0.27-11.767,0.885-23.535,1.705-35.279c2.328-33.334,4.05-66.737,7.555-99.951 c2.092-19.845,7.08-39.383,10.768-59.059c0-4.333,0-8.667,0-13C234.539,415.778,234.607,409.392,234.15,406.965z"/> <path id="foam" fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M227.107,357.142c0.008-0.202,0.029-0.4,0.029-0.604 c0-8.284-6.715-15-15-15c-1.994,0-3.894,0.397-5.634,1.104c-3.636-3.758-8.724-6.104-14.366-6.104c-2.441,0-4.77,0.459-6.933,1.26 c-3.116-1.395-6.565-2.177-10.2-2.177c-5.556,0-10.686,1.814-14.836,4.88c-3.33-2.478-7.444-3.963-11.914-3.963 c-6.477,0-12.217,3.092-15.872,7.865c-3.65-2.085-7.873-3.282-12.377-3.282c-4.183,0-8.122,1.032-11.586,2.848 c-1.612-0.592-3.346-0.932-5.164-0.932c-5.568,0-10.416,3.041-13.004,7.545c-9.739,1.345-17.246,9.68-17.246,19.789 c0,11.046,8.954,20,20,20c4.576,0,8.78-1.554,12.15-4.14c4.152,3.071,9.288,4.89,14.85,4.89c2.877,0,5.638-0.492,8.21-1.387 c1.578,0.564,3.269,0.887,5.04,0.887c4.178,0,7.955-1.711,10.674-4.468c3.667,4.21,9.053,6.884,15.075,6.884 c6.28,0,11.878-2.9,15.545-7.428c0.152,0.003,0.303,0.012,0.455,0.012c0.599,0,1.191-0.029,1.779-0.07 c2.53,4.71,7.5,7.914,13.221,7.914c4.706,0,8.902-2.171,11.652-5.563c3.542,3.183,8.211,5.135,13.348,5.135 c11.045,0,20-8.954,20-20C235.003,366.547,231.898,360.795,227.107,357.142z" transform="translate(0, 250)"opacity="0"> <set attributeName="opacity" to="1" begin="taphandle.click" repeatCount="0" fill="freeze" /> <animateTransform id="animateFoam" attributeName="transform" type="translate" from="0 250" to="0 0" begin="taphandle.click" dur="5s" fill="freeze"/> </path> </g> <g id="tap"> <path id="taphandle" class="handle" fill="#888888" d="M123.077,164.857l-2.97-158.875c0-3.304,6.71-5.982,14.981-5.982 c8.275,0,14.984,2.678,14.984,5.982l-2.996,160.327h-0.242c1.662,2.89,2.641,6.394,2.641,10.168 c0,9.914-6.707,17.946-14.983,17.946c-8.273,0-14.982-8.034-14.982-17.946C119.509,172.044,120.853,167.988,123.077,164.857z"> <animateTransform id="animateHandle" attributeName="transform" type="rotate" from="0 130 160" to="-15 130 160" begin="taphandle.click" dur="5s"/> </path> <path id="tap_1_" fill="#999999" d="M174,193.621h-21.575c0-9.914-8.051-17.947-17.979-17.947s-17.979,8.035-17.979,17.947H84.69 l1.711-28.459c0-0.826-2.685-1.496-5.993-1.496c-3.311,0-5.993,0.67-5.993,1.496l1.711,28.459H47.348l-5.994-5.984v-4.787 c0-3.963-2.685-7.178-5.993-7.178H17.378c-2.968,0-5.427,2.588-5.902,5.982H5.992c-3.31,0-5.993,2.678-5.992,5.982v47.858 c0,3.305,2.685,5.981,5.992,5.981h5.483c0.478,3.396,2.937,5.983,5.903,5.983h17.98c3.31,0,5.991-3.215,5.991-7.183V233.7 l5.993-5.982h38.854l29.595,43.978c1.898,2.707,8.933,1.063,15.711-3.678c6.779-4.738,10.735-10.771,8.838-13.479l-18.758-28.018 l50.621-2.99c3.309,0,7.791-6.695,7.791-14.957C179.995,200.316,177.312,193.621,174,193.621z"/> </g> </svg>
SVG animation not repeating properly
I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation in action. Code below https://jsfiddle.net/allanberlin/cma0ejkw/ <svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> <g> <path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1 c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9 c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4 c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0 c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2 c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2 c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5 c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z"/> <animate id="Circle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="0s; Mona.end"/> </g> <g> <path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2 L42.3,67l4.1-29.3L30.8,61.2z"/> <animate id="Triangle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="2s; Circle.begin+1s"/> </g> <g> <path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8 c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0 c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8 c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0 c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4 c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3 c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3 c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2 l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0 c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8 c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7 c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0 c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3 c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5 C70.6,43.4,71.1,44.8,72.3,45.3z"/> <animate id="Mona" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="3s; Triangle.begin+1s"/> </g> </svg>
visible has two i's and no a.
Do you really want everything to appear at once. If not make the groups hidden by default as I've done.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g visibility="hidden">
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" />
<animate id="Circle" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="0s; Mona.end"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z"/>
<animate id="Triangle" from="hidden" to="visible" dur="1s" attributeName="visibility" begin="Circle.begin+1s"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z"/>
<animate id="Mona" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="Triangle.begin+1s"/>
</g>
</svg>
Here's another way to do it, but without the flashing.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" visibility="hidden">
<set id="Circle" attributeName="visibility" attributeType="CSS" to="visible"
begin="0s; Mona.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Circle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z" visibility="hidden">
<set id="Triangle" attributeName="visibility" attributeType="CSS" to="visible"
begin="Circle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Triangle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z" visibility="hidden">
<set id="Mona" attributeName="visibility" attributeType="CSS" to="visible"
begin="Triangle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Mona.end" fill="freeze"/>
</path>
</g>
</svg>