@@ -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
6160const gradient = require (' gradient-string' );
6261
6362// Use the rainbow gradient
6463gradient .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