An SVG path builder/generator with a fluent API.
Commands come in in two flavours: longhand and shorthand.
Longhand is the full descriptive name, and can be made relative by prefixing with relative.
:
Path() // Create new path builder
.move(1, 4)
.line(3, 1)
.relative.line(-1, 2)
.horizontal(5)
.toString()
Shorthand expressions are just the standard SVG path commands (uppercase for absolute, lowercase for relative):
// Same output as above
Path().M(1, 4).L(3, 1).l(-1, 2).H(5).toString()
To get the final string out, use toString
for the terse version or toPretty
for the "pretty" version (i.e. with newlines).
-
move
(M
,m
) -
line
(L
,l
) -
horizontal
(H
,h
) -
vertical
(V
,v
) -
arc
(A
,a
) -
close
(Z
)
- Beziers (
C
,S
,T
,Q
)
const output = Path()
.move(2, 0)
.arc({ rx: 1, ry: 1, x: 3, y: 1 })
.vertical(2)
.arc({ rx: 1, ry: 1, x: 2, y: 3 })
.horizontal(1)
.arc({ rx: 1, ry: 1, x: 0, y: 2 })
.vertical(1)
.arc({ rx: 1, ry: 1, x: 1, y: 0 })
.toPretty()
// output:
// M 2 0
// A 1 1 0 0 0 3 1
// V 2
// A 1 1 0 0 0 2 3
// H 1
// A 1 1 0 0 0 0 2
// V 1
// A 1 1 0 0 0 1 0
const output1 = Path().arc({ rx: 1, ry: 1, x: 3, y: 1 })
const output2 = Path().arc(1, 1, 0, false, false, 3, 1)
// output1 and output2 are both:
// A 1 1 0 0 0 3 1
const output = Path().M(2, 0).A({ rx: 1, ry: 1, x: 3, y: 1 }).v(2).toString()
// output:
// M 2 0 A 1 1 0 0 0 3 1 v 2
const output = Path()
.move(2, 0)
.relative.vertical(2)
.relative.horizontal(-1)
.toString()
// output:
// M 2 0 v 2 h -1
The main goal over previous packages was to provide a more ergonomic API for arcs 🤷