はてなブックマーク

ウェブサイトのデザイン演出にSVGアニメーションを入れたいなというときに、とっても便利なジェネレーターをご紹介。 https://svgartista.net/上記のサイトにアクセスしてSVG画像を読み込ませてパラメーターを設定すると、必要なコードを生成してくれるので後はそれを自身のウェブサイトに組み込むだけ。 UIのデザインもシンプルで分かりやすくていいですね。 では、簡単にやり方を解説します。 まずはアニメーションさせるSVG画像を作成します。 今回は線（stroke）がなぞるように描画され、その後に塗り（fill）が付くアニメーションにしたいので、イラストレーターでsezaki-designのロゴに線と塗りを付けました。 プレビュー画面で動作確認できるので便利！作成したロゴをSVG Artistaに読み込み、左のツールバーでパラメーターを設定。 CSSプロパティの種類は「transi