<image-mask>

A Polymer element for masking the images with basic (and some extraordinary) geometric shapes

Demo

Check it live!

Usage

1. Import Custom Element as a module:

   <script src="image-mask.js" type="module"></script>

2. Start using it!

   <image-mask></image-mask>

Options

Attribute | Description | Options | Default
--- | --- | --- | ---
shape | The shape attribute sets a masking shape | circle, triangle, square, hexagon, octagon, star, rhombus, parallelogram, plus, squircle, ring | circle size | The size attribute sets a size of an element | int | 320 src | The src attribute defines a path to an image that will be masked | string | http://placehold.it/320 title | The title attribute sets a short description of an image | string | - desc | The desc attribute sets a long description of an image | string | -

Example

<image-mask shape="circle" size="320" src="img/image.jpg" title="A short description of an image" desc="A long description of an image"></image-mask>

Contributing

1. Fork it
2. Create your feature branch: git checkout -b my-freaking-cool-feature
3. Commit your changes: git commit -m 'Add some freaking cool feature'
4. Push to the branch: git push origin my-freaking-cool-feature
5. Submit a pull request

History

For detailed changelog, check Releases.

License

MIT License