Snippet Inline CSS Filter for Mozilla Update

Dulu gue pernah memposting tentang snippet inline CSS filter for mozilla. Kemudian aku melihat artikel svg filters effects · drag & drop codepen.io/jorgeatgu/pen/wBRmBZ! Ternyata ada beberapa efek keren hasil generate menggunakan syntax SVG Filters? Adapun nama efek tersebut adalah turbu map, turbulence, luminance, discrete, table, fematrix dan morpho.
Singkat cerita, AA Koben akan berbagi trik penulisan CSS secara inline di mana meliputi dari efek-efek yg gue sebutkan tadi! Updated for simple hover effects with CSS filters codepen.io/beben-koben/full/ckKzh.

Syntax HTML<img src="LINK-IMAGE" alt="" class="EFFECT BLUR" />Gantikan tulisan EFFECT BLUR dengan nama-nama efek!
Buka satu halaman full artikel jika demo tidak jalan!

Original Image

Turbu Map Effect

.turbuMap {
-webkit-filter: url("#turbuMap");
filter: url("#turbuMap");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbuMap\'><feTurbulence baseFrequency=\'0.015\' numOctaves=\'2\' type=\'fractalNoise\' result=\'turbulence\' data-filterId=\'3\' /><feDisplacementMap xChannelSelector=\'R\' yChannelSelector=\'G\' in=\'SourceGraphic\' in2=\'turbulence\' scale=\'40\' /></filter></svg>#turbuMap");
}

Turbulence

.turbulence {
-webkit-filter: url("#turbulence");
filter: url("#turbulence");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'turbulence\'><feTurbulence baseFrequency=\'.7\' numOctaves=\'2\' type=\'turbulence\' result=\'fuzz\' stitchTiles=\'stitch\' /><feComposite in=\'SourceGraphic\' in2=\'fuzz\' operator=\'arithmetic\' k1=\'0\' k2=\'1\' k3=\'-3\' k4=\'.01\' /></filter></svg>#turbulence");
}

Luminance

.luminance {
-webkit-filter: url("#luminanceToAlpha");
filter: url("#luminanceToAlpha");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'luminanceToAlpha\'><feColorMatrix type='\luminanceToAlpha'\ values='\0.4'\ in=\'SourceGraphic\' /></filter></svg>#luminanceToAlpha");
}

Discrete I

.discrete {
-webkit-filter: url("#discrete");
filter: url("#discrete");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 .5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5\' /></feComponentTransfer></filter></svg>#discrete");
}

Discrete II

.discrete2 {
-webkit-filter: url("#discrete2");
filter: url("#discrete2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'discrete2\'><feComponentTransfer><feFuncR type=\'discrete\' tableValues=\'0 .5 1 1\' /><feFuncG type=\'discrete\' tableValues=\'0 5 1\' /><feFuncB type=\'discrete\' tableValues=\'0 .5 1 1\' /></feComponentTransfer></filter></svg>#discrete2");
}

Table I

.table {
-webkit-filter: url("#table");
filter: url("#table");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 0 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 0 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table");
}

Table II

.table2 {
-webkit-filter: url("#table2");
filter: url("#table2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'table2\'><feComponentTransfer><feFuncR type=\'table\' tableValues=\'1 0 1\' exponent=\'5\' /><feFuncG type=\'table\' tableValues=\'1 10 1\' exponent=\'2\' /><feFuncB type=\'table\' tableValues=\'1 5 1\' exponent=\'5\'/></feComponentTransfer></filter></svg>#table2");
}

Fematrix I

.fematrix {
-webkit-filter: url("#fematrix");
filter: url("#fematrix");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix\'><feConvolveMatrix order=\'3\' kernelMatrix=\'-1 -1 3 -2 1 -1 -1 1 -1\' /></filter></svg>#fematrix");
}

Fematrix II

.fematrix2 {
-webkit-filter: url("#fematrix2");
filter: url("#fematrix2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'fematrix2\'><feConvolveMatrix order=\'4\' kernelMatrix=\'-2 2 1 -1 -1 3 2 1 -1 0 -1 -4 -1 1 0 0\' /></filter></svg>#fematrix2");
}

Morpho I

.morpho {
-webkit-filter: url("#morpho");
filter: url("#morpho");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho\'><feMorphology operator=\'erode\' radius=\'3\'/></filter></svg>#morpho");
}

Morpho II

.morpho2 {
-webkit-filter: url("#morpho2");
filter: url("#morpho2");
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'morpho2\'><feMorphology operator=\'dilate\' radius=\'3\'/></filter></svg>#morpho2");
}

Capek #:-S