SVGテキストアニメーションジェネレーター

SVGテキストアニメーションジェネレーターとは#

SVGテキストアニメーションジェネレーターは、短い一行のテキストを動きのある見出しに変えるツールです。輪郭を描く動きやグラデーションの表示など、4種類のプリセットから選び、色・線・フォント・タイミングをページに合わせて調整します。作られる画像はSVGなので、拡大しても崩れません。

できたコードは、ページやプロジェクトに貼るか、ファイルとしてダウンロードできます。

作業中は、プレビューの「はじめから再生」「一時停止」「リセット」で動きを確認できます。「プレビューを固定」を使うと設定中も表示されたままになります。

輪郭描画：輪郭を描いてから塗りを出す、印象的な見出し向けの動きです。
輪郭から塗りつぶし：同じ輪郭をなぞってから消し、塗りだけを残します。落ち着いた変化です。
発光：輪郭を描きながら光を強め、最後は淡い塗りに落ち着きます。暗い背景に合います。
グラデーション表示：2色のグラデーションで輪郭と塗りを描きます。開始色・終了色はこのプリセットでのみ表示され、選択中は塗りと線の色の代わりに使われます。
見出しの文字：1行のみ。改行は取り除かれます。
フォント：既定はシステムフォントで、ほかに用意されたフォントから選べます。
文字サイズ・太さ：サイズはpx単位、太さも選べます。
色：塗り・線・背景を設定します。背景はプレビューとスニペットの両方に反映されます。
線の太さ：輪郭の太さをpx単位で指定します。
再生時間・遅延・イージング・繰り返し：1回の長さ、開始前の待ち時間、加速のしかた、再生回数を決めます。
出力形式：SVGは1つの要素にまとまり、HTML + CSSはスタイルとマークアップを分離し、Reactはコンポーネントになります。