## Learn to draw your own SVG shapes in the browser

The following commands can be used in the **d** attribute within a **path** to help you draw your own SVG shapes.

Like so:

```
<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
</svg>
```

*This code draws an SVG plus sign (+)*.

A quick note:

**Capital letter**commands, like M, refer to**absolutely positioned**points.**Lowercase letter**commands, like m, refer to**relatively positioned**points.

## M

moveto

*X,Y*

Begins the string at an absolute, designated position. If more than one pair of coordinates are provided, it’s as if the other pairs are preceded by an L.

## m

moveto

*x,y*

Same as M, except that if more than one pair of coordinates are provided, extra pairs are processed as if preceded by an l.

## L

lineto

*X,Y*

Draws a line from the last position to the specified position.

## l

lineto

*x,y*

Draws a line from the last position to a relative position: x pixels to the right and y to the bottom.

## H

horizontal lineto

*x*

Draws a horizontal line to the specified, absolute x position.

## h

horizontal lineto

*x*

Draws a horizontal line x pixels to the right (if x is negative, the line is drawn to the left).

## V

vertical lineto

*y*

Draws a vertical line to the specified, absolute y position.

## v

vertical lineto

*y*

Draws a vertical line x pixels to the bottom (if y is negative, the line is drawn to the top).

## A

elliptical arc

*rx,ry,alpha,large,sweep,x,y*

Draws an elliptical arc: rx and ry are the radius of the ellipse; alpha is the x-axis rotation of the ellipse; large is 0 if the arc should be the shorter arc (less than 180°), 1 if it should be the longer arc; sweep is 0 is the arc is to be drawn clockwise, 1 if counter-clockwise; x,y are the coordinate of the end point of the arc.

## Q

quadratic Bézier curve

*cX cY eX eY*

Draws a Bézier quadratic curve. cX,cY are the coordinates of the control point, eX,eY that of the endpoint. More pairs can be provided (extra control points and endpoints).

## q

quadratic Bézier curve

*cX cY eX eY*

Draws a Bézier quadratic curve, with the coordinates of the points relative to the current point.

## T

smooth quadratic Bézier curveto

*eX eY*

Draws a Bézier quadratic curve, using the last provided control point (or failing that the current point).

## t

smooth quadratic Bézier curveto

*eX eY*

Same as T, with the coordinates of the end point relative to the current point.

## C

curveto

*cX1 cY1 cX2 cY2 eX eY*

Draws a Bézier cubic curve, with cX1,cY1,cX2,cY2 being the coordinates of the control points.

## c

curveto

*cX1 cY1 cX2 cY2 eX eY*

Same as C, with the coordinates of the points relative to the current point.

## S

smooth curveto

*cX2 cY2 eX eY*

Draws a Bézier cubic curve, using the previously provided control point (cX1,xY1) or failing that the current point, cX2,cY2 as the next control point, and eX,eY as the end point

## s

smooth curveto

*cX2 cY2 eX eY*

Same as S, with the coordinates of the points relative to the current point.

## Z, z

closepath

Close the path by joining the ending point with the beginning point.

*Resources*:

http://www.jeromecukier.net/wp-content/uploads/2012/10/d3-cheat-sheet.pdf

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

*Examples*:

http://codepen.io/chrisnager/pen/armzk

*Original Medium article*:

https://medium.com/@chrisnager/bespoke-svg-reference-e22eb733272