Miss any of our Open RFC calls?Watch the recordings here! »

ember-cli-geopattern

0.1.0 • Public • Published

ember-cli-geopattern

Component wrapper for the geopattern library.

Installing

$ ember install ember-cli-geopattern

Usage

Use to generate randomized tiling SVG backgrounds. Use the component in your templates:

{{! username = '@davewasmer' }}
{{geo-pattern value=username}}

which produces the following pattern, applied as a background-image to the component's element:

@davewasmer pattern

You can use pattern by itself, by adding a CSS class with a width and height to the component:

{{geo-pattern value=username class='avatar'}}

Or you can provide content to go inside the component's element (i.e. appear on top of the patterned background):

{{#geo-pattern value=username}}
  Your username is: {{username}}
{{/geo-pattern}}

Options

All the geopattern library options are available as options to the component itself (i.e. {{geo-pattern value='foo' generator='hexagons'}}):

  • color - the exact CSS hexadecimal color value to use
  • baseColor - the base CSS hexadecimal color to work from. Think of this like the seed to a random number generator - this won't be the output color, but will be used to generate the output color.
  • generator - the pattern to use. Available patterns (view samples):
    • octogons
    • overlappingCircles
    • plusSigns
    • xes
    • sineWaves
    • hexagons
    • overlappingRings
    • plaid
    • triangles
    • squares
    • concentricCircles
    • diamonds
    • tessellation
    • nestedSquares
    • mosaicSquares
    • chevrons

Keywords

Install

npm i ember-cli-geopattern

DownloadsWeekly Downloads

1

Version

0.1.0

License

MIT

Last publish

Collaborators

  • avatar