円形バッジ
円周に沿った文字で、シールやロゴの外周を作る。
SVG TYPE / CURVED TEXT
SVG Text Path Studio.
文字を円・アーチ・波形に沿わせる。カーブや文字間隔を調整して、SVGを保存。
LIVE TEXT PATH
パスに沿って文字を配置する
100文字まで。日本語も入力できます。
CIRCULAR BADGE
PATH LENGTH—
TEXT LENGTH—
START OFFSET—
MOTION
静止画と動きを比較する
初期表示は静止画です。
PALETTE
配色
アクセントは使用例の図形に適用します。透明にした背景の市松模様は、保存SVGには含みません。
THREE WAYS TO USE IT
バッジ・見出し・バナーに使う
アーチ見出し
カーブした文字を、イラストの上に組み合わせる。
波形テキスト
波に沿う文字で、バナーやヒーローを飾る。
USE IN YOUR PROJECT
表示中の設定でSVGを保存する
曲線に沿う文字を、
SVGで持ち帰る。
静止画のSVGを保存します。
フォントは埋め込みません。別の端末では字形や文字の長さが変わる場合があります。同じ見た目が必要な納品では、使うフォントをそろえるか、デザインツールでアウトライン化してください。
曲線上の配置はSVGのtextPath、動きはSVGのanimate／animateTransformで実装します。JavaScriptはこのツールの設定・再生操作・保存に使います。
動くSVGでも、OSの「動きを減らす」設定では静止画を表示します。重要な文章は、SVGとは別にHTMLでも読めるようにしてください。
CURRENT SETTINGS
HOW IT WORKS
パスと文字を分けて定義する
<path id="curve">文字の通り道を作る
円弧やベジェ曲線をpathで定義します。defs内に置けば、パスそのものは表示されません。
<textPath href="#curve">文字をパスに沿わせる
文字は画像化せず、SVGのテキストとして配置します。書体・サイズ・文字間隔も指定できます。
startOffset + text-anchor位置と合わせる部分を決める
パス上の位置と、文字列の先頭・中央・末尾のどれを合わせるかを指定します。パスの外へ出た文字は表示されません。