Line and SVG paths

Run Stop Open full page

Read as Markdown

Construct a polyline and an SVG path from authored coordinates.

APIs demonstrated

• createLinePath from @pibbl/core
• createSvgPath from @pibbl/core
• LinePathOptions from @pibbl/core
• SvgPathOptions from @pibbl/core

Complete example

Plain source. Run as a browser module after the document body exists. TSX uses jsx: "react-jsx" and jsxImportSource: "@pibbl/core".

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 2dccb19. ALPHA — NOT FOR PRODUCTION USE.