inkscapeで書いたSVGをアニメーション　文字のアウトライン・ボールが弾むアニメーション

こんにちは！

この記事は、inkscapeで書いたSVGを使って、CSSでアニメーションを付けた記録です。

HTML5 では svg 要素を HTML の中に直接記述（コードをインラインで記述）することができるので、それを利用してアニメーションをつけています。

この記事はこんな方にお勧め

svgを初めて触る
svgを動かしてみたい

作ったものは以下↓

スマホの方は、Resultを押してみてね。

弾むアニメーション↓

1. 弾むボールのアニメーション
2. 文字のラインに沿ってアニメーションする

弾むボールのアニメーション

まずはボールのアニメーションから。

inkscapeで絵をかいてsvgファイルで保存する

inkscapeで絵をかきます。

弾むボールを書きます。ボールというか、泡を書いちゃいました（　＾ω＾）・・・

このオブジェクトを動かすので、svgのファイル形式で保存をします。

コードをHTMLに貼り付ける

自分のエディタで保存したsvgファイルを開きます。

※下記はVScodeで開いた画像です。

開くと、svgのコードが出来上がっているので、2行目<svg ~からコピーをします。

少しコードを減らせるのですが、ここでは割愛します。

今度詳しく勉強して記事にしたいと思います。

コピーしたものを、HTMLのbodyの表示したい所に貼り付けます。

※サンプル画像では、<div class =”bubble”>の下に貼り付けました。

これで表示されました。

CSSで弾むアニメーションをつける

次に、svgにCSSでアニメーションをつけていきます。

作成されたsvgコードを見ると


   <svg
            xmlns:svg="http://www.w3.org/2000/svg"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
            width="90.238838mm"
            height="89.958336mm"
            viewBox="0 0 90.238838 89.958336"
            version="1.1"
            id="svg8"
            inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
            sodipodi:docname="bable.svg">
           <defs
              id="defs2" />
           <sodipodi:namedview
              id="base"
              pagecolor="#ffffff"
              bordercolor="#666666"
              borderopacity="1.0"
              inkscape:pageopacit
・・・・・・

<svg

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

width="90.238838mm"

height="89.958336mm"

viewBox="0 0 90.238838 89.958336"

version="1.1"

id="svg8"

inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"

sodipodi:docname="bable.svg">

<defs

id="defs2" />

<sodipodi:namedview

id="base"

pagecolor="#ffffff"

bordercolor="#666666"

borderopacity="1.0"

inkscape:pageopacit

・・・・・・

10行目に　id=”svg8″　とありますので、このidを使用してCSSを設定します。

ちなみにクロームのデベロッパーツール（F12）ではこんな感じで探せます。

CSS全体↓


.bubble{
  width:900px;
  margin-top:50px;
  margin-right:auto;
  margin-left:auto;
}
#svg8{
    position: absolute;
    left: 50px;
    right: 0;
    top:50px;
    bottom: 0;
　　width:100px;/*ボールの大きさ*/
    height:100px;/*ボールの大きさ*/
    margin: auto;
    -webkit-animation: bound-anim 1s infinite;
            animation: bound-anim 1s infinite;/*アニメーション*/
  }
  
  @-webkit-keyframes bound-anim {
   0%,100% {top: 0;transform: scale(1);}
    30% {top: -60%; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 0;transform: scale(1.15,0.9);}
  }
  
  @keyframes bound-anim {
   0%,100% {top: 0;transform: scale(1);}
    30% {top: -60%; transform: scale(0.96,1.04);}
    60% {transform: scale(1);}
    90% {top: 0;transform: scale(1.15,0.9);}
  }
  
  /*影*/
  .shadow{
    position: absolute;
    left: 50px;
    right: 0;
    top:0;
    bottom: -95px;
    margin: auto;
    width: 60px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    -webkit-filter: blur(6px);
            filter: blur(6px);
    opacity:0.9;
    -webkit-animation: shadow-anim 1s infinite;
            animation: shadow-anim 1s infinite;
  }
  
  @-webkit-keyframes shadow-anim {
    0%,100%  {transform: scale(1);-webkit-filter: blur(4px);filter: blur(4px);}
    30% {transform: scale(1.6,1);-webkit-filter: blur(8px);filter: blur(8px);}
  }
  
  @keyframes shadow-anim {
    0%,100%  {transform: scale(1);-webkit-filter: blur(4px);filter: blur(4px);}
    30% {transform: scale(1.6,1);-webkit-filter: blur(8px);filter: blur(8px);}
  }

.bubble{

width:900px;

margin-top:50px;

margin-right:auto;

margin-left:auto;

}

#svg8{

position: absolute;

left: 50px;

right: 0;

top:50px;

bottom: 0;

　　width:100px;/*ボールの大きさ*/

height:100px;/*ボールの大きさ*/

margin: auto;

-webkit-animation: bound-anim 1s infinite;

animation: bound-anim 1s infinite;/*アニメーション*/

}

@-webkit-keyframes bound-anim {

0%,100% {top: 0;transform: scale(1);}

30% {top: -60%; transform: scale(0.96,1.04);}

60% {transform: scale(1);}

90% {top: 0;transform: scale(1.15,0.9);}

}

@keyframes bound-anim {

0%,100% {top: 0;transform: scale(1);}

30% {top: -60%; transform: scale(0.96,1.04);}

60% {transform: scale(1);}

90% {top: 0;transform: scale(1.15,0.9);}

}

/*影*/

.shadow{

position: absolute;

left: 50px;

right: 0;

top:0;

bottom: -95px;

margin: auto;

width: 60px;

height: 10px;

border-radius: 50%;

background: #000;

-webkit-filter: blur(6px);

filter: blur(6px);

opacity:0.9;

-webkit-animation: shadow-anim 1s infinite;

animation: shadow-anim 1s infinite;

}

@-webkit-keyframes shadow-anim {

0%,100% {transform: scale(1);-webkit-filter: blur(4px);filter: blur(4px);}

30% {transform: scale(1.6,1);-webkit-filter: blur(8px);filter: blur(8px);}

}

@keyframes shadow-anim {

0%,100% {transform: scale(1);-webkit-filter: blur(4px);filter: blur(4px);}

30% {transform: scale(1.6,1);-webkit-filter: blur(8px);filter: blur(8px);}

}

id=”svg8″　にキーフレームのアニメーションを設定して、動かしました。

キーフレームについてはこちらの記事でも記載があるのでご参考までに。

CSSでグリッチエフェクトを作ってみたよ

HTML、CSSでグリッチエフェクトを作った記録です。

書いたイラストが動いてうれしい・・・！！

文字のラインに沿ってアニメーションする

次はよく見る文字のラインアニメーションです。

こちらはちょっと躓きました・・・・( ；∀；)

inkscapeでかいてsvgファイルで保存する

まずはinkscapeでテキスト入力して書きます。

その後、テキストのオブジェクトを選択した状態で、パスメニュ⇒「オブジェクトをパスへ」をクリックします。

これでオブジェクトをパスにできました。

次に、バラバラのパスをまとめます。

左のノードツールをクリックして、Shift + クリックで文字のパスを全部選択（複数選択）した状態にします。

その状態で、パスメニュー⇒「パスの結合」をします。

次にパスにid名を設定します。（CSS操作を分かりやすくするため）

パスを選択した状態で、右クリックすると、「オブジェクトのプロパティ」がありますので、クリックします。

すると、右にID～と枠が出てきます。

ここで任意のID名を入力し、設定ボタンを押すと、パスにIDを設定できます。

※サンプルではpath_tとしました。

この状態で保存します。（svgファイル）

コードをHTMLに貼り付ける

さて、ボールと同じように、自分のエディタで先ほど保存したsvgファイルを開きます。

2行目の＜svg~からコピーして、HTMLのbody部分、表示させたい所に貼り付けます。

ブラウザで表示させると・・・・表示されました！

CSSでアウトラインをアニメーションする

CSS全体↓


.hello{/*表示のためにdivでくくってます*/
  width:1000px;
  margin:auto;
}
#path_t{/*ここでsvgの操作*/
  fill:none;
  stroke:#000;
  stroke-width:0.5;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: strokeAnimation 5s linear 0s infinite;
}
@keyframes strokeAnimation {
  0% { stroke-dashoffset: 500; }
  100% { stroke-dashoffset: 0; }
}

.hello{/*表示のためにdivでくくってます*/

width:1000px;

margin:auto;

}

#path_t{/*ここでsvgの操作*/

fill:none;

stroke:#000;

stroke-width:0.5;

stroke-dasharray: 500;

stroke-dashoffset: 500;

animation: strokeAnimation 5s linear 0s infinite;

}

@keyframes strokeAnimation {

0% { stroke-dashoffset: 500; }

100% { stroke-dashoffset: 0; }

}

ここでは、先ほどパスにidを設定したので、そのidを使用していきます。

#path_tと名前を付けたので、キーフレームでアニメーションを付けます。

今回参考にさせていただいた記事は、こちら↓

https://www.design-memo.com/coding/svg-stroke-animation

stroke-dasharrayプロパティとstroke-dashoffsetプロパティ(10,11行目）を使って、文字のアウトラインにアニメーションを付けます。

stroke-dasharrayプロパティとstroke-dashoffsetプロパティって？

stroke-dasharray・・・線のパターンや間隔の指定
stroke-dashoffset・・・線の開始位置を指定する

ここが躓いた（　＾ω＾）・・・よくわからなかった(;’∀’)

stroke-dasharray属性は、輪郭を描くために使用される、破線や間隔のある線のパターンを定義するプレゼンテーション属性です。
引用元：MDN web Docs https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke-dasharray

　これはなんとなくわかりますね。

stroke-dashoffset属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。
引用元：MDN web Docs https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke-dashoffset

これが難しかった。

stroke-dashoffsetは線の開始位置を指定できるのね。
もとのパスの位置から指定した数値分、位置が移動してる。
もとのパスの位置からズレた分は見えなくなってる！

分かりにくいのでサンプルはこちらです↓

点線（.lineクラス) は指定した数値で点線になっています。

点の開始位置（.line_d) で点線の間隔を300にしてみました。（これを基本として開始位置をずらしてみます。）

点の開始位置1（.line1クラス) は点線の間隔を広げて、点の開始位置を300ずらしてみました。右側にありますね。

点の開始位置2（.line2クラス) は、点の開始位置を100にずらしてみました。今度は左にあります。

点線を動かす（.line3クラス）を見ると、間隔を広げて、点の開始位置をずらし、アニメーションでstroke-dashoffsetの位置を指定しています。

すると、動いてるように見えますね・・・・！

これを先ほどの文字に当てはめてみます。

文字のアニメーションCSSにstroke-dasharray、stroke-dashoffsetをつける

文字のCSSに戻ります。


.hello{/*表示のためにdivでくくってます*/
  width:1000px;
  margin:auto;
}
#path_t{/*ここでsvgの操作*/
  fill:none;
  stroke:#000;
  stroke-width:0.5;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: strokeAnimation 5s linear 0s infinite;
}
@keyframes strokeAnimation {
  0% { stroke-dashoffset: 500; }
  100% { stroke-dashoffset: 0; }
}