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:

SVG MDN: Quadratic Bezier Curve: Original

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.

SVG MDN: Quadratic Bezier Curve: Redefining Coordinates

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:

SVG MDN: Quadratic Bezier Curve: Line Direction

There should be no problem to understand, the relationship between the curve and the line.


Stringed Quadratic Bezier Curve

Using T instead of S.

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:

SVG MDN: Stringed Quadratic Bezier Curve: Original

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.

SVG MDN: Stringed Quadratic Bezier Curve: Redefining Coordinates

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:

SVG MDN: Stringed Quadratic Bezier Curve: Line Direction

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.