SVG〜フィルターを使ってスライムのような効果 | IT工房｜AI入門とWeb開発

SVGのフィルター効果を使ってスライムのような効果を付けてみましょう。

応用するとモバイルのハンバーガーボタンの変わりにもなります。
元ネタはCSS-TRICKSのサイトです。
サンプル
＊このサンプルはSafari9.0.3 時点では対応していません。

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

HTMLコード

<div class="blobs">
    <div class="blob"></div>
    <div class="blob red"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>

CSSコード
[CSS]
.blobs {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 400px;
height: 200px;
margin: auto;
-webkit-filter:url(#goo);
filter:url(#goo);
}

.blob {
background: black;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
border-radius: 100%;
}
.red{
background: red;
}

@-webkit-keyframes blob-anim-left {
0% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(-55px);
transform: translateX(-55px);
}
}

@keyframes blob-anim-left {
0% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(-55px);
transform: translateX(-55px);
}
}

.blob:first-child {
-webkit-animation: blob-anim-left ease-in-out 0.8s infinite alternate;
animation: blob-anim-left ease-in-out 0.8s infinite alternate;
}

@-webkit-keyframes blob-anim-right {
0% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(55px);
transform: translateX(55px);
}
}

@keyframes blob-anim-right {
0% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(55px);
transform: translateX(55px);
}
}

.blob:last-child {
-webkit-animation: blob-anim-right ease-in-out 0.8s infinite alternate;
animation: blob-anim-right ease-in-out 0.8s infinite alternate;
}
[/CSS]

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

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

HTMLコード

<div class="blobs">
  <div class="blob"></div>
  <div class="blob red"></div>
</div>

CSSコード

.blobs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: white;
  width: 400px;
  height: 200px;
  margin: auto;
  -webkit-filter: blur(20px) contrast(30);
          filter: blur(20px) contrast(30);/*これがポイント*/
}

.blob {
  background: black;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 100%;
}
.red{
  background: red;
}

@-webkit-keyframes blob-anim-left {
  0% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(-55px);
            transform: translateX(-55px);
  }
}

@keyframes blob-anim-left {
  0% {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(-55px);
            transform: translateX(-55px);
  }
}
.blob:first-child {
  -webkit-animation: blob-anim-left ease-in-out 0.8s infinite alternate;
          animation: blob-anim-left ease-in-out 0.8s infinite alternate;
}

@-webkit-keyframes blob-anim-right {
  0% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(55px);
            transform: translateX(55px);
  }
}

@keyframes blob-anim-right {
  0% {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(55px);
            transform: translateX(55px);
  }
}
.blob:last-child {
  -webkit-animation: blob-anim-right ease-in-out 0.8s infinite alternate;
          animation: blob-anim-right ease-in-out 0.8s infinite alternate;
}