🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

shape-shifter is an all-in-one icon element that can morph into different shapes. Pretty cool for animated icons but works for static icons, too!

Animation Core Java Script

Documentation

<shape-shifter>

shape-shifter is an all-in-one icon element that can morph into different shapes. Pretty cool for animated icons but works for static icons, too!

Maintained by Martin Kleinschrodt (https://github.com/maklesoft).

Demo

Check it live.

Usage

With Bower

  1. Install the component

    $ bower install shape-shifter
  2. Load polymer platform and shape-shifter element

    <script src="bower_components/platform/platform.js"></script> <link rel="import" href="bower_components/shape-shifter/shape-shifter.html">
  3. Start using it!

    <shape-shifter shape="plus"></shape-shifter>

Without Bower

  1. Import Web Components' polyfill:

    <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
  2. Import Custom Element:

    <link rel="import" href="shape-shifter.html">
  3. Start using it!

    <shape-shifter shape="plus"></shape-shifter>

Options

Attribute Options Default Description
shape plus, cancel, check, menu, more, left, right, top, down, copy, edit, home, save, trash [empty] The shape to take on. If empty, will show nothing.
color string #000 The color of the element
springy boolean false Use a different animation

Custom CSS properties

--shape-shifter-primary-color defines the primary stroke color. Default is currentColor --shape-shifter-secondary-color defines the secondary stroke color. Default is #ffffff

Contributing

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

History

For detailed changelog, check Releases.

License

MIT License


You May Also Like