{"route":"/en-US-v0.14.1/reference/visualize/curve/","title":"Curve","description":"Documentation for the `curve` function.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"example","name":"Example","children":[]},{"id":"parameters","name":"Parameters","children":[{"id":"parameters-fill","name":"fill","children":[]},{"id":"parameters-fill-rule","name":"fill-rule","children":[]},{"id":"parameters-stroke","name":"stroke","children":[]},{"id":"parameters-components","name":"components","children":[]}]},{"id":"definitions","name":"Definitions","children":[{"id":"definitions-move","name":"Curve Move","children":[{"id":"definitions-move-start","name":"start","children":[]},{"id":"definitions-move-relative","name":"relative","children":[]}]},{"id":"definitions-line","name":"Curve Line","children":[{"id":"definitions-line-end","name":"end","children":[]},{"id":"definitions-line-relative","name":"relative","children":[]}]},{"id":"definitions-quad","name":"Curve Quadratic Segment","children":[{"id":"definitions-quad-control","name":"control","children":[]},{"id":"definitions-quad-end","name":"end","children":[]},{"id":"definitions-quad-relative","name":"relative","children":[]}]},{"id":"definitions-cubic","name":"Curve Cubic Segment","children":[{"id":"definitions-cubic-control-start","name":"control-start","children":[]},{"id":"definitions-cubic-control-end","name":"control-end","children":[]},{"id":"definitions-cubic-end","name":"end","children":[]},{"id":"definitions-cubic-relative","name":"relative","children":[]}]},{"id":"definitions-close","name":"Curve Close","children":[{"id":"definitions-close-mode","name":"mode","children":[]}]}]}],"body":{"kind":"func","content":{"path":[],"name":"curve","title":"Curve","keywords":[],"oneliner":"A curve consisting of movements, lines, and Bézier segments.","element":true,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

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

\n

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

\n\n

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

\n

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

\n

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

\n

Example

\n
#curve(\n  fill: blue.lighten(80%),\n  stroke: blue,\n  curve.move((0pt, 50pt)),\n  curve.line((100pt, 50pt)),\n  curve.cubic(none, (90pt, 0pt), (50pt, 0pt)),\n  curve.close(),\n)\n
\"Preview\"
"}],"self":false,"params":[{"name":"fill","details":[{"kind":"html","content":"

How to fill the curve.

\n

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

"}],"types":["none","color","gradient","tiling"],"strings":[],"default":"none","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"fill-rule","details":[{"kind":"html","content":"

The drawing rule used to fill the curve.

"},{"kind":"example","content":{"body":"
// We use `.with` to get a new\n// function that has the common\n// arguments pre-applied.\n#let star = curve.with(\n  fill: red,\n  curve.move((25pt, 0pt)),\n  curve.line((10pt, 50pt)),\n  curve.line((50pt, 20pt)),\n  curve.line((0pt, 20pt)),\n  curve.line((40pt, 50pt)),\n  curve.close(),\n)\n\n#star(fill-rule: "non-zero")\n#star(fill-rule: "even-odd")\n
\"Preview\"
","title":null}}],"types":["str"],"strings":[{"string":"non-zero","details":"

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

"},{"string":"even-odd","details":"

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

"}],"default":""non-zero"","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"stroke","details":[{"kind":"html","content":"

How to stroke the curve.

\n

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

"},{"kind":"example","content":{"body":"
#let down = curve.line((40pt, 40pt), relative: true)\n#let up = curve.line((40pt, -40pt), relative: true)\n\n#curve(\n  stroke: 4pt + gradient.linear(red, blue),\n  down, up, down, up, down,\n)\n
\"Preview\"
","title":null}}],"types":["none","auto","length","color","gradient","stroke","tiling","dictionary"],"strings":[],"default":"auto","positional":false,"named":true,"required":false,"variadic":false,"settable":true},{"name":"components","details":[{"kind":"html","content":"

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

"}],"types":["content"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":true,"settable":false}],"returns":["content"],"scope":[{"path":["curve"],"name":"move","title":"Curve Move","keywords":[],"oneliner":"Starts a new curve component.","element":true,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

Starts a new curve component.

\n

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

"},{"kind":"example","content":{"body":"
#curve(\n  fill: blue.lighten(80%),\n  fill-rule: "even-odd",\n  stroke: blue,\n  curve.line((50pt, 0pt)),\n  curve.line((50pt, 50pt)),\n  curve.line((0pt, 50pt)),\n  curve.close(),\n  curve.move((10pt, 10pt)),\n  curve.line((40pt, 10pt)),\n  curve.line((40pt, 40pt)),\n  curve.line((10pt, 40pt)),\n  curve.close(),\n)\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"start","details":[{"kind":"html","content":"

The starting point for the new component.

"}],"types":["array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"relative","details":[{"kind":"html","content":"

Whether the coordinates are relative to the previous point.

"}],"types":["bool"],"strings":[],"default":"false","positional":false,"named":true,"required":false,"variadic":false,"settable":true}],"returns":["content"],"scope":[]},{"path":["curve"],"name":"line","title":"Curve Line","keywords":[],"oneliner":"Adds a straight line from the current point to a following one.","element":true,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

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

"},{"kind":"example","content":{"body":"
#curve(\n  stroke: blue,\n  curve.line((50pt, 0pt)),\n  curve.line((50pt, 50pt)),\n  curve.line((100pt, 50pt)),\n  curve.line((100pt, 0pt)),\n  curve.line((150pt, 0pt)),\n)\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"end","details":[{"kind":"html","content":"

The point at which the line shall end.

"}],"types":["array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"relative","details":[{"kind":"html","content":"

Whether the coordinates are relative to the previous point.

"},{"kind":"example","content":{"body":"
#curve(\n  stroke: blue,\n  curve.line((50pt, 0pt), relative: true),\n  curve.line((0pt, 50pt), relative: true),\n  curve.line((50pt, 0pt), relative: true),\n  curve.line((0pt, -50pt), relative: true),\n  curve.line((50pt, 0pt), relative: true),\n)\n
\"Preview\"
","title":null}}],"types":["bool"],"strings":[],"default":"false","positional":false,"named":true,"required":false,"variadic":false,"settable":true}],"returns":["content"],"scope":[]},{"path":["curve"],"name":"quad","title":"Curve Quadratic Segment","keywords":[],"oneliner":"Adds a quadratic Bézier curve segment from the last point to `end`, using `control` as the control point.","element":true,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

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

"},{"kind":"example","content":{"body":"
// Function to illustrate where the control point is.\n#let mark((x, y)) = place(\n  dx: x - 1pt, dy: y - 1pt,\n  circle(fill: aqua, radius: 2pt),\n)\n\n#mark((20pt, 20pt))\n\n#curve(\n  stroke: blue,\n  curve.move((0pt, 100pt)),\n  curve.quad((20pt, 20pt), (100pt, 0pt)),\n)\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"control","details":[{"kind":"html","content":"

The control point of the quadratic Bézier curve.

\n"},{"kind":"example","content":{"body":"
#curve(\n  stroke: 2pt,\n  curve.quad((20pt, 40pt), (40pt, 40pt), relative: true),\n  curve.quad(auto, (40pt, -40pt), relative: true),\n)\n
\"Preview\"
","title":null}}],"types":["none","auto","array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"end","details":[{"kind":"html","content":"

The point at which the segment shall end.

"}],"types":["array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"relative","details":[{"kind":"html","content":"

Whether the control and end coordinates are relative to the previous\npoint.

"}],"types":["bool"],"strings":[],"default":"false","positional":false,"named":true,"required":false,"variadic":false,"settable":true}],"returns":["content"],"scope":[]},{"path":["curve"],"name":"cubic","title":"Curve Cubic Segment","keywords":[],"oneliner":"Adds a cubic Bézier curve segment from the last point to `end`, using `control-start` and `control-end` as the control points.","element":true,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

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

"},{"kind":"example","content":{"body":"
// Function to illustrate where the control points are.\n#let handle(start, end) = place(\n  line(stroke: red, start: start, end: end)\n)\n\n#handle((0pt, 80pt), (10pt, 20pt))\n#handle((90pt, 60pt), (100pt, 0pt))\n\n#curve(\n  stroke: blue,\n  curve.move((0pt, 80pt)),\n  curve.cubic((10pt, 20pt), (90pt, 60pt), (100pt, 0pt)),\n)\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"control-start","details":[{"kind":"html","content":"

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

\n"},{"kind":"example","content":{"body":"
#curve(\n  stroke: blue,\n  curve.move((0pt, 50pt)),\n  // - No start control point\n  // - End control point at `(20pt, 0pt)`\n  // - End point at `(50pt, 0pt)`\n  curve.cubic(none, (20pt, 0pt), (50pt, 0pt)),\n  // - No start control point\n  // - No end control point\n  // - End point at `(50pt, 0pt)`\n  curve.cubic(none, none, (100pt, 50pt)),\n)\n\n#curve(\n  stroke: blue,\n  curve.move((0pt, 50pt)),\n  curve.cubic(none, (20pt, 0pt), (50pt, 0pt)),\n  // Passing `auto` instead of `none` means the start control point\n  // mirrors the end control point of the previous curve. Mirror of\n  // `(20pt, 0pt)` w.r.t `(50pt, 0pt)` is `(80pt, 0pt)`.\n  curve.cubic(auto, none, (100pt, 50pt)),\n)\n\n#curve(\n  stroke: blue,\n  curve.move((0pt, 50pt)),\n  curve.cubic(none, (20pt, 0pt), (50pt, 0pt)),\n  // `(80pt, 0pt)` is the same as `auto` in this case.\n  curve.cubic((80pt, 0pt), none, (100pt, 50pt)),\n)\n
\"Preview\"
","title":null}}],"types":["none","auto","array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"control-end","details":[{"kind":"html","content":"

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

\n

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

"}],"types":["none","array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"end","details":[{"kind":"html","content":"

The point at which the curve segment shall end.

"}],"types":["array"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"relative","details":[{"kind":"html","content":"

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

"}],"types":["bool"],"strings":[],"default":"false","positional":false,"named":true,"required":false,"variadic":false,"settable":true}],"returns":["content"],"scope":[]},{"path":["curve"],"name":"close","title":"Curve Close","keywords":[],"oneliner":"Closes the curve by adding a segment from the last point to the start of the curve (or the last preceding `curve.move` point).","element":true,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

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

"},{"kind":"example","content":{"body":"
// We define a function to show the same shape with\n// both closing modes.\n#let shape(mode: "smooth") = curve(\n  fill: blue.lighten(80%),\n  stroke: blue,\n  curve.move((0pt, 50pt)),\n  curve.line((100pt, 50pt)),\n  curve.cubic(auto, (90pt, 0pt), (50pt, 0pt)),\n  curve.close(mode: mode),\n)\n\n#shape(mode: "smooth")\n#shape(mode: "straight")\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"mode","details":[{"kind":"html","content":"

How to close the curve.

"}],"types":["str"],"strings":[{"string":"smooth","details":"

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

"},{"string":"straight","details":"

Closes the curve with a straight line.

"}],"default":""smooth"","positional":false,"named":true,"required":false,"variadic":false,"settable":true}],"returns":["content"],"scope":[]}]}}}