CATEGORY

OTHER

画面ダークモード切り替えはブラウザ・OSの設定に依存します。

SVG-アニメーション

2022.1.12

  • プログラミング
  • WEBデザインでSVGでアニメーションを作る!

    目次

    今回はWEBデザインでより表現を増やすことに繋がるSVGアニメーションのやり方をご紹介します。

    SVGとは

    画像の拡張子です。.svgという感じ。
    Adobeのillustratorなどを使えば、保存形式で選ぶことができます。

    このSVGはHTMLやCSSとも相性が良く、動きのあるデザインを作る時にも使えます。

    SVGアニメーション

    詳しくはこちらの動画を見ていただけますと使い方はわかりやすいかと存じます。

    文面でも簡単にお伝えします。

    まずillustratorで図形を作ります。
    ※必ずパスだけ(塗りつぶし無し)にしてくださいね!

    そして、その図形をコピーしてテキストエディタに貼り付けるだけでOK
    ↑これは感動しました。こんな簡単にいくなんて!

    あとは、id名を変更してCSSで指示をしていくだけ。
    CSSのanimationを使うと、線が1から引かれていく動きも簡単に作れます!

    このSVGを利用すれば、手書き風のイラストや文字をおしゃれに登場させれたりもするので良いですよ!

    では今回はこの辺で!

    関連記事

    canvasで点と点を線で繋ぐ

    canvasタグで点と点を繋ぐ線を描く

    2021.12.1

    Javascriptでオリジナルテーマに記事内目次を表示しよう!

    2022.4.29

    appendChild

    appendChildで生成した要素を複数箇所に挿入する方法

    2021.10.24

    Visual-Studio-Code-サムネイル

    WEBコーティングにおススメコードエディタ Visual Studio Code

    2021.9.22