DEV Community

Sai Kiran
Sai Kiran

Posted on • Updated on

D3js fundamentals Part 3 SVG Path

In the last article we learnt about svg, svg shapes and basic line generator using d3js and why path is used for generating lines.

In this article we will learn about path data and how we can make any shape we want with it. It is not necessary to learn about the path data if you want to just learn d3js, you can skip this part as this sometimes become too confusing to pickup the concepts and it just helps you in understanding what goes on in the background when you make a path.
Lets take a simplest example making a line

The data we passed to path is M100,100 L400,400.
Path data always starts with M means move, from which point you want to start drawing, every co-ordinate take two point x and y. We gave M100,100 which starts from 100,100 co-ordinates of the svg. There is also lowercase m which moves according to its relative parent instead of svg. After that we have L400,400 representing line and its co-ordinates, line is drawn from the start point of M or m. Lower case l takes points from its parent instead of svg.

Similarly we have

  • Move M m
  • Line L l
  • Horizontal H h => To draw a line horizontally
  • Vertical V v => To draw a line Vertically
  • Close path Z => joins the start and end points with a line

Here are some examples of Horizontal, Vertical and Close Path

And to make curves we have, I have built some visualizers to make it easy to understand. Play with the slider and see which values effects which part of the curve.

  • Cubic Bézier
    • C, c
    • S, s
  • Quadratic Bézier
    • Q, q
    • T, t
  • Elliptical arc
    • A, a

Top comments (0)