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

» Let me know what you think!

write

to the list