js不要！SVGのFilterで手書きアニメーションさせてみた

どうもですよ、はやちですよ・ω・
今回はSVGのFilterについてご紹介をしたく、手書きで書いたようなアニメーションを作ってみました。

実装方法

Filter内でfeTurbulence(ノイズエフェクト)とfeDisplacementMap(空間を定義する)という原始Filterを使って歪ませた文字を作ります。

<filter id="squiggly-0">
      <feTurbulence 
      type="fractalNoise" //ノイズの関数
      id="turbulence" //キメの細かさ
      baseFrequency="0.02" //ノイズ関数に対するオクターブ
      numOctaves="3" //ノイズ関数に対するオクターブ
      result="noise" //設定する文字列
      seed="0" //乱数の種
      />
      <feDisplacementMap 
      id="displacement" //効果をかける処理
      in="SourceGraphic" //効果を表す所を設定
      in2="noise" scale="4" //ずらす位置
      />
</filter>

使用した原始Filterは以下のように設定することができます。

feTurbulence

ノイズを設定するFilterです。

feDisplacementMap

元の要素を変形し様々な効果をつけることができます。

Filterのこれらの設定がワンセット分で、scaleのパターン分のFilterを複数用意します。

/* アニメーションを反映させたいDOM */
<div class="target">
  <!--/省略-->
</div>

/* アニメーションの設定 */
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <filter id="squiggly-0">
      <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
      <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="4" />
    </filter>
    <filter id="squiggly-2">
      <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
    </filter>
    <filter id="squiggly-3">
      <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
    </filter>
    <filter id="squiggly-4">
      <feTurbulence type="fractalNoise" id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="4" />
    </filter>
</svg>

用意できたらcssのanimateでこれらのパターンをループ再生していきます。

keyframes squiggly-anim{
  0% {
    filter:url('#squiggly-0');
  }
  25% {
    filter:url('#squiggly-1');
  }
  50% {
    filter:url('#squiggly-2');
  }
  75% {
    filter:url('#squiggly-3');
  }
  100% {
    filter:url('#squiggly-4');
  }
}

.target{
  animation:squiggly-anim .34s linear infinite;
 }

出来上がったものがこちらになります( ˘ω˘)☞三☞ｼｭｯｼｭｯ

まとめ

いかがでしょうか。

いつもの顔(´ʘ‿ʘ｀)は画像でSVG Filterの文言部分はinputなので、どの要素に対してもアニメーションが反映されます。
テキストを変えてみておためしくださいまし。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。