SVG Series - 3, Powerful Paths

Simple to use

d: Path process.
stroke-width: Line width.
stroke: line color.

Path process:
M 0 0: move to 0, 0
L 100 100: draw line to 100, 100

<path d="M 0 0 L 100 100" stroke-width="2" stroke="red"/>

Effect:

straight path

Move the brush

M xy: Move to coordinates.
m dx dy: move a distance.

draw straight lines

L xy: draw line to coordinates.
l dx dy: draw a line for a distance.

H x: horizontal line to x coordinate.
h dx: horizontal line dx distance.

V y: vertical line to y coordinate.
v dy: vertical line dy distance.

closed path

Z
z
will draw the line to the start of the path.

Case: Pentagram

A few points of the five-pointed star:

50 0
98 35
79 91
21 91
2 35

Then to draw a five-pointed star is:
135241

<path d="
M 50 0
L 79 91
L 2 35
L 98 35
L 21 91
Z
" fill="red"/>

Effect:

curved path

quadratic bezier

A control point, a point.

Q x1 y1, x y
q dx1 dy1, dx dy

Reuse the last control point.

T x y (or t dx dy)

three times bezier

Two control points, one point.

C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy

Reuse the last control point.

S x2 y2, x y
s dx2 dy2, dx dy

arc

A 
	rx ry
	x-axis-rotation 
	large-arc-flag 
	sweep-flag 
	x y
a 
	rx ry 
	x-axis-rotation 
	large-arc-flag 
	sweep-flag 
	dx dy

rx ry: two radii.
x-axis-rotation: The rotation angle.
large-arc-flag: 0 means the piece with a smaller angle, and 1 means the piece with a larger angle.
sweep-flag: 0 counterclockwise, 1 clockwise.
xy, dx dy: end point coordinates.

Case: Arc

<svg xmlns="http://www.w3.org/2000/svg"
	 width="600" height="600"
>
	<path d="M80 80
           a 45 45, 0, 0, 0, 45 45
           Z" fill="red"/>
	<path d="M230 80
           a 45 45, 0, 1, 0, 45 45
           Z" fill="red"/>
	<path d="M80 230
           a 45 45, 0, 0, 1, 45 45
           Z" fill="red"/>
	<path d="M230 230
           a 45 45, 0, 1, 1, 45 45
           Z" fill="red"/>
</svg>

Effect:
The small piece used both on the left. Big on the right.
The top two go counter-clockwise. Clockwise below.

How to understand?
From the line from the start point to the end point, go to a circle with a specified radius.
The size of the block determines whether to use a large part or a small part.
Clockwise to determine whether the center of the circle is on the left or right.