Jul 11, 2016

The infamous Goo filter

To make things Gooey

An example radio button made for example ;)

If you want to learn how to make this button you can watch this video by Chris Gannon https://www.youtube.com/watch?v=O6dc-sJm0Ho

Filters act like layers. So we’ll try applying and testing the effect step by step.

NOW BACK TO GOO!!

SVG goo filter is rather a simple filter wich combines two filters
1.feGaussianBlur
2.feColorMatrix

feGaussianBlur

Simple!!! it blurs the image.

syntax

<feGaussianBlur in=”SourceGraphic” stdDeviation=”6" result=”blur” />

feGaussianBlur Example

Filter used in above example

<defs>
 <filter id=”goo”>
  <feGaussianBlur in=”SourceGraphic” stdDeviation=”6"   result=”blur” />
 </filter>
</defs>

This element has different attributes that help us create the clipping region. Between the filter tags, we can define the primitives that allow us to implement the desired effect. One of these primitives is the feGaussianBlur. The keyword in identifies the input for this primitive, is in this case input ‘SourceGraphic’. The amount of blur to be applied is done using the stdDeviation attribute.result attribute is a reference that can be use later,by another filter.

feColorMatrix

This filter 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.

in a simple manner, it reads the color of every pixel in an image and changes it according to the matrix

syntex

<feColorMatrix in="Blur"
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 1 0" />

What is that shit!!!!! :0

Explanation of Shit Given above

in simple words, you have to replace R G B with RGBA value of the desired color and use multiplayer to fine tune the final results.

Filter used in above example

<filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
        <feColorMatrix in="Blur"
      type="matrix"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
              0 0 0 75 -10"/>
      </filter>
    </defs>

Hear’s your goo

For THE people Who can not Understand any of this, I’m making gui for the goo filter generator wich will be live in a week or two!!!SO stay tuned :)