私のGithubプロフィールをスパイスにするためにSVGアニメーションを学ぶこと

TLDR: I created an animated SVG for my GitHub profile, check it out here.

そのため、すべてのGithubは、あなたがしてきたすべての素晴らしい仕事をショーケースにあなたのプロフィールにREADMEを追加する機能をリリースして始めた/行っている.そして、見て、人々はそれが彼らのプロフィールにGIFを加えるのに用いられることができるとわかりました.🥳
しかし、私は似ていました、GIFは2010年で、SVGSは新しいです💩. つだけ問題は、私はSVGSについてのことを知らない.私は、私がアイコンと若干のイラストのためにそれを使ったはいを意味します.時にはいくつかのユーティリティから1つを生成し、ページにスナップします.しかし、私はゼロから1つを作成し、それにアニメーションを追加する方法には、決してしたことがない.
何もしないで、私はgooglingを開始し、MDNは精巧なことを見つけることに驚いたdocumentation SVG要素については、それは非常に基本的な図形を追加する簡単です.タグがありますrect , circle , polygon , line , and polyline , などは単にそれをアニメーション化するCSSを書く.
きちんと!👍
だから今、私は画面上のロゴを移動することができますブーマーは何時間もそれを見ている!💪

しかし、私は消化します.戻ってSVGをアニメーション化する.上記の形は、創造的な人が本当にクールなイラストを思い付くのに十分以上であるかもしれません.しかし、私の創造性はかなり制限されているので、私は移動波を行うことを決めた.そして、私の創造性不足を補うために、別のタグをpath , これは私がこの波を作成するのに役立ちます.🌊

考え🤓

その考えは簡単だった.複数の移動波を作成し、それぞれ異なる速度で、それらを少し透視します.透明性は、波が交差し、したがって、色の複数の色合いがあるようにエリアを暗くする.
バナーの大きさについては、アスペクト比が好きなので、1440×320に落ち着いた.それはあまり大きくないが、文脈を加えるのに十分大きいです.Githubが小さなエリアに現れたとしても、他のものには十分なスペースが残っていることを確認することができます.

<パス/>

そこで、パスの作成方法を学びました.これはとても簡単でした.パスタグはd 属性.得るのは難しくなかった😉. コマンドの6種類があります.

移動

ライントゥ

キュービック曲線

二次曲線

楕円アーク曲線

パスを閉じる

我々は最初の3つを学ぶ必要があります.各コマンドには、文字の後に続く属性
点(x - y座標).

movetoコマンドは文字で示されますM or m ポイントが続きます.だからM10,10 現在の位置をポイントに移動します10,10 .

同様に、linetoには3つのコマンドがあります.L or l 現在の位置から指定した点までの行を作成します.例えば、L10,10 現在の位置から10,10 . H or h 指定したX座標に水平線を作成します.そして最後にV or v 与えられたy座標に垂直線を作成します.
キュービックBのZier曲線は少し複雑です.文字で表すC or c 3点を引数として取る.

したがって、現在位置は開始点です.現在の位置からx1 y1 ポイントは、開始位置で曲線への接線を定義します.からのラインx2 y2 to x3 y3 終了位置で接線を定義します.And x3 y3 が終点です.キュービックBのZier曲線についてもっと知るためにblog post 私は短いが、記述を見つける.参照することもできますMDN Tutorial on the SVG path もっと学ぶ.
我々が今学んだものを固めるために、以下のSVGを解読させてください.

<svg
  viewbox="0 0 100 100"
  width="100" height="100" 
  xmlns="http://www.w3.org/2000/svg">
  <path
    d="M10,10 V50 C10,90,90,90,90,50 V10 H10 V50"
  />
</svg>

上のコードは以下のSVGになります.明確にするために、私はイメージのまわりに緑の境界線を置きました.

我々のパスは0,0 最初のコマンドM10,10 我々のポイントを動かす10,10 . 次に2番目のコマンドV50 垂直パスを作成する10,50 . 次C10,90,90,90,90,50 カーブを作成する10,90 and 90,90 我々の参照点と90,50 が終点です.Then V10 パスを作成する90,10 . 次はH10 パスを作成する10,10 そしてついにV50 パスを閉じ、我々は最終的なイメージを得る.単純な権利?👌

実装✍️

私はイメージを4つの象限に分割して、それから第2と第3象限のカーブを持つように計画しました.それから、私はわずかにカーブを湿らせるために内側の接線を動かすことができます.最後に、行を使ってパスを閉じました.私は中心点をわずかに異なっているカーブを持つためにわずかに動かしました.しかし、垂直軸で接線が作る角度が同じであることを確認してください.これは、私がそれをアニメーション化するとき、カーブが連続的に見えることを確実とします.最後に、以下の通り道を終えました.

<path d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0" />

上記のパスを理解するのに苦労しているなら、上記のイメージの最後のセクションを見てください.私は色がより明確にするためにパスの各部分をコーディングしている.また、ポイントの理解を得るために、上記のセクションと比較することができます.あなたが今まで私に従うことができたならば、我々はすでに困難な海を通って航海しました.😁

< defs >>と< use >>

しかし、我々は今ちょうど上記のパスを貼り付けることができますし、わずかなバリエーションで他の波を作成し、それを一日呼び出す.紹介したいdefs and use タグは、我々ははるかに読みやすい方法でこれらすべてを行うのに役立ちます.defs のようなグラフィカルな要素を格納するために使用することができますpath を使って、後でuse タグ.
私たちがする必要があるのはid 我々にpath そして、それを中に入れてくださいdefs タグを使用してhref 属性use 下記のタグ.

<svg
  viewbox="0 0 1440 320"
  width="1440" height="320" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path
      id='sineWave'
      d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0"
    />
  </defs>
  <use href="#sineWave" />
</svg>

たった今、黒い波は、描かれています.それを修正するにはfill and fill-opacity 属性path . したがって、更新された経路は以下のようになります.

<path
  fill="#0099ff" fill-opacity="0.2"
  id='sineWave'
  d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0"
/>

アニメーション🤤

あなたが既にCSSアニメーションに精通しているならば、このセクションはあなたのためにCakewalkです.だから、アイデアは非常に簡単です.2つの波(我々が上で作成した)を水平に積み重ねて、そして、単に0から100 %まで彼らを翻訳してください.リンスとリピート.以下のようなもの.

ここで、ブラックボックスはユーザのビューポートを表します.
これを達成するためにuse タグつきでx 属性セット-100% . 適用wave 両方へのクラスuse タグ.そして、我々がXからXを翻訳するアニメーションをつくってください0% to 100% そしてこの動画を我々に適用wave クラス.

<svg
  viewbox="0 0 1440 320"
  width="1440" height="320" 
  xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      .wave {
        animation: wave 8s linear infinite;
      }
      @keyframes wave {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(100%);
        }
      }
    </style>
    <path
      fill="#0099ff" fill-opacity="0.2"
      id='sineWave'
      d="M0,160 C320,300,420,300,740,160 C1060,20,1120,20,1440,160 V0 H0"
    />
  </defs>
  <use class="wave" href="#sineWave"/>
  <use class="wave" x="-100%" href="#sineWave"/>
</svg>

最後に、私は2つのより類似した波を加えましたscaleY CSSプロパティには、異なる振幅の波があります.あなたは最終的なSVGをチェックアウトすることができますCodePen .

ボーナスチップ🤗

私もバナーにいくつかのテキストを追加しました.SVGがGoogleフォントをサポートしているのでcontent security policy Githubのフォントを外部からダウンロードすることはできません.こうして私はthis utility 私の最後のSVGでコピーした私のためのSVGパスを作成する.それをチェックしてくださいGitHub Profile .

結論👨‍💻

私は、SVGアニメーションの表面をかすかにひっかきましたが、私が考えるクールなものを作ることができました.それをするより良い方法がありましたか?他におもしろいことがありますか.私が下にコメントしたり、つぶやきを送信して知らせてください.
更新
見せてくれSVG Path Visualizer 変更パスを視覚化するのにとても便利です.
また、我々は簡単に使用することができますdefs and use タグ.テストするために、私は微調整したthis codepen 例と彼のチェックアウトすることができます彼のためのバナーを作成GitHub profile .