SVG Animations using SMIL (4)

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)

Now we know how to animate a ball.
Let's have something else.

Line

Let's draw a line.

Why not look at the codes first?

<svg
  width="300px" height="300px" viewBox="0 0 300 300"
  class="mt-5 generic-svg-container border border-solid border-gray-300"
>
  <path
    stroke="#d22"
    stroke-width="5"
    fill="transparent"
    d="M 30 100 L 270 100 L 150 250"
  />
</svg>

So, we have d="M 30 100 L 270 100 L 150 250".
What does it mean?

M 30 100 means that you are moving to x=30 y=100.

L 270 100 means you are drawing a line to x=270 y=100.

L 150 250 means you are drawing a line to x=150 y=250.

This one is pretty intuitive also, huh?

NEXT BACK

» Let me know what you think!

write

to the list