# regl-line2d

> Draw polyline with regl

Latest version **3.1.4** (published 2026-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install regl-line2d
pnpm add regl-line2d
yarn add regl-line2d
bun add regl-line2d
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 3.1.4 |
| Published | 2026-08-24 |
| First published | 2017-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 60.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 60 |
| Author | Dima Yv |
| Maintainers | chriddyp, bpostlethwaite, antrg, bronsolo, t4rk, ndrezner, roman-nb, alexcjohnson, emilykl-plotly, packages-team-plotly, dfcreative, etpinard, dy |
| Keywords | regl, line2d, gl-vis, gl, webgl, polyline, plotly |

## Links

- npm: https://www.npmjs.com/package/regl-line2d
- Repository: https://github.com/dy/regl-line2d
- Homepage: https://github.com/dy/regl-line2d#readme
- Issues: https://github.com/dy/regl-line2d/issues
- npm.io page: https://npm.io/package/regl-line2d

## Dependencies (11)

- [earcut](https://npm.io/package/earcut.md) ^2.1.5
- [parse-rect](https://npm.io/package/parse-rect.md) ^1.2.0
- [to-float32](https://npm.io/package/to-float32.md) ^1.1.0
- [array-bounds](https://npm.io/package/array-bounds.md) ^1.0.1
- [es6-weak-map](https://npm.io/package/es6-weak-map.md) ^2.0.3
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [pick-by-alias](https://npm.io/package/pick-by-alias.md) ^1.2.0
- [array-normalize](https://npm.io/package/array-normalize.md) ^1.1.4
- [color-normalize](https://npm.io/package/color-normalize.md) ^1.5.0
- [array-find-index](https://npm.io/package/array-find-index.md) ^1.0.2
- [flatten-vertex-data](https://npm.io/package/flatten-vertex-data.md) ^1.0.2

## Recent versions

- 3.1.4 (latest) — 2026-08-24
- 3.1.3 — 2024-02-14
- 3.1.2 — 2021-09-08
- 3.1.1 — 2021-06-29
- 3.1.0 — 2020-12-26
- 3.0.18 — 2020-08-17
- 3.0.17 — 2020-07-28
- 3.0.15 — 2019-10-29
- 3.0.14 — 2019-07-02
- 3.0.13 — 2019-01-09
- 3.0.12 — 2018-10-24
- 3.0.11 — 2018-09-10
- 3.0.9 — 2018-05-01
- 3.0.8 — 2018-04-17
- 3.0.7 — 2018-04-17
- … 21 more at https://npm.io/package/regl-line2d/versions

## README

# regl-line2d [![experimental](https://img.shields.io/badge/stability-unstable-green.svg)](http://github.com/badges/stability-badges)

Draw polyline with regl.

![regl-line2d](https://github.com/dy/regl-line2d/blob/master/preview.png?raw=true)

Remake on [gl-line2d](https://github.com/gl-vis/gl-line2d):

* GPU join calculation.
* Bevel, round and rectangular joins.
* Dash patterns.
* Self-overlapping and sharp angles cases.
* Multiline rendering.
* Float64 precision.
* [`<polyline>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline)-compatible API

[Demo](https://gl-vis.github.io/regl-line2d).

## Usage

[![npm install regl-line2d](https://nodei.co/npm/regl-line2d.png?mini=true)](https://npmjs.org/package/regl-line2d/)

```js
let regl = require('regl')({extensions: 'angle_instanced_arrays'})
let line2d = require('regl-line2d')(regl)

// draw red triangle
line2d.render({ thickness: 4, points: [0,0, 1,1, 1,0], close: true, color: 'red' })
```

### `line2d.render(options|list?)`

Draw line or multiple lines and update options, once per frame at most.

Option | Default | Description
---|---|---
`positions`, `points`, `data` | `[]` | Point coordinates, eg. `[0,0, 1,1, 0,2, 1,-1]` or `[[0,0], [1,1], [0,2], [1,-1]]`.
`color`, `colors`, `stroke` | `black` | CSS color string or an array with `0..1` values, eg. `'red'` or `[0, 0, 0, 1]`.
`fill` | `null` | Fill area enclosed by line with defined color.
`opacity` | `1` | Line transparency regardless of color.
`thickness`, `lineWidth`, `width`, `strokeWidth` | `1` | Line width in px.
`dashes`, `dash`, `dasharray` | `null` | Array with dash lengths in px, altering color/space pairs, ie. `[2,10, 5,10, ...]`. `null` corresponds to solid line.
`join`, `type` | `bevel` | Join style: `'rect'`, `'round'`, `'bevel'`. Applied to caps too.
`miterLimit` | `1` | Max ratio of the join length to the thickness.
`close`, `closed`, `closePath` | `false` | Connect last point with the first point with a segment.
`overlay` | `false` | Enable overlay of line segments.
`range`, `dataBox` | `null` | Visible data range.
`viewport`, `viewBox` | `null` | Area within canvas, an array `[left, top, right, bottom]` or an object `{x, y, w, h}` or `{left, top, bottom, right}`.

To render multiple lines pass an array with options for every line as `list`:

```js
line2d.render([
  {thickness: 2, points: [0,0, 1,1], color: 'blue'},
  {thickness: 2, points: [0,1, 1,0], color: 'blue'}
])
```

`null` argument will destroy `line2d` instance and dispose resources.

### `line2d.update(options|list)`

Update line(s) not incurring redraw.

### `line2d.draw(id?)`

Draw lines from last updated options. `id` integer can specify a single line from the `list` to redraw.

### `line2d.destroy()`

Dispose `line2d` and associated resources.


## Related

* [regl-scatter2d](https://github.com/dy/regl-scatter2d)
* [regl-error2d](https://github.com/dy/regl-error2d)

## Similar

* [regl-line-builder](https://github.com/jpweeks/regl-line-builder)
* [instanced-lines-demos](https://github.com/wwwtyro/instanced-lines-demos)

## License

(c) 2017 Dima Yv. MIT License

Development supported by [plot.ly](https://github.com/plotly/).

---
_Source: https://npm.io/package/regl-line2d · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._