svg-filtered

0.3.3 • Public • Published

SVG Filtered

Filter html elements by using svg filters on them.

filterify

Installation

$ npm install svg-filtered

Also you can just use the file dist/filtered.js and it will export out a global filtered variable.

Usage

filtered[ {name-of-filter} ]( selector[, options ]);

<img class="inversed-image" src="/cat.gif" alt="cats foo" />
<script src="path-to/filtered.js"></script>
<script>
    filtered.inverse( '.inversed-image' );
</script> 

Right now there is only three filters ( more coming soon ), or help build one its easy!

  • inverse
  • blur - you can set the deviation
  • colorFlood - you can set the color to use

This works with browserify

var filtered = require( 'filtered' );

filtered.colorFlood( '.color-me', {
    color: 'tomato'
});

Current Browser Support

  • Chrome latest
  • Firefox latest
  • Chrome for Android

looking to support

  • IE 10,11
  • Safari 6
  • Safari IOS

Package Sidebar

Install

npm i svg-filtered

Weekly Downloads

3

Version

0.3.3

License

MIT

Last publish

Collaborators

  • ~jcblw