InfoThis site is generated using the static site generator developed by the Typst Community. Please adjust the text content of this banner according to your usage requirements. At Typst GmbH's request, when publishing documentation, you must clearly indicate that it is non-official and display the version of Typst being documented. For details, refer to Issue #874 on typst/typst.
TypstDocumentEnglish
v0.dev.2025-09-12
Open official docs

curve
Element
Element
Element functions can be customized with set and show rules.

A curve consisting of movements, lines, and Bézier segments.

At any point in time, there is a conceptual pen or cursor.

  • Move elements move the cursor without drawing.
  • Line/Quadratic/Cubic elements draw a segment from the cursor to a new position, potentially with control point for a Bézier curve.
  • Close elements draw a straight or smooth line back to the start of the curve or the latest preceding move segment.

For layout purposes, the bounding box of the curve is a tight rectangle containing all segments as well as the point (0pt, 0pt).

Positions may be specified absolutely (i.e. relatively to (0pt, 0pt)), or relative to the current pen/cursor position, that is, the position where the previous segment ended.

Bézier curve control points can be skipped by passing none or automatically mirrored from the preceding segment by passing auto.

Example

#curve(
  fill: blue.lighten(80%),
  stroke: blue,
  curve.move((0pt, 50pt)),
  curve.line((100pt, 50pt)),
  curve.cubic(none, (90pt, 0pt), (50pt, 0pt)),
  curve.close(),
)
Preview

Parameter
Parameter
Parameters are input values for functions. Specify them in parentheses after the function name.

curve(
fill:
nonecolorgradienttiling
,
fill-rule:
str
,
stroke:
noneautolengthcolorgradientstroketilingdictionary
,
content
)->
content

fill
nonecolorgradienttiling
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

How to fill the curve.

When setting a fill, the default stroke disappears. To create a curve with both fill and stroke, you have to configure both.

Default value:

none

fill-rule
str
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

The drawing rule used to fill the curve.

Available string values:
  • non-zero

    Specifies that "inside" is computed by a non-zero sum of signed edge crossings.

  • even-odd

    Specifies that "inside" is computed by an odd number of edge crossings.

Default value:

"non-zero"

Show example
// We use `.with` to get a new
// function that has the common
// arguments pre-applied.
#let star = curve.with(
  fill: red,
  curve.move((25pt, 0pt)),
  curve.line((10pt, 50pt)),
  curve.line((50pt, 20pt)),
  curve.line((0pt, 20pt)),
  curve.line((40pt, 50pt)),
  curve.close(),
)

#star(fill-rule: "non-zero")
#star(fill-rule: "even-odd")
Preview

stroke
noneautolengthcolorgradientstroketilingdictionary
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

How to stroke the curve.

Can be set to none to disable the stroke or to auto for a stroke of 1pt black if and only if no fill is given.

Default value:

auto

Show example
#let down = curve.line((40pt, 40pt), relative: true)
#let up = curve.line((40pt, -40pt), relative: true)

#curve(
  stroke: 4pt + gradient.linear(red, blue),
  down, up, down, up, down,
)
Preview

components
content
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.
Variadic
Variadic
Variadic parameters can be specified multiple times.

The components of the curve, in the form of moves, line and Bézier segment, and closes.

Definition
Definition
These functions and types can have related definitions. To access a definition, specify the name of the function or type, followed by the definition name separated by a period.

move
Element
Element
Element functions can be customized with set and show rules.

Starts a new curve component.

If no curve.move element is passed, the curve will start at (0pt, 0pt).

curve.move(
array
,
relative:
bool
)->
content
Show example
#curve(
  fill: blue.lighten(80%),
  fill-rule: "even-odd",
  stroke: blue,
  curve.line((50pt, 0pt)),
  curve.line((50pt, 50pt)),
  curve.line((0pt, 50pt)),
  curve.close(),
  curve.move((10pt, 10pt)),
  curve.line((40pt, 10pt)),
  curve.line((40pt, 40pt)),
  curve.line((10pt, 40pt)),
  curve.close(),
)
Preview

start
array
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The starting point for the new component.

relative
bool
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

Whether the coordinates are relative to the previous point.

Default value:

false

line
Element
Element
Element functions can be customized with set and show rules.

Adds a straight line from the current point to a following one.

curve.line(
array
,
relative:
bool
)->
content
Show example
#curve(
  stroke: blue,
  curve.line((50pt, 0pt)),
  curve.line((50pt, 50pt)),
  curve.line((100pt, 50pt)),
  curve.line((100pt, 0pt)),
  curve.line((150pt, 0pt)),
)
Preview

end
array
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The point at which the line shall end.

relative
bool
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

Whether the coordinates are relative to the previous point.

Default value:

false

Show example
#curve(
  stroke: blue,
  curve.line((50pt, 0pt), relative: true),
  curve.line((0pt, 50pt), relative: true),
  curve.line((50pt, 0pt), relative: true),
  curve.line((0pt, -50pt), relative: true),
  curve.line((50pt, 0pt), relative: true),
)
Preview

quad
Element
Element
Element functions can be customized with set and show rules.

Adds a quadratic Bézier curve segment from the last point to end, using control as the control point.

curve.quad(
noneautoarray
,
array
,
relative:
bool
)->
content
Show example
// Function to illustrate where the control point is.
#let mark((x, y)) = place(
  dx: x - 1pt, dy: y - 1pt,
  circle(fill: aqua, radius: 2pt),
)

#mark((20pt, 20pt))

#curve(
  stroke: blue,
  curve.move((0pt, 100pt)),
  curve.quad((20pt, 20pt), (100pt, 0pt)),
)
Preview

control
noneautoarray
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The control point of the quadratic Bézier curve.

  • If auto and this segment follows another quadratic Bézier curve, the previous control point will be mirrored.
  • If none, the control point defaults to end, and the curve will be a straight line.
Show example
#curve(
  stroke: 2pt,
  curve.quad((20pt, 40pt), (40pt, 40pt), relative: true),
  curve.quad(auto, (40pt, -40pt), relative: true),
)
Preview

end
array
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The point at which the segment shall end.

relative
bool
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

Whether the control and end coordinates are relative to the previous point.

Default value:

false

cubic
Element
Element
Element functions can be customized with set and show rules.

Adds a cubic Bézier curve segment from the last point to end, using control-start and control-end as the control points.

curve.cubic(
noneautoarray
,
nonearray
,
array
,
relative:
bool
)->
content
Show example
// Function to illustrate where the control points are.
#let handle(start, end) = place(
  line(stroke: red, start: start, end: end)
)

#handle((0pt, 80pt), (10pt, 20pt))
#handle((90pt, 60pt), (100pt, 0pt))

#curve(
  stroke: blue,
  curve.move((0pt, 80pt)),
  curve.cubic((10pt, 20pt), (90pt, 60pt), (100pt, 0pt)),
)
Preview

control-start
noneautoarray
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The control point going out from the start of the curve segment.

  • If auto and this element follows another curve.cubic element, the last control point will be mirrored. In SVG terms, this makes curve.cubic behave like the S operator instead of the C operator.

  • If none, the curve has no first control point, or equivalently, the control point defaults to the curve's starting point.

Show example
#curve(
  stroke: blue,
  curve.move((0pt, 50pt)),
  // - No start control point
  // - End control point at `(20pt, 0pt)`
  // - End point at `(50pt, 0pt)`
  curve.cubic(none, (20pt, 0pt), (50pt, 0pt)),
  // - No start control point
  // - No end control point
  // - End point at `(50pt, 0pt)`
  curve.cubic(none, none, (100pt, 50pt)),
)

#curve(
  stroke: blue,
  curve.move((0pt, 50pt)),
  curve.cubic(none, (20pt, 0pt), (50pt, 0pt)),
  // Passing `auto` instead of `none` means the start control point
  // mirrors the end control point of the previous curve. Mirror of
  // `(20pt, 0pt)` w.r.t `(50pt, 0pt)` is `(80pt, 0pt)`.
  curve.cubic(auto, none, (100pt, 50pt)),
)

#curve(
  stroke: blue,
  curve.move((0pt, 50pt)),
  curve.cubic(none, (20pt, 0pt), (50pt, 0pt)),
  // `(80pt, 0pt)` is the same as `auto` in this case.
  curve.cubic((80pt, 0pt), none, (100pt, 50pt)),
)
Preview

control-end
nonearray
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The control point going into the end point of the curve segment.

If set to none, the curve has no end control point, or equivalently, the control point defaults to the curve's end point.

end
array
Required
Required
Required parameters must be specified when calling the function.
Positional
Positional
Positional parameters can be set by specifying them in order, omitting the parameter name.

The point at which the curve segment shall end.

relative
bool
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

Whether the control-start, control-end, and end coordinates are relative to the previous point.

Default value:

false

close
Element
Element
Element functions can be customized with set and show rules.

Closes the curve by adding a segment from the last point to the start of the curve (or the last preceding curve.move point).

curve.close(
mode:
str
)->
content
Show example
// We define a function to show the same shape with
// both closing modes.
#let shape(mode: "smooth") = curve(
  fill: blue.lighten(80%),
  stroke: blue,
  curve.move((0pt, 50pt)),
  curve.line((100pt, 50pt)),
  curve.cubic(auto, (90pt, 0pt), (50pt, 0pt)),
  curve.close(mode: mode),
)

#shape(mode: "smooth")
#shape(mode: "straight")
Preview

mode
str
Settable
Settable
Settable parameters can be set using the set rule, changing the default value used thereafter.

How to close the curve.

Available string values:
  • smooth

    Closes the curve with a smooth segment that takes into account the control point opposite the start point.

  • straight

    Closes the curve with a straight line.

Default value:

"smooth"

Open official docs
Previous page

Color

Next page

Ellipse

Search