SVG Animations using SMIL (3)
SVG Animations using SMIL (3)
2022-11-13 18:25:00
Mina
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
URL for this post:
(EN)
https://astralscience.com/articles/20221113_svganim_03?lang=en
view
(JA)
https://astralscience.com/articles/20221113_svganim_03?lang=ja
view
» Let me know what you think!
(link to contact form)