解 説

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。
slime1
応用するとモバイルのハンバーガーボタンの変わりにもなります。
元ネタはCSS-TRICKSのサイトです。
サンプル
*このサンプルはSafari9.0.3 時点では対応していません。

仕組みが解りやすいように元ネタのサンプルを思いっきりシンプルにしてみました。
CSSのフィルターではblur(20px)と contrast(30)を掛け合わせて実現しています。どうやら、コントラスト効果とぼかしを両方かけるとこのような効果になるようです。
SVGフィルターの方では、blurのフィルターとfeColorMatrixのマトリックスを操作していますが、マトリックスの値は直感的に操作しづらいので元ネタの値を使用しました。

HTMLコード

CSSコード

CSSフィルターで同様の効果をつける

サンプル
フィルターをかけるだけならSVGのフィルターでなくても、CSSのフィルターで同様の事はできます。
しかし、問題は.blobsにbackground: whiteの設定をせねばなりません。
このサンプルのようにシンプルなものなら問題ありませんが、「.blobs」を更に囲む親要素に背景画像を入れたときなど、「.blobs」の背景色が邪魔になります。
SVGのフィルターでは「.blobs」に背景色を付けませんのでそのような問題が起こらないのです。
CSSフィルターとSVGフィルターを上手に使い分けてちょと洒落たパーツを作成するのも良いかもです。

HTMLコード

CSSコード