File tree Expand file tree Collapse file tree 3 files changed +76
-4
lines changed Expand file tree Collapse file tree 3 files changed +76
-4
lines changed Original file line number Diff line number Diff line change 1
- # blobs
1
+ # blobs [ ![ ] ( https://img.shields.io/npm/v/blobs.svg )] ( https://www.npmjs.com/package/blobs )
2
+
3
+ > random svg blob generator
4
+
5
+ ## Install
6
+
7
+ ``` shell
8
+ $ npm install blobs
9
+ ```
10
+
11
+ ## Usage
12
+
13
+ <img align =" right " src =" blob.svg " />
14
+
15
+ ``` typescript
16
+ import blobs form " blobs" ;
17
+
18
+ const svg = blobs ({
19
+ size : 300,
20
+ complexity : 0.4,
21
+ contrast : 0.4,
22
+ color : "pink" ,
23
+ stroke : {
24
+ color : "red" ,
25
+ width : 2,
26
+ },
27
+ guides : true ,
28
+ });
29
+ ` ` `
30
+
31
+ ## Options
32
+
33
+ ### Required
34
+
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) |
40
+
41
+
42
+ ### Optional
43
+
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 |
52
+
53
+ _Guides will use stroke color and width if defined. Otherwise, they default to ` black ` stroke with ` 1` width._
54
+
55
+ ## License
56
+
57
+ [MIT](./LICENSE)
Original file line number Diff line number Diff line change @@ -33,16 +33,31 @@ export interface SVGPoint {
33
33
}
34
34
35
35
export interface BlobOptions {
36
+ // Bounding box dimensions.
36
37
size : number ;
37
- seed ?: string ;
38
+
39
+ // Shape complexity.
40
+ complexity : number ;
41
+
42
+ // Shape contrast.
43
+ contrast : number ;
44
+
45
+ // Fill color.
38
46
color ?: string ;
47
+
39
48
stroke ?: {
49
+ // Stroke color.
40
50
color : string ;
51
+
52
+ // Stroke width.
41
53
width : number ;
42
54
} ;
55
+
56
+ // Value to seed random number generator.
57
+ seed ?: string ;
58
+
59
+ // Render points, handles and stroke.
43
60
guides ?: boolean ;
44
- complexity : number ;
45
- contrast : number ;
46
61
}
47
62
48
63
export interface SmoothingOptions {
You can’t perform that action at this time.
0 commit comments