Astralscience

SVG Animations using SMIL (3)

2022-11-13 18:25:00

Saigon, Vietnam

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:

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 with language specifiers:

(EN)

https://astralscience.com/articles/20221113_svganim_03?lang=en

view

(JA)

https://astralscience.com/articles/20221113_svganim_03?lang=ja

view

(VI)

https://astralscience.com/articles/20221113_svganim_03?lang=vi

view

» Let me know what you think!

write a message

to the list