1
- # blobs [ ![ ] ( https://img.shields.io/npm/v/blobs.svg )] ( https://www.npmjs.com/package/blobs )
2
-
3
- > random svg blob generator
1
+ <p align =" center " >
2
+ <img src="https://svgsaur.us/?t=blobs&f=Comic_Sans_MS,cursive,sans-serif&s=100&w=260&h=90&y=85&o=b&c=222" />
3
+ </p >
4
+
5
+ <p align =" center " >
6
+ <a href="https://www.npmjs.com/package/blobs">
7
+ <img src="https://img.shields.io/npm/v/blobs.svg" />
8
+ </a>
9
+ <a href="https://bundlephobia.com/result?p=blobs">
10
+ <img src="https://img.shields.io/bundlephobia/min/blobs.svg" />
11
+ </a>
12
+ </p >
4
13
5
14
## Install
6
15
@@ -10,14 +19,18 @@ $ npm install blobs
10
19
11
20
## Usage
12
21
13
- <img align =" right " src =" blob.svg " />
22
+   ;
23
+
24
+ <img align =" left " height =" 288 " src =" https://user-images.githubusercontent.com/9319710/50946063-b73d2180-1465-11e9-9f4e-fb80ebb31f92.png " />
25
+
26
+ <img align =" right " height =" 288 " src =" https://user-images.githubusercontent.com/9319710/50946064-b73d2180-1465-11e9-827d-afeab9bddbc9.png " />
14
27
15
28
``` typescript
16
- import blobs form " blobs" ;
29
+ import blobs from " blobs" ;
17
30
18
31
const svg = blobs ({
19
- size : 300 ,
20
- complexity : 0.4 ,
32
+ size: 288 ,
33
+ complexity: 0.2 ,
21
34
contrast: 0.4 ,
22
35
color: " pink" ,
23
36
stroke: {
@@ -30,27 +43,27 @@ const svg = blobs({
30
43
31
44
## Options
32
45
33
- ### Required
46
+ #### Required
34
47
35
- | Name | Type | Description |
36
- | -------------- | ---------- | --------------------------------------------- |
37
- | ` size ` | ` number ` | Bounding box dimensions (in pixels) |
38
- | ` complexity ` | ` number ` | Shape complexity (number of points) |
39
- | ` contrast ` | ` number ` | Shape contrast (randomness of point position) |
48
+ Name | Type | Description
49
+ -------------- | ---------- | ---------------------------------------------
50
+ ` size ` | ` number ` | Bounding box dimensions (in pixels)
51
+ ` complexity ` | ` number ` | Shape complexity (number of points)
52
+ ` contrast ` | ` number ` | Shape contrast (randomness of point position)
40
53
41
54
42
- ### Optional
55
+ #### Optional
43
56
44
- | Name | Type | Default | Description |
45
- | -------------- | ---------- | ---------- | --------------------------------------------- |
46
- | ` color ` | ` string ?` | ` none ` | Fill color |
47
- | ` stroke ` | ` object ?` | ` ...` | Stroke options |
48
- | ` stroke .color ` | ` string ` | ` none ` | Stroke color |
49
- | ` stroke .width ` | ` number ` | ` 0` | Stroke width (in pixels) |
50
- | ` seed ` | ` string ?` | _ ` random ` _ | Value to seed random number generator |
51
- | ` guides ` | ` boolean ?` | ` false ` | Render points, handles and stroke |
57
+ Name | Type | Default | Description
58
+ -------------- | ---------- | ---------- | -------------------------------------
59
+ ` color ` | ` string? ` | ` none ` | Fill color
60
+ ` stroke ` | ` object? ` | ` ... ` | Stroke options
61
+ ` stroke.color ` | ` string ` | ` none ` | Stroke color
62
+ ` stroke.width ` | ` number ` | ` 0 ` | Stroke width (in pixels)
63
+ ` seed ` | ` string? ` | _ ` random ` _ | Value to seed random number generator
64
+ ` guides ` | ` boolean? ` | ` false ` | Render points, handles and stroke
52
65
53
- _Guides will use stroke color and width if defined. Otherwise, they default to ` black ` stroke with ` 1` width ._
66
+ _ Guides will use stroke color and width if defined. Otherwise, they default to ` black ` stroke with width of ` 1 ` ._
54
67
55
68
## License
56
69
0 commit comments