Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
img
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

RGBA to feColorMatrix converter

feColorMatrix is an SVG filter that changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color.

This filter is really powerful and allows granular per channel color manipulation. Una Kravets wrote an excellent article explaining how to use it.

Scope

This project aims to easily translate an RGBA value into an SVG color matrix.

Bare in mind you can do much more than this with the matrix, but if you want to colorize an SVG element following an exact RGBA value, then this converter will help you out.

Web Component

This project makes use of the awesome polymer project.

rgba-matrix element has the following attributes:

<rgba-matrix r="1" g="1" b="1" a="1"></rgba-matrix>

The polymer element exposes a set matrix method for setting rgba values:

document.querySelector('rgba-matrix').setMatrix(r,g,b,a);

RGB Values will be converted to decimal from 0 to 255.

Example:

document.querySelector('rgba-matrix').setMatrix(100,200,300,0.5);

Will result in:

<rgba-matrix r="0.39" g="0.78" b="1.18" a="0.5"></rgba-matrix>

Development

You’ll need npm to install the dev dependencies. First make sure you have node installed on your system.

  1. To install the dependencies run:
npm install
  1. To start a server and sass compiler, run:
gulp
  1. Open http://localhost:3000/ 🎉

Enjoy!

Appreciation

Thanks to Brian Leathem, Patrick Riley and the Red Hat UXD team for the breakaway sprint 😄

About

RGBA to feColorMatrix converter polymer webcomponent

Resources

License

Releases

No releases published
You can’t perform that action at this time.