https://github.com/lokesh-coder/blobshape

Generate SVG blob shapes
https://github.com/lokesh-coder/blobshape

Last synced: 1 day ago
JSON representation

Generate SVG blob shapes

• Host: GitHub
• URL: https://github.com/lokesh-coder/blobshape
• Owner: lokesh-coder
• License: mit
• Created: 2020-06-12T14:13:16.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-09-15T06:20:26.000Z (over 1 year ago)
• Last Synced: 2025-01-17T03:08:23.136Z (9 days ago)
• Language: JavaScript
• Homepage:
• Size: 8.79 KB
• Stars: 81
• Watchers: 3
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - blobshape - coder | 81 | (JavaScript)

README

        









Generate unique and fixed shape blobs for web apps


 

## Installation

```shell

npm i blobshape

```

## Usage

### Generate random blob

```js

import blobshape from "blobshape";

const { path, seedValue } = blobshape();

const svg = ``;

// seedValue - returns id string, later it can be used to get same shape

```

### Get fixed shape blob

Set `seed` value to get same fixed shape

```js

import blobshape from "blobshape";

const { path } = blobshape({ seed: "6-6-7171" });

const svg = ``;

```

### Config

`growth` - Minimum size of the blob in percentage. More the smaller more the randomness.

`edges` - Total nodes to create a shape. Increasing this value will add complexity to the shape.

`size` - SVG blob path size

```js

import blobshape from "blobshape";

const { path } = blobshape({ size: 300, growth: 6, edges: 6, seed: null });

const svg = ``;

```

## Demo

To see live action of this package check [blobs.app](https://lokesh-coder.github.io/blobs.app) and you can find the source code for that in [github repo](https://github.com/lokesh-coder/blobs.app).

## License

MIT