Preface
Goal: Examining Bezier Path form Official MDN.
MDN Documents
This article is based on:
The right place to start to learn is, from the manual book.
Cubic Bezier Curve
Original Code
The original code from MDN is as below:
<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
<path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/>
<path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
There are actually nine lines, bu I write only three for simplicity.
Indented Code
Proper Indentation for Learning Purpose
We can write down the code form MDN above without any changes, but with clearer indentation.
<rect x="10" y="10" width="40" height="20"
stroke="gray" fill="transparent"/>
<path d="M 10 10
C 20 20, 40 20, 50 10"
stroke="black" fill="transparent"/>
<path d="M 70 10
C 70 20, 110 20, 110 10"
stroke="black" fill="transparent"/>
<path d="M 130 10
C 120 20, 180 20, 170 10"
stroke="black" fill="transparent"/>
You can see the result below:
We can examine better with proper indentation.
- Starting Point (Move):
M 10 10
. - Cubic
C 20 20, 40 20, 50 10
.
Using Relative Axes with Grouping
So what is it anyway with that small rectangle? Well, it is going to be easier to use relative axes, than absolute one.
We can do it by grouping the object together, such as this example code below:
<g transform="translate(10,10)" fill="#E3F2FD">
<rect x="0" y="0" width="40" height="20"
stroke="gray"/>
<path d="M 0 0 C 10 10, 30 10, 40 0"/>
</g>
Since we have three lines with the same Y axes. We can group them by Y axes first, then grouping by X axes, then we can have the relative coordinate.
<g transform="translate(0,10)" fill="#E3F2FD">
<g transform="translate(10,0)">
<rect x="0" y="0" width="40" height="20"
stroke="gray"/>
<path d="M 0 0 C 10 10, 30 10, 40 0"/>
</g>
<g transform="translate(70,0)">
<path d="M 0 0 C 0 10, 40 10, 40 0"/></g>
<g transform="translate(130,0)">
<path d="M 0 0 C -10 10, 50 10, 40 0"/></g>
</g>
At last, I add fill color, so you can understand that path is, rather an area than just line.
Please do not stop with the figure result. Our goal is to examine the coordinate in the code, rather than enjoy the preview.
Line Direction Helper
So again what is it with the curve? What is happening behind the scene?
We can write down some line, based on the relative point above, to get better understanding.
This time with help of stylesheet. For example the first curve.
<g transform="translate(0,10)" fill="#E3F2FD">
<g transform="translate(10,0)">
<rect x="0" y="0" class="box small"/>
<path d="M 0 0 C 10 10, 30 10, 40 0"/>
<path d="M 0 0 L 10 10" class="line blue"/>
<path d="M 10 10 L 30 10" class="line blue"/>
<path d="M 40 0 L 30 10" class="line blue"/>
</g>
...
</g>
The second curve.
<g transform="translate(0,10)" fill="#E3F2FD">
...
<g transform="translate(70,0)">
<path d="M 0 0 C 0 10, 40 10, 40 0"/>
<path d="M 0 0 L 0 10" class="line green"/>
<path d="M 0 10 L 40 10" class="line green"/>
<path d="M 40 0 L 40 10" class="line green"/>
</g>
...
</g>
And finally the third curve.
<g transform="translate(0,10)" fill="#E3F2FD">
...
<g transform="translate(130,0)">
<path d="M 0 0 C -10 10, 50 10, 40 0"/>
<path d="M 0 0 L -10 10" class="line red"/>
<path d="M -10 10 L 50 10" class="line red"/>
<path d="M 40 0 L 50 10" class="line red"/>
</g>
</g>
With the result as below figure:
With this helper line I can examine, the relationship between the curve and the line.
Stringed Cubic Bezier Curve
Original Code
The original code from MDN is as below:
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
There is only one line. But multiple points of direction that we should examine about.
Indented Code
With proper indentation and rectangle border, we can write down as below code:
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 190 160">
<rect x="0" y="0" width="190" height="160"
stroke="gray" fill="transparent"/>
<path d="M 10 80
C 40 10, 65 10, 95 80
S 150 150, 180 80"
stroke="black" fill="transparent"/>
</svg>
You can see the result below:
We can examine better with proper indentation.
- Move:
M 10 80
. - Cubic
C 40 10, 65 10, 95 80
. - Stringed
S 150 150, 180 80
.
Redefine Coordinate
It is not easy to examine a curve with dimension 190x160 area. How about moving the viewbox to fit 200x200 area? And put the X axis right in the middle coordinate.
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 200 200">
...
</svg>
The middle is at 100 height. This way we can examine easier The code above can be rewritten as below code:
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 200 200">
<rect x="0" y="0" width="200" height="200"
stroke="gray" fill="transparent"/>
<path d="M 0 100
C 50 30, 65 30, 95 100
S 150 170, 200 100"
stroke="black" fill="transparent"/>
</svg>
Instead of starting from 10 to 180, we start from 0 (zero) to 200.
Our goal is still to examine the coordinate in the code.
Line Direction Helper
So again what is it with the curve? What is exactly going on behind the scene?
Consider this code below:
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 200 200">
<rect x="0" y="0" class="box big"/>
<path d="M 00 100
C 50 30, 65 30, 95 100
S 150 170, 200 100"
stroke="black" fill="transparent"/>
<path d="M 0 100 L 50 30" class="line blue"/>
<path d="M 50 30 L 65 30" class="line blue"/>
<path d="M 65 30 L 95 100" class="line blue"/>
</svg>
It looks like something is missing.
Since the original point from stringed cannot explain what happened, I manually add the green line as below:
<path d="M 0 100 L 50 30" class="line blue"/>
<path d="M 50 30 L 65 30" class="line blue"/>
<path d="M 65 30 L 95 100" class="line blue"/>
<path d="M 95 100 L 125 170" class="line green"/>
<path d="M 95 100 L 150 170" class="line blue"/>
<path d="M 150 170 L 200 100" class="line blue"/>
With the result as below figure:
I know, string can be rather confusing. But at least we can have the big picture, to get the relationship between the curve and the line.
What is Next ?
After cubic curves, we are going to continue with quadratic curves.
Consider continue reading [ Bezier SVG - MDN Path - Quadratic ].
Thank you for reading.