TOP

SVG Animations using SMIL (3)

SVG Anim (1) SVG Anim (2)
SVG Anim (3)
SVG Anim (4) SVG Anim (5) SVG Anim (6)
Let's first take a look at a simple animation.

Ball

This is how the code looks like. 
<svg width="300px" height="50px" viewBox="0 0 300 50">
  <circle cx="15" cy="25" r="15" fill="#d22">
    <animate
      attributeName="cx"
      dur="1.5s"
      begin="0s"
      values="15;280;15"
      repeatCount="indefinite"
      fill="freeze"
    />
  </circle>
</svg>
So, cx="15" cy="25" is streight forward isn't it?
We can visualize <circle cx="15" cy="25" r="15"> bellow:
cy="25" cx="15" height="50px" width="300px"
Now, what is:
values="15;280;15"
we have for the animation?
This is animation for "cx".
Moving cx from "15" to "280", and then back to "15" at the end.
Pretty intuitive, isn't it?
NEXT BACK TOP