SVG Animations using SMIL (3)

MINA

Saigon, Vietnam

サイゴン, ベトナム

Sài Gòn, Việt Nam

2022-11-13 18:25:00

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

to the list