Vector is an open source javascript library for creating interactive graphics. View the repository, run the tests, or meet the team.

Grayscale Open in Sandbox


This interactive demonstrates the range of possible grayscale colors from black to white. The script subdivides the interactive into a bunch of consecutive rectangles. The variable n controls how many sub-rectangles are dawn. Increasing n makes the transition from black to white appear as a smooth gradients.

Note: values for n that do not evenly divide the width of the interactive results in some graphical errors where white stripes appear in the gradient. This can be easily handled by making the width of the rectangles slightly larger (1 pixel) than the result of dividing the width by n.