SVG Path Compiler

API

The origin (0, 0) is at the top left corner of the canvas. All positions are relative to the origin.

Command Arguments Description Defaults
canvas width: number,
height: number
sets the artboard dimensions 400x400
size stroke-width: number sets the stroke size 1
stroke stroke-color: color sets the stroke colour #333
fill fill-color: color sets the fill colour none
move stroke-width: number moves the pen to a new position
line x: number, y: number draws a line from the current position of the pen to the specified position
horizontal x: number draws a horizontal line from the current position of the pen to the specified x position
vertical y: number draws a vertical line from the current position of the pen to the specified x position
cubic x1: number, y1: number,
x2: number, y2: number,
x: number, y: number
draws a cubic bezier curve with two control points
reflect x2: number, y2: number,
x: number, y: number
draws a cubic curve where first control point is a reflection of the previous curve's second control point – must follow a cubic or reflect command
quad x1: number, y1: number,
x: number, y: number
draws a quadratic bezier curve with one control point
chain x: number, y: number draws a quadratic bezier curve where the control point is inferred from control point of the previous curve – must follow a quad or chain command
close draws a line from the current position back to the starting position of the path

Data Types

number
Integer or floating-point number
color
Hex colour codes, none and transparent