Skip to content

Line

A Line draws a straight line between two points (x1, y1) to (x2, y2). Lines are stroke-only by default — set the stroke property to see them. They're commonly used for axis lines, connectors, separators, and wireframe constructions.

Example

Usage

ts
import {
    createLine,
} from '@ripl/web';

const line = createLine({
    stroke: '#3a86ff',
    lineWidth: 2,
    x1: 50,
    y1: 50,
    x2: 250,
    y2: 200,
});

Properties

The line's geometry is defined by x1, y1, x2, and y2.

TIP

Lines are stroked by default. Set stroke to see the line — fill alone won't produce a visible result.

NOTE

For the full property list, see the Line API Reference.