Drawing a path

Now that we understand Bezier curves, we can use them in our SVGs with <path> elements.

Documentation can be found here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths.

These tags take a d attribute, which stands for a set of drawing commands. The value of this attribute is any combination of the following:

  • M = moveto: move the drawing point to the given coordinates
    • M x y
  • L = lineto: draw a line from the previous point in the d command to the point given
    • L x y
  • C = curveto: draw a curve from the previous point in the d command to the point given with the given control points
    • C x1 y1, x2 y2, x y
    • The first pair is first control point
    • The second pair is second control point
    • The last pair is final ending ...

Get D3.js Quick Start Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.