This is a guide on how to use @mathieudutour/svg-path-vizualizer to understand bezier shapes.
- Path Cursor
- Absolute or Relative
- Move To Position (M)
- Cubic Bezier Curves (C)
- Close Path (z)
- External Resources
Think of the path cursor as the current position of the path. According to the specifications, the path cursor start at the coordinates (0, 0) on the canvas.
Before we dive into the heart path, it's important to understand the difference between absolute and relative coordinates. Uppercase commands use absolute coordinates, while lowercase commands use relative coordinates.
📖 Note: The following @nan/svg-paths is a great resource for path commands.
First, let's refer to an example path from the @mathieudutour/svg-path-vizualizer repository. Below is the path for the Heart shape from that resource.
<path d="M140 20C73 20 20 74 20 140c0 135 136 170 228 303 88-132 229-173 229-303 0-66-54-120-120-120-48 0-90 28-109 69-19-41-60-69-108-69z" />The heart shape begins with a Move To Position (absolute) command, written as M140 20. The Move To Position is the starting point on the canvas and moves the path cursor without drawing anything on the canvas. In this case, we're moving the path cursor to position x:140, y:20 on the canvas. This becomes the first point of the heart shape and will also be where the path eventually closes.
The next command is a Cubic Bezier Curve (absolute) command, written as C73 20 20 74 20 140. Cubic Bezier Curve commandsrequire three points to define their shape: two control points that determine how the curve bends, and one endpoint where the curve finishes.
The heart path then transitions to using relative curves. The command c0 135 136 170 228 303 continues drawing the heart's left side, but instead of using absolute coordinates, it uses positions relative to where the last command ended. This makes it easier to create flowing shapes as each new curve naturally continues from the previous endpoint.
The heart path concludes with a Close Path (relative) command, written as z. This simple command draws a straight line from the current position back to where we started with the first Move To Position command.
For a deeper understanding of the specifications, and how commands are used to create shapes, I recommend using the @svg-path-vizualizer tool, as well as reading the @nan/svg-paths resource.
This gist is also available in a public respository created by the author ktortolini. Please, feel free to contact the author via email ✉ ktortolini@smu.edu.