# Lines and authored paths
Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data.

## APIs demonstrated

- [HorizontalLine](/reference/components/horizontal-line/) from `@pibbl/core`
- [HorizontalLineProps](/reference/types/elements-components/) from `@pibbl/core`
- [HorizontalLineStyle](/reference/types/styles/) from `@pibbl/core`
- [Line](/reference/components/line/) from `@pibbl/core`
- [LineProps](/reference/types/elements-components/) from `@pibbl/core`
- [LineStyle](/reference/types/styles/) from `@pibbl/core`
- [Path](/reference/components/path/) from `@pibbl/core`
- [PathProps](/reference/types/elements-components/) from `@pibbl/core`
- [PathStyle](/reference/types/styles/) from `@pibbl/core`
- [SvgPath](/reference/components/svg-path/) from `@pibbl/core`
- [SvgPathProps](/reference/types/elements-components/) from `@pibbl/core`
- [SvgPathStyle](/reference/types/styles/) from `@pibbl/core`
- [VerticalLine](/reference/components/vertical-line/) from `@pibbl/core`
- [VerticalLineProps](/reference/types/elements-components/) from `@pibbl/core`
- [VerticalLineStyle](/reference/types/styles/) from `@pibbl/core`

## Complete example

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

```tsx
import {
  HorizontalLine,
  Line,
  Path,
  PathGeometry,
  SvgPath,
  VerticalLine,
  pibbl,
  type HorizontalLineProps,
  type HorizontalLineStyle,
  type LineProps,
  type LineStyle,
  type PathProps,
  type PathStyle,
  type SvgPathProps,
  type SvgPathStyle,
  type VerticalLineProps,
  type VerticalLineStyle,
} from "@pibbl/core";

const lineProps: LineProps = { pointerEvents: "auto" };
const lineStyle: LineStyle = {
  coords: [
    [20, 35],
    [100, 75],
    [180, 30],
  ],
  stroke: "#0f766e",
  strokeWidth: 4,
};
const horizontalProps: HorizontalLineProps = { pointerEvents: "auto" };
const horizontalStyle: HorizontalLineStyle = {
  y: 100,
  x1: 20,
  x2: 300,
  stroke: "#f97316",
  strokeWidth: 3,
};
const verticalProps: VerticalLineProps = { pointerEvents: "auto" };
const verticalStyle: VerticalLineStyle = {
  x: 245,
  y1: 20,
  y2: 185,
  stroke: "#7c3aed",
  strokeWidth: 3,
};
const heart = new PathGeometry();
heart.moveTo(80, 150);
heart.bezierCurveTo(45, 115, 20, 165, 80, 200);
heart.bezierCurveTo(140, 165, 115, 115, 80, 150);
heart.closePath();
const pathProps: PathProps = { pointerEvents: "auto" };
const pathStyle: PathStyle = { d: heart, fill: "#e11d48" };
const svgProps: SvgPathProps = { pointerEvents: "auto" };
const svgStyle: SvgPathStyle = {
  d: "M145 155 Q180 120 215 155 Q180 190 145 155 Z",
  fill: "#facc15",
  stroke: "#854d0e",
  strokeWidth: 2,
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(
  canvas,
  <>
    <Line {...lineProps} style={lineStyle} />
    <HorizontalLine {...horizontalProps} style={horizontalStyle} />
    <VerticalLine {...verticalProps} style={verticalStyle} />
    <Path {...pathProps} style={pathStyle} />
    <SvgPath {...svgProps} style={svgStyle} />
  </>,
);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Creates its own canvas and disposes the Pibbl mount on pagehide.

## Documentation version

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