Skip to content

Commit ed32b1f

Browse files
authored
Move 'advanced gradients' wiki in readme
1 parent f2f1ed7 commit ed32b1f

File tree

1 file changed

+72
-3
lines changed

1 file changed

+72
-3
lines changed

README.md

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,6 @@ let coolGradient = gradient([
4545
]);
4646
```
4747

48-
You can check out more advanced usages of gradients in the [wiki](https://github.com/bokub/gradient-string/wiki/Advanced-gradients), such as custom color stops or color interpolation options.
49-
5048
### Use a gradient
5149

5250
```javascript
@@ -57,15 +55,86 @@ console.log(coolString);
5755
## Built-in gradients
5856

5957
### Usage
58+
6059
```javascript
6160
const gradient = require('gradient-string');
6261

6362
// Use the rainbow gradient
6463
gradient.rainbow('I love gradient-strings!')
6564
```
66-
#### Available built-in gradients
65+
66+
### Available built-in gradients
6767
[![Built-in gradients](http://bit.ly/2uFygrL)](http://bit.ly/2ufX07r)
6868

69+
## Advanced gradients
70+
71+
<details>
72+
<summary>
73+
There are also more advanced options for gradient customization, such as custom color stops, or choice of color interpolation
74+
</summary>
75+
76+
### Custom color stops
77+
78+
By default, the gradient color stops are distributed equidistantly.
79+
80+
You can specify the position of each color stop (between `0` and `1`), using the following syntax:
81+
82+
```javascript
83+
let coolGradient = gradient([
84+
{color: '#d8e0de', pos: 0},
85+
{color: '#255B53', pos: 0.8},
86+
{color: '#000000', pos: 1}
87+
]);
88+
```
89+
90+
### Color interpolation
91+
92+
When using a gradient, you can actually add a second parameter to choose how the colors will be generated.
93+
94+
Here is the full gradient API:
95+
96+
#### myGradient(text, [options])
97+
98+
##### text
99+
Type: `string`<br>
100+
String you want to color.
101+
102+
##### options
103+
Type: `Object`<br>
104+
105+
###### interpolation
106+
Type: `string`<br>
107+
The gradient can be generated using RGB or HSV interpolation. HSV usually produces brighter colors.
108+
`interpolation` can be set to `rgb` for RGB interpolation, or`hsv` for HSV interpolation.<br>
109+
Defaults to `rgb`. Case insentitive
110+
111+
###### hsvSpin
112+
Type: `string`<br>
113+
Used only in the case of HSV interpolation.<br>
114+
Because hue can be considered as a circle, there are two ways to go from a color to another color.<br>
115+
`hsvSpin` can be either `short` or `long`, depending on if you want to take the shortest or the longest way between two colors.<br>
116+
Defaults to `short`. Case insensitive
117+
118+
#### Example
119+
##### Code
120+
```javascript
121+
const redToGreen = gradient('red', 'green');
122+
const str = ''.repeat(48);
123+
124+
// Standard RGB gradient
125+
console.log(redToGreen(str));
126+
127+
// Short HSV gradient: red -> yellow -> green
128+
console.log(redToGreen(str, {interpolation: 'hsv'}));
129+
130+
// Long HSV gradient: red -> magenta -> blue -> cyan -> green
131+
console.log(redToGreen(str, {interpolation: 'hsv', hsvSpin: 'long'}));
132+
```
133+
##### Result
134+
![Example result](http://i.imgur.com/plQAN2Q.png)
135+
136+
</details>
137+
69138
## Dependencies
70139

71140
- [tinygradient](https://github.com/mistic100/tinygradient) - Generate gradients

0 commit comments

Comments
 (0)