TOP

SVG Animations using SMIL (4)

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.
M 30 100 L 270 100 L 150 250
L 150 250 means you are drawing a line to x=150 y=250.
This one is pretty intuitive also, huh?
NEXT BACK TOP