A private function used to combine previous commands with path string.
string to amend to current path string
Arcs are sections of circles or ellipses. For a given x-radius and y-radius,
there are two ellipses that can connect any two points (as long as they're within
the radius of the circle). Along either of those circles there are two possible
paths that you can take to connect the points, so in any situation there are
four possible arcs available.
At its start, the arc element takes in two arguments for the x-radius and y-radius.
The final two arguments designate the x and y coordinates to end the stroke.
Together, these four values define the basic structure of the arc.
The third parameter describes the rotation of the arc.
The fourth argument, is the large arc flag and simply determines if the arc should
be greater than or less than 180 degrees; in the end, this flag determines which
direction the arc will travel around a given circle.
The fifth argument is the sweep-flag. It determines if the arc should begin moving
at positive angles or negative ones, which essentially picks which of the two circles
you will travel around.
This uses absolute positioning.
For relative positioning, see:
arcToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.arcTo(30, 50, 0, false, true, 165.55, 162.45).close();
// => 'A 30 50 0 0 1 165.55 162.45 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.arcTo(30, 50, 0, false, true, 165.55, 162.45).close();
// => 'A 30 50 0 0 1 165.55 162.45 z'radius of the ellipse across the x axis
radius of the ellipse across the y axis
rotation of the arc across the x axis
a value indicating whether or not the arc should be greater than 180deg or not
a value indicating whether or not the arc should be moving in positive angles or not
x coordinate of the ellipse
y coordinate of the ellipse
an instance of the current builder to chain from
Arcs are sections of circles or ellipses. For a given x-radius and y-radius,
there are two ellipses that can connect any two points (as long as they're within
the radius of the circle). Along either of those circles there are two possible
paths that you can take to connect the points, so in any situation there are
four possible arcs available.
At its start, the arc element takes in two arguments for the x-radius and y-radius.
The final two arguments designate the x and y coordinates to end the stroke.
Together, these four values define the basic structure of the arc.
The third parameter describes the rotation of the arc.
The fourth argument, is the large arc flag and simply determines if the arc should
be greater than or less than 180 degrees; in the end, this flag determines which
direction the arc will travel around a given circle.
The fifth argument is the sweep-flag. It determines if the arc should begin moving
at positive angles or negative ones, which essentially picks which of the two circles
you will travel around.
This uses relative positioning.
For absolute positioning, see:
arcTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.arcToRel(30, 50, 0, false, true, 165.55, 162.45).close();
// => 'a 30 50 0 0 1 165.55 162.45 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.arcToRel(30, 50, 0, false, true, 165.55, 162.45).close();
// => 'a 30 50 0 0 1 165.55 162.45 z'radius of the ellipse across the x axis
radius of the ellipse across the y axis
rotation of the arc across the x axis
a value indicating whether or not the arc should be greater than 180deg or not
a value indicating whether or not the arc should be moving in positive angles or not
x coordinate of the ellipse
y coordinate of the ellipse
an instance of the current builder to chain from
Closes the path by amending a 'Z' and returning the string.
A path as a string
Cubic Beziers take in two control points for each point.
Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.
The last set of coordinates (x,y) are where you want the line to end.
The other two are control points. (x1,y1) is the control point for the start of
your curve, and (x2,y2) is the control point for the end.
The control points essentially describe the slope of your line starting at each point.
The Bezier function then creates a smooth curve that transfers you from the slope
you established at the beginning of your line, to the slope at the other end.
This uses absolute positioning.
For relative positioning, see:
cubicToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.cubicTo(10, 10, 10, 10, 10, 10).close();
// => 'C 10 10 10 10 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.cubicTo(10, 10, 10, 10, 10, 10).close();
// => 'C 10 10 10 10 10 10 z'x1 coordinate of the start control point
y1 coordinate of the start control point
x2 coordinate of the end control point
y2 coordinate of the end control point
x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
Cubic Beziers take in two control points for each point.
Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.
The last set of coordinates (x,y) are where you want the line to end.
The other two are control points. (x1,y1) is the control point for the start of
your curve, and (x2,y2) is the control point for the end.
The control points essentially describe the slope of your line starting at each point.
The Bezier function then creates a smooth curve that transfers you from the slope
you established at the beginning of your line, to the slope at the other end.
This uses relative positioning.
For absolute positioning, see:
cubicTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.cubicToRel(10, 10, 10, 10, 10, 10).close();
// => 'c 10 10 10 10 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.cubicToRel(10, 10, 10, 10, 10, 10).close();
// => 'c 10 10 10 10 10 10 z'x1 coordinate of the start control point
y1 coordinate of the start control point
x2 coordinate of the end control point
y2 coordinate of the end control point
x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
Ends the path without amending a 'Z' and returning the string.
A path as a string
The "Horizontal To" command takes one parameter—x coordinate—and draws a line from the
current position horizontally to a new position.
This uses absolute positioning.
For relative positioning, see:
horizontalToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.horizontalTo(10).close();
// => 'H 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.horizontalTo(10).close();
// => 'H 10 z'x coordinate to draw a horizontal line on
an instance of the current builder to chain from
The "Horizontal To" command takes one parameter—x coordinate—and draws a line from the
current position horizontally to a new position.
This uses relative positioning.
For absolute positioning, see:
horizontalTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.horizontalToRel(10).close();
// => 'h 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.horizontalToRel(10).close();
// => 'h 10 z'x coordinate to draw a horizontal line on
an instance of the current builder to chain from
The "Line To" command takes two parameters—x and y coordinates—and draws a line from the
current position to a new position.
This uses absolute positioning.
For relative positioning, see:
lineToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.lineTo(10, 10).close();
// => 'L 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.lineTo(10, 10).close();
// => 'L 10 10 z'x coordinate to draw a line to
y coordinate to draw a line to
an instance of the current builder to chain from
The "Line To" command takes two parameters—x and y coordinates—and draws a line from the
current position to a new position.
This uses relative positioning.
For absolute positioning, see:
lineTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.lineToRel(10, 10).close();
// => 'l 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.lineToRel(10, 10).close();
// => 'l 10 10 z'x coordinate to draw a line to
y coordinate to draw a line to
an instance of the current builder to chain from
The "Move To" command appears at the beginning of paths to specify where the
drawing should start.
If your cursor already was somewhere on the page, no line is drawn to connect
the two places.
This uses absolute positioning.
For relative positioning, see:
moveToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.moveTo(10, 10).close();
// => 'M 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.moveTo(10, 10).close();
// => 'M 10 10 z'x coordinate to move pen to
y coordinate to move pen to
an instance of the current builder to chain from
The "Move To" command appears at the beginning of paths to specify where the
drawing should start.
If your cursor already was somewhere on the page, no line is drawn to connect
the two places.
This uses relative positioning.
For absolute positioning, see: moveTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.moveToRel(10, 10).close();
// => 'm 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.moveToRel(10, 10).close();
// => 'm 10 10 z'x coordinate to move pen to
y coordinate to move pen to
an instance of the current builder to chain from
The "Quadradic String To" command is a shortcut for stringing together
multiple quadratic Beziers.
This shortcut looks at the previous control point you used and infers a
new one from it. This means that after your first control point, you can
make fairly complex shapes by specifying only end points.
This only works if the previous command was a "Quadratic To" or a "Quadradic String To"
command. If it is not, then the control point is assumed to be the same as
the previous point, and you'll only draw lines.
This uses absolute positioning.
For relative positioning, see:
quadStringToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.quadStringTo(180, 80).close();
// => 'T 180 80 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.quadStringTo(180, 80).close();
// => 'T 180 80 z'x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
The "Quadradic String To" command is a shortcut for stringing together
multiple quadratic Beziers.
This shortcut looks at the previous control point you used and infers a
new one from it. This means that after your first control point, you can
make fairly complex shapes by specifying only end points.
This only works if the previous command was a "Quadratic To" or a "Quadradic String To"
command. If it is not, then the control point is assumed to be the same as
the previous point, and you'll only draw lines.
This uses relative positioning.
For absolute positioning, see:
quadStringTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.quadStringToRel(180, 80).close();
// => 't 180 80 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.quadStringToRel(180, 80).close();
// => 't 180 80 z'x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
The "Quadradic To" command produces the same type of curve as the Cubic Bezier,
requires one control point which determines the slope of the curve at both
the start point and the end point. It takes two arguments: the control point
and the end point of the curve.
This uses absolute positioning.
For relative positioning, see:
quadToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.quadTo(10, 10, 10, 10).close();
// => 'Q 10 10 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.quadTo(10, 10, 10, 10).close();
// => 'Q 10 10 10 10 z'x2 coordinate of the control point
y2 coordinate of the control point
x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
The "Quadradic To" command produces the same type of curve as the Cubic Bezier,
requires one control point which determines the slope of the curve at both
the start point and the end point. It takes two arguments: the control point
and the end point of the curve.
This uses relative positioning.
For absolute positioning, see:
quadTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.quadToRel(10, 10, 10, 10).close();
// => 'q 10 10 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.quadToRel(10, 10, 10, 10).close();
// => 'q 10 10 10 10 z'x2 coordinate of the control point
y2 coordinate of the control point
x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
The "Smooth To" command produces the same type of curve as the Cubic Bezier,
but if it follows another "Smooth To" command or a "Cubic Bezier" command,
the first control point is assumed to be a reflection of the one used previously.
If the "Smooth To" command doesn't follow another "Smooth To" command or "Cubic Bezier"
command, then the current position of the cursor is used as the first control point.
This uses absolute positioning.
For relative positioning, see:
smoothToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.smoothTo(10, 10, 10, 10).close();
// => 'S 10 10 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.smoothTo(10, 10, 10, 10).close();
// => 'S 10 10 10 10 z'x2 coordinate of the end control point
y2 coordinate of the end control point
x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
The "Smooth To" command produces the same type of curve as the Cubic Bezier,
but if it follows another "Smooth To" command or a "Cubic Bezier" command,
the first control point is assumed to be a reflection of the one used previously.
If the "Smooth To" command doesn't follow another "Smooth To" command or "Cubic Bezier"
command, then the current position of the cursor is used as the first control point.
This uses relative positioning.
For absolute positioning, see:
smoothTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.smoothToRel(10, 10, 10, 10).close();
// => 's 10 10 10 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.smoothToRel(10, 10, 10, 10).close();
// => 's 10 10 10 10 z'x2 coordinate of the end control point
y2 coordinate of the end control point
x coordinate of where to end the curve
y coordinate of where to end the curve
an instance of the current builder to chain from
The "Vertical To" command takes one parameter—y coordinate—and draws a line from the
current position vertically to a new position.
This uses absolute positioning.
For relative positioning, see:
verticalToRel()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.verticalTo(10).close();
// => 'V 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.verticalTo(10).close();
// => 'V 10 z'y coordinate to draw a vertical line on
an instance of the current builder to chain from
The "Vertical To" command takes one parameter—y coordinate—and draws a line from the
current position vertically to a new position.
This uses relative positioning.
For absolute positioning, see:
verticalTo()
import Builder from 'svg-builder-js'
const builder = new Builder();
const path = builder.verticalToRel(10).close();
// => 'v 10 z'var Builder = require('svg-builder-js').Builder;
const builder = new Builder();
const path = builder.verticalToRel(10).close();
// => 'v 10 z'an instance of the current builder to chain from
Generated using TypeDoc
A declarative SVG path builder
Builder