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.
Quadratic Bezier Curve
Original Code
The original code from MDN is as below:
<path d="M 10 80 Q 95 10 180 80" 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.
<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
Q 95 10 180 80"
stroke="black" fill="transparent"/>
</svg>
You can see the result below:
We can examine better with proper indentation.
- Move:
M 10 80
. - Quadratic
Q 95 10 180 80
.
Redefine Coordinate
Just like previous example, 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>
Again, 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
Q 100 20 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
For the third time. What is it with the curve? What is happening behind the scene?
<svg xmlns="http://www.w3.org/2000/svg"
viewbox="0 0 200 200">
<rect x="0" y="0" class="box big"/>
<path d="M 0 100
Q 100 20 200 100"
stroke="black" fill="transparent"/>
<path d="M 0 100 L 100 20" class="line blue"/>
<path d="M 100 20 L 200 100" class="line blue"/>
</svg>
With the result as below figure:
There should be no problem to understand, the relationship between the curve and the line.
Stringed Quadratic Bezier Curve
Using
T
instead ofS
.
Original Code
The original code from MDN is as below:
<path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
There is only one bezier line, with multiple points.
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">
<path d="M 10 80
Q 52.5 10, 95 80
T 180 80"
stroke="black" fill="transparent"/>
</svg>
You can see the result below:
We can examine better with proper indentation.
- Move:
M 10 80
. - Quadratic
Q 52.5 10, 95 80
. - Stringed
T 180 80
.
Redefine Coordinate
For the third time, 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.
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
Q 50 20, 100 100
T 200 100"
stroke="black" fill="transparent"/>
</svg>
Instead of starting from 10 to 180, we start from 0 (zero) to 200.
Remember our goal. To examine the coordinate in the code, instead just displaying result.
Line Direction Helper
For the fourth time. What is it with the curve? What is happening 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 0 100
Q 50 0, 100 100
T 200 100"
stroke="black" fill="transparent"/>
<path d="M 0 100 L 50 0" class="line blue"/>
<path d="M 50 0 L 100 100" class="line blue"/>
</svg>
Whoops, it looks like something is missing, again.
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 0" class="line blue"/>
<path d="M 50 0 L 100 100" class="line blue"/>
<path d="M 100 100 L 150 200" class="line green"/>
<path d="M 100 100 L 200 100" class="line blue"/>
With the result as below figure:
I must admit I’m still confused. But I can use the Bezier now.
What is Next ?
We are ready to apply our knowledge, and pour it into a web page.
Consider continue reading [ Bezier SVG - Generating DOM ].
Thank you for reading.