# Line and SVG paths
Construct a polyline and an SVG path from authored coordinates.

## APIs demonstrated

- [createLinePath](/reference/functions/create-line-path/) from `@pibbl/core`
- [createSvgPath](/reference/functions/create-svg-path/) from `@pibbl/core`
- [LinePathOptions](/reference/types/elements-components/) from `@pibbl/core`
- [SvgPathOptions](/reference/types/elements-components/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/paths/line-svg-factories.ts). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```ts
import {
  createLinePath,
  createSvgPath,
  type LinePathOptions,
  type SvgPathOptions,
} from "@pibbl/core";

const lineOptions: LinePathOptions = {
  coords: [
    [10, 20],
    [80, 50],
    [150, 15],
  ],
};
const svgOptions: SvgPathOptions = { d: "M10 90 Q80 20 150 90" };
const handDrawn = createLinePath(lineOptions);
const authored = createSvgPath(svgOptions);
const canvas = document.createElement("canvas");
canvas.width = 170;
canvas.height = 120;
document.body.append(canvas);
const context = canvas.getContext("2d")!;
context.lineWidth = 4;
context.strokeStyle = "#0f766e";
context.stroke(handDrawn);
context.strokeStyle = "#f97316";
context.stroke(authored);

```

## Usage notes

- Strokes both paths on a local Canvas.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.