TOP

SVG Animations using SMIL (5)

SVG Anim (1) SVG Anim (2) SVG Anim (3) SVG Anim (4)

SVG Anim (5)

SVG Anim (6)

Now you know what M 30 100 and 270 100 means.

Let's learn something interesting.

Bezier Curve

What are Bezier Curves?

OK. This is the Bezier curve.

Now. Why is it that we want to learn Bezier curves?
What is it for?

Well, we want Bezier curves so (in most occasions) that we can use it as a Motion Path to move some other objects.

Control Points

When you draw a Bezier curve, you need Control Points.
Although they are invisible above, you can see 2 control points bellow:

For the 1st CP

For the 2nd CP

We can experiment on changing values.

In the above, change the ranges so that you can determine y for either of the control points. As you can see, narrower these 2 points make the region, we have the Bezier Curve "less" curvy.

I hope you can get a grasp of roles that control points have for the Bezier curve.

Now, let's take a look at our codes.

<svg
  width="350px" height="300px" viewBox="0 0 350 300"
  style="overflow:visible;"
>
  <path
    d="M20,150 C100,20 240,280 320,150"
    stroke="#888"
    stroke-width="2"
    fill="transparent"
  />
</svg>

Notice we have something similar.
For this time, we have: d="M20,150 C100,20 240,280 320,150"

What are they?

I bet M20,150 makes sense, right?
We are first moving there.

Now, what's C100,20 240,280 320,150?

C is to denote that the control coints begin.

For the above values can break into the 3 parts:

100,20
240,280
320,150

Adding the first command for M (for "moving"), we can say, the control points are made up of the following 4 values.

M20,150
100,20
240,280
320,150

NEXT BACK TOP