https://github.com/qq15725/modern-path2d

👾 A Path2D library, fully compatible with Web Path2D, with additional support for triangulate、animation、deformation etc.
https://github.com/qq15725/modern-path2d

modern-path2d path2d path2d-animation path2d-deformation path2d-playback

Last synced: 7 days ago
JSON representation

👾 A Path2D library, fully compatible with Web Path2D, with additional support for triangulate、animation、deformation etc.

• Host: GitHub
• URL: https://github.com/qq15725/modern-path2d
• Owner: qq15725
• License: mit
• Created: 2024-09-24T08:25:56.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2026-05-06T11:10:44.000Z (24 days ago)
• Last Synced: 2026-05-06T12:17:53.669Z (24 days ago)
• Topics: modern-path2d, path2d, path2d-animation, path2d-deformation, path2d-playback
• Language: TypeScript
• Homepage:
• Size: 656 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
modern-path2d




  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



## Features

- Compatible Web Path2D

- Path transform

- Path triangulate (fill、stroke)

- Parse SVG to Path2DSet

- TypeScript

## 📦 Install

```sh

npm i modern-path2d

```

## 🦄 Usage

```ts

import { Path2D, Path2DSet, svgToPath2DSet } from 'modern-path2d'

const path = new Path2D()

// Window.Path2D methods

path.arc(75, 75, 50, 0, Math.PI * 2, true)

path.moveTo(110, 75)

path.arc(75, 75, 35, 0, Math.PI, false)

path.moveTo(65, 65)

path.arc(60, 65, 5, 0, Math.PI * 2, true)

path.moveTo(95, 65)

path.arc(90, 65, 5, 0, Math.PI * 2, true)

// add SVG path data

path.addData('M10,30 A20,20 0,0,1 50,30 A20,20 0,0,1 90,30 Q90,60 50,90 Q10,60 10,30 z M5,5 L90,90')

// add SVG path commands

path.addCommands([

  { type: 'M', x: 118, y: 39 },

  { type: 'L', x: 218, y: 39 }

])

// add SVG XML

const pathSet = svgToPath2DSet(`

`)

pathSet.paths.forEach((parsedPath) => {

  path.addPath(parsedPath)

})

/**

 * Export

 */

// export SVG path data

console.log(path.toData())

// export SVG path commands

console.log(path.toCommands())

// export to canvas ctx

path.drawTo(document.getElementById('canvas').getContext('2d'))

// export to canvas

document.body.append(new Path2DSet([path]).toCanvas())

// export to SVG DOM

document.body.append(new Path2DSet([path]).toSvg())

/**

 * Triangulate

 */

// triangulate for fill

console.log(path.fillTriangulate())

// triangulate for stroke

console.log(path.strokeTriangulate())

```