Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/g-harel/blobs
random blob generation and animation
https://github.com/g-harel/blobs
blob generator svg
Last synced: 18 days ago
JSON representation
random blob generation and animation
- Host: GitHub
- URL: https://github.com/g-harel/blobs
- Owner: g-harel
- License: mit
- Created: 2019-01-04T22:51:30.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-01T03:38:11.000Z (about 1 year ago)
- Last Synced: 2024-04-14T10:15:37.139Z (8 months ago)
- Topics: blob, generator, svg
- Language: TypeScript
- Homepage: https://blobs.dev
- Size: 861 KB
- Stars: 146
- Watchers: 5
- Forks: 16
- Open Issues: 2
-
Metadata Files:
- Readme: README.legacy.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - blobs - harel | 152 | (TypeScript)
README
The legacy API exists to preserve compatibility for users importing the package
using a `script` tag. Because [unpkg.com](https://unpkg.com) serves the latest
version of the package if no version is specified, I can't break backwards
compatibility, even with a major release. This API also preserves a few features
that could potentially still be useful to some users (guide rendering and
editable svg).
---
## Install
```ts
// $ npm install blobs
const blobs = require("blobs");
```
```html
```
## Usage
```typescript
const svg = blobs(options);
```
_Options are **not**
[sanitized](https://en.wikipedia.org/wiki/HTML_sanitization). Never trust raw
user-submitted values in the options._
## Options
#### Required
| Name | Type | Description |
| ------------ | -------- | -------------------------------------------- |
| `size` | `number` | Bounding box dimensions (in pixels) |
| `complexity` | `number` | Blob complexity (number of points) |
| `contrast` | `number` | Blob contrast (randomness of point position) |
#### Optional
| Name | Type | Default | Description |
| -------------- | ---------- | ---------- | ------------------------------------- |
| `color` | `string?` | `"none"` | Fill color |
| `stroke` | `object?` | `...` | Stroke options |
| `stroke.color` | `string` | `"none"` | Stroke color |
| `stroke.width` | `number` | `0` | Stroke width (in pixels) |
| `seed` | `string?` | _`random`_ | Value to seed random number generator |
| `guides` | `boolean?` | `false` | Render points, handles and stroke |
_Either `stroke` or `color` must be defined._
_Guides will use stroke color and width if defined. Otherwise, they default to
`black` stroke with width of `1`._
##### Example Options Object
```typescript
const options = {
size: 600,
complexity: 0.2,
contrast: 0.4,
color: "#ec576b",
stroke: {
width: 0,
color: "black",
},
guides: false,
seed: "1234",
};
```
## Advanced
If you need to edit the output svg for your use case, blobs also allows for
_editable_ output.
```typescript
const editableSvg = blobs.editable(options);
```
The output of this function is a data structure that represents a nested svg
document. This structure can be changed and rendered to a string using its
`render` function.
```typescript
editableSvg.attributes.width = 1000;
const svg = editableSvg.render();
```
New elements can be added anywhere in the hierarchy.
```typescript
const xmlChild = blobs.xml("path");
xmlChild.attributes.stroke = "red";
// ...
editableSvg.children.push(xmlChild);
```