{"route":"/en-US-v0.14.1/reference/visualize/stroke/","title":"Stroke","description":"Documentation for the Stroke type.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"example","name":"Example","children":[]},{"id":"simple-strokes","name":"Simple strokes","children":[]},{"id":"fields","name":"Fields","children":[]},{"id":"constructor","name":"Constructor","children":[{"id":"constructor-paint","name":"paint","children":[]},{"id":"constructor-thickness","name":"thickness","children":[]},{"id":"constructor-cap","name":"cap","children":[]},{"id":"constructor-join","name":"join","children":[]},{"id":"constructor-dash","name":"dash","children":[]},{"id":"constructor-miter-limit","name":"miter-limit","children":[]}]}],"body":{"kind":"type","content":{"name":"stroke","title":"Stroke","keywords":[],"oneliner":"Defines how to draw a line.","details":"

Defines how to draw a line.

\n

A stroke has a paint (a solid color or gradient), a thickness, a line\ncap, a line join, a miter limit, and a dash pattern. All of these\nvalues are optional and have sensible defaults.

\n

Example

\n
#set line(length: 100%)\n#stack(\n  spacing: 1em,\n  line(stroke: 2pt + red),\n  line(stroke: (paint: blue, thickness: 4pt, cap: "round")),\n  line(stroke: (paint: blue, thickness: 1pt, dash: "dashed")),\n  line(stroke: 2pt + gradient.linear(..color.map.rainbow)),\n)\n
\"Preview\"
\n

Simple strokes

\n

You can create a simple solid stroke from a color, a thickness, or a\ncombination of the two. Specifically, wherever a stroke is expected you can\npass any of the following values:

\n\n

For full control, you can also provide a dictionary or a stroke object\nto any function that expects a stroke. The dictionary's keys may include any\nof the parameters for the constructor function, shown below.

\n

Fields

\n

On a stroke object, you can access any of the fields listed in the\nconstructor function. For example, (2pt + blue).thickness is 2pt.\nMeanwhile, stroke(red).cap is auto because it's unspecified. Fields\nset to auto are inherited.

","constructor":{"path":[],"name":"stroke","title":"Construct","keywords":[],"oneliner":"Converts a value to a stroke or constructs a stroke with the given parameters.","element":false,"contextual":false,"deprecationMessage":null,"deprecationUntil":null,"details":[{"kind":"html","content":"

Converts a value to a stroke or constructs a stroke with the given\nparameters.

\n

Note that in most cases you do not need to convert values to strokes in\norder to use them, as they will be converted automatically. However,\nthis constructor can be useful to ensure a value has all the fields of a\nstroke.

"},{"kind":"example","content":{"body":"
#let my-func(x) = {\n    x = stroke(x) // Convert to a stroke\n    [Stroke has thickness #x.thickness.]\n}\n#my-func(3pt) \\\n#my-func(red) \\\n#my-func(stroke(cap: "round", thickness: 1pt))\n
\"Preview\"
","title":null}}],"self":false,"params":[{"name":"paint","details":[{"kind":"html","content":"

The color or gradient to use for the stroke.

\n

If set to auto, the value is inherited, defaulting to black.

"}],"types":["auto","color","gradient","tiling"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"thickness","details":[{"kind":"html","content":"

The stroke's thickness.

\n

If set to auto, the value is inherited, defaulting to 1pt.

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

How the ends of the stroke are rendered.

\n

If set to auto, the value is inherited, defaulting to "butt".

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

Square stroke cap with the edge at the stroke's end point.

"},{"string":"round","details":"

Circular stroke cap centered at the stroke's end point.

"},{"string":"square","details":"

Square stroke cap centered at the stroke's end point.

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

How sharp turns are rendered.

\n

If set to auto, the value is inherited, defaulting to "miter".

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

Segments are joined with sharp edges. Sharp bends exceeding the miter\nlimit are bevelled instead.

"},{"string":"round","details":"

Segments are joined with circular corners.

"},{"string":"bevel","details":"

Segments are joined with a bevel (a straight edge connecting the butts\nof the joined segments).

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

The dash pattern to use. This can be:

\n\n

If set to auto, the value is inherited, defaulting to none.

"},{"kind":"example","content":{"body":"
#set line(length: 100%, stroke: 2pt)\n#stack(\n  spacing: 1em,\n  line(stroke: (dash: "dashed")),\n  line(stroke: (dash: (10pt, 5pt, "dot", 5pt))),\n  line(stroke: (dash: (array: (10pt, 5pt, "dot", 5pt), phase: 10pt))),\n)\n
\"Preview\"
","title":null}}],"types":["none","auto","str","array","dictionary"],"strings":[{"string":"solid","details":""},{"string":"dotted","details":""},{"string":"densely-dotted","details":""},{"string":"loosely-dotted","details":""},{"string":"dashed","details":""},{"string":"densely-dashed","details":""},{"string":"loosely-dashed","details":""},{"string":"dash-dotted","details":""},{"string":"densely-dash-dotted","details":""},{"string":"loosely-dash-dotted","details":""}],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false},{"name":"miter-limit","details":[{"kind":"html","content":"

Number at which protruding sharp bends are rendered with a bevel\ninstead or a miter join. The higher the number, the sharper an angle\ncan be before it is bevelled. Only applicable if join is\n"miter".

\n

Specifically, the miter limit is the maximum ratio between the\ncorner's protrusion length and the stroke's thickness.

\n

If set to auto, the value is inherited, defaulting to 4.0.

"},{"kind":"example","content":{"body":"
#let items = (\n  curve.move((15pt, 0pt)),\n  curve.line((0pt, 30pt)),\n  curve.line((30pt, 30pt)),\n  curve.line((10pt, 20pt)),\n)\n\n#set curve(stroke: 6pt + blue)\n#stack(\n  dir: ltr,\n  spacing: 1cm,\n  curve(stroke: (miter-limit: 1), ..items),\n  curve(stroke: (miter-limit: 4), ..items),\n  curve(stroke: (miter-limit: 5), ..items),\n)\n
\"Preview\"
","title":null}}],"types":["auto","float"],"strings":[],"default":null,"positional":true,"named":false,"required":true,"variadic":false,"settable":false}],"returns":["stroke"],"scope":[]},"scope":[]}}}