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

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です。

type Turbulenceでゆらぎ関数FractalNoiseノイズの関数を指定できます。
baseFrequency ノイズの粗さを調整。
numOctaves ノイズ関数に対するオクターブ、大きくなるほどより複雑になる。
seed 乱数の種。
stitchTiles 継ぎ目の処理方法を設定できます。stitchで継ぎ目をつなぐ、noStitchでつながない。
result 他の効果とつなげるための名前の設定。

feDisplacementMap

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

in 効果を設定します。
種類はSourceGraphic、SourceAlpha、BackgroundImage、 BackgroundAlpha、FillPaint、StrokePaintがあります。
in2 効果を反映させるところを設定します。
scale ずらす幅を設定。

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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL