Generate colorful geometric SVG patterns from input strings - great for avatars, placeholder images, etc. Uses the geopattern library to generate the patterns.
$ ember install ember-cli-geopattern
Use to generate randomized tiling SVG backgrounds. Use the component in your templates:
which produces the following pattern, applied as a background-image
to the component's element:
You can use pattern by itself, by adding a CSS class with a width
and height
to the component:
Or you can provide content to go inside the component's element (i.e. appear on top of the patterned background):
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