cicadaJS is a <canvas> JavaScript used to create stripe patterns. It supports unlimited stripes, gradients, and more!

I was intrigued by the The Cicada Principle and Why It Matters to Web Designers article, especially the striped example.
This is based on that concept.

Download at Github


Here is a comparison between the original image-based demo (top) and my canvas version (bottom). You’ll notice a small variation in colors, but aside from that it’s a darn-good replica.

This page also uses cicadaJS for the background.

Other Demos

Random Sizes and Colors

How does it work?

cicadaJS provides a cicada() method for canvas elements. It accepts an Array of Objects that define the number of stripes, their colors, widths, and alignment.

This is the code to generate the example above:

    color: [ 'rgba(239, 234, 211, 0.5)', 'rgba(191, 169, 124, 0.5)' ],
    alignment: 'middle'
  }, {
    width: 37,
    color: 'rgba(145, 0, 42, 0.5)',
    alignment: 'left'
  }, {
    width: 29,
    color: [ 'rgba(125, 167, 180, 0.5)', 'rgba(75, 119, 130, 0.5)' ],
    alignment: 'left'

width: Number sets the width of the tile area. Keep in mind that the actual stripe only fills half of this size. The other half is empty.

color: 'String' or Array specifies the stripe color(s). You can use any CSS3 color, including HLSA and RGBA. Transparency is key to making the patterns less repetitive. If you use an Array, it will create a gradient with evenly distributed color stops from your colors.

alignment: ['left','middle','right'] (optional) Sets the alignment of the stripe within the tile area. Nice to stagger the stripes so the left side isn't always a dark stack of all 3. Defaults to 'left'

If you have any issues or contributions, please leave them at github.

Why use it?

cicadaJS has the advantages of being smaller (<1k), fewer http connections, and editable without a graphics program. Hurray! Also (although untested), it should work in older IE versions by utilizing excanvas or some equivalent.