https://github.com/pictogrammers/bitmask-to-svg
JavaScript Library to convert a 1D/2D Array Bitmask to an SVG Path
https://github.com/pictogrammers/bitmask-to-svg
nodejs pixel-art pixelart
Last synced: 26 days ago
JSON representation
JavaScript Library to convert a 1D/2D Array Bitmask to an SVG Path
- Host: GitHub
- URL: https://github.com/pictogrammers/bitmask-to-svg
- Owner: Pictogrammers
- License: mit
- Created: 2022-12-16T02:40:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-20T02:28:18.000Z (about 2 years ago)
- Last Synced: 2025-04-17T16:07:00.859Z (about 1 month ago)
- Topics: nodejs, pixel-art, pixelart
- Language: TypeScript
- Homepage: https://pictogrammers.github.io/@pictogrammers/bitmask-to-svg/
- Size: 27.3 KB
- Stars: 8
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bitmask-to-svg
JavaScript Library to convert a 1D/2D Array to an SVG Path.
[View the Demo](https://pictogrammers.github.io/@pictogrammers/bitmask-to-svg/)
## Usage
Some use cases for this library.
- 1 Bit depth image to SVG path.
- Bitmap font glyph to SVG path.
- Pixel perfect SVG mask for an image.
```typescript
import bitmaskToPath from '@pictogrammers/bitmask-to-svg';
const letterP = [
[0, 0, 0, 0, 0],
[0, 1, 1, 1, 0],
[0, 1, 0, 1, 1],
[0, 1, 1, 1, 0],
[0, 1, 0, 0, 0],
[0, 1, 0, 0, 0],
[0, 0, 0, 0, 0]
];
const width = letterP[0].length;
const height = letterP.length;
const path = bitmaskToPath(letterP);
console.log(width, height, path);
// 5 7 M2,3H3V2H2ZM2,6H1V1H4V2H5V3H4V4H2Z
```
This path data can then be written to an SVG file in NodeJS.
```typescript
import { writeFileSync } from 'fs';
writeFileSync(
"letter-p.svg",
``,
{
encoding: "utf8"
}
);
```
## Spec
The `options` allows the path to be scaled or offset. The `width` is only required to be passed if the array is 1 dimensional.
| Property | Default | Description |
|----------|---------|-------------|
| width | `undefined` | Required if `data` is a 1 dimensional array. |
| height | `undefined` | Not actually used. |
| scale | `1` | SVG path scale size. |
| offsetX | `0` | This x offset ignores scale! |
| offsetY | `0` | This y offset ignores scale! |
## Development
Clone the repo.
```bash
npm install
npm run build # Build
npm start # Build + View demo
# Navigate to localhost:3000
```