fluent-svg-path

An SVG path builder/generator with a fluent API.

Usage

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).

Commands

Supported

• move (M, m)
• line (L, l)
• horizontal (H, h)
• vertical (V, v)
• arc (A, a)
• close (Z)

Todo

• Beziers (C, S, T, Q)

Examples

Chained calls + pretty print

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

Arcs

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

Shorthand methods

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

Relative commands

const output = Path()
  .move(2, 0)
  .relative.vertical(2)
  .relative.horizontal(-1)
  .toString()

// output:
//  M 2 0 v 2 h -1

Why?

The main goal over previous packages was to provide a more ergonomic API for arcs 🤷