https://github.com/natescarlet/svg-variable-width-line

Create svg path with each point can have variable width.
https://github.com/natescarlet/svg-variable-width-line

path stroke svg

Last synced: 3 months ago
JSON representation

Create svg path with each point can have variable width.

• Host: GitHub
• URL: https://github.com/natescarlet/svg-variable-width-line
• Owner: NateScarlet
• License: mit
• Created: 2019-08-16T13:46:26.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2025-02-13T16:41:48.000Z (5 months ago)
• Last Synced: 2025-04-05T00:02:23.881Z (3 months ago)
• Topics: path, stroke, svg
• Language: TypeScript
• Homepage:
• Size: 791 KB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SVG Variable width line

[![npm package](https://img.shields.io/npm/v/svg-variable-width-line)](https://www.npmjs.com/package/svg-variable-width-line)

[![Build Status](https://img.shields.io/circleci/project/github/NateScarlet/svg-variable-width-line.svg)](https://circleci.com/gh/NateScarlet/svg-variable-width-line)

Create svg `path` with each point can have variable width.

Can create line with `PointerEvent.pressure`.

[Demo](https://natescarlet.github.io/svg-variable-width-line/)

```javascript

import * as svgVariableWidthLine from 'svg-variable-width-line';

svgVariableWidthLine.compute({

  points: [{ x: 0, y: 0, w: 1 }, { x: 1, y: 0, w: 0 }],

});

// { d: '' }

```