アニメーションテキスト生成Stroke Text SVG Generator
テキストから線描アニメSVGと実装用CSSを生成。Stroke text animations with SVG and copy-ready CSS.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
プレビュー Preview
SVG
CSS CSS
実装例（HTML + CSS） Implementation example (HTML + CSS)
使い方・ユースケース How to Use & Use Cases
英数字やひらがな・カタカナ・漢字を入力すると、線描アニメーションのプレビューが表示されます。英字フォント（14種：UI向け2種＋Hershey系12種）・文字の色・文字の太さ・字間を調整できます（太さ・字間の右側には px 換算の数値が表示されます）。配置サイズの幅・高さで出力枠を決めると、文字サイズは枠に合わせて自動調整されます。装飾では下線やきらり（右上）を付けられます。描画時間・遅延再生・再生方法（順番に描く／同時／スクロールで表示時）も設定できます。例ボタンでサンプル文字を試せます。 Enter ASCII or Japanese text to preview a stroke-draw animation. Choose from 14 Latin faces (2 UI-oriented + 12 Hershey), text color, stroke weight, and letter spacing (px values appear to the right of each slider). Set placement width and height—the text size auto-fits that frame. Under Decorations, add an underline or sparkle (top-right). Configure animation duration, delayed play, and playback (one by one, simultaneous, or on scroll into view). Use the sample buttons to try example text.
プレビューでは点線の枠が配置サイズです。枠より文字が大きい場合は、プレビュー領域に収まるよう縮小表示され、縮小率が表示されることがあります。「再生」で何度でも確認できます。スマホでは設定を触ると画面下にプレビューが開きます。SVG のダウンロード・コピーに加え、サイトに貼れる CSS と HTML 実装例もコピーできます。 The dashed outline in the preview is your placement size. If content is larger than the preview area, it may be scaled down with a percentage shown. Tap Replay to test again. On phones, adjusting settings opens a preview sheet at the bottom. Download or copy the SVG, then copy ready-to-use CSS and an HTML example for your site.
英字と日本語を1行に混ぜる（例：Webツールプラットフォーム）ことはできますが、英字は選んだフォント・日本語は KanjiVG の別スタイルで描かれるため、見た目がそろいにくく不自然に見えることがあります。ロゴやキャッチコピーでは英字のみ・日本語のみのどちらかに分けるか、サイト上で別要素に分けて表示するのがおすすめです。 You can mix Latin and Japanese in one line (e.g. Webツールプラットフォーム), but Latin uses your chosen face while Japanese uses KanjiVG’s separate schoolbook-like strokes, so the styles often clash. For logos or taglines, stick to all-Latin or all-Japanese text, or split them into separate elements on your page.
よくある質問FAQ
どんな文字が使えますか？What characters are supported?
英大文字・小文字・数字・スペースと主要記号（ASCII 印字可能文字）、およびひらがな・カタカナ・常用漢字など KanjiVG が配布する日本語文字です。絵文字や未収録の記号は使えません。入力は最大 80 文字です。Printable ASCII plus Japanese kana and kanji covered by KanjiVG. Emoji and unsupported symbols are not available. Up to 80 characters.
日本語のフォントは選べますか？Can I pick a Japanese font?
現状は選べません。日本語は KanjiVG の書き順用線データ（教科書体に近い 1 種類）を使っており、明朝・ゴシックのような複数書体のデータセットが公開されていないためです。文字の色・太さ・字間・配置サイズは英字と共通で調整できます。Not currently. Japanese uses KanjiVG stroke-order paths (one schoolbook-like style). There is no open dataset of multiple Japanese stroke typefaces like Hershey for Latin. Text color, stroke weight, letter spacing, and placement size still apply.
英字と日本語を混ぜると見た目がおかしくなるのはなぜ？Why does mixed English and Japanese look odd?
英数字・記号は選んだ英字フォント（Hershey や UI 向け）の線で描かれ、ひらがな・カタカナ・漢字は KanjiVG の書き順データ（教科書体に近い 1 種類）で描かれるためです。書体・線の質感・太さの印象が別々なので、「Webツールプラットフォーム」のように英語と日本語を1行に混ぜるとそろって見えにくくなります。英字だけ・日本語だけにするか、サイトでは英語用と日本語用の SVG を分けて並べる方法をおすすめします。ASCII uses your selected Latin stroke face (Hershey or UI fonts), while kana and kanji use KanjiVG schoolbook-style stroke data. The line style and weight feel different, so a single line like Webツールプラットフォーム often looks mismatched. Prefer all-Latin or all-Japanese text, or place separate SVGs for each language on your site.
英字フォントは何種類ありますか？How many Latin fonts are there?
計 14 種です。UI 向け 2 種（UI スイス・UI 可読性 — システムフォントに近い線描）と、Hershey 系 12 種（スタンダード、筆記体、装飾、斜体、ゴシック英語など）を選べます。英数字・記号のみ対象で、ひらがな・カタカナ・漢字は英字フォントの影響を受けません。14 total: 2 UI-oriented faces (UI Swiss and UI Readability—stroke styles close to system UI type) plus 12 Hershey faces (standard, script, decorative, italic, Gothic English, and more). They apply to ASCII letters and symbols only; Japanese kana and kanji are unaffected.
「プレーン」で小文字が大文字に見えるのはなぜ？Why does Plain show lowercase as capitals?
Hershey のプレーン（Plain）は元データが大文字専用の書体で、小文字のグリフがなく大文字と同じ形を使います。小文字もそのまま描きたい場合はスタンダード（simplex）など別の書体を選んでください。Hershey Plain is uppercase-only in the source data—lowercase letters reuse the capital glyphs. Use Standard (simplex) or another face if you need distinct lowercase shapes.
「配置サイズ」とは何ですか？What is placement size?
出力 SVG の幅・高さ（px）を決める設定です。幅・高さのスライダーを動かすと、テキスト・フォント・字間などが変わっていない場合でも文字サイズが枠に合わせて自動で変わります。プレビューの点線がこの枠です。ダウンロードする SVG もこのサイズに引き伸ばして出力されます。It sets the output SVG width and height in px. Moving the W/H sliders auto-scales the text to fit the frame—even if the text itself did not change. The dashed outline in the preview shows this box. The downloaded SVG is exported at this size.
「文字の太さ」を変えても文字サイズが変わらないのはなぜ？Why does stroke weight not change text size?
文字サイズは配置サイズ（幅・高さ）とテキスト内容などから自動計算されます。太さスライダーは線の太さだけを変え、文字の大きさは維持します。右側の px 数値は、現在の文字サイズに合わせた実際の線幅です。Text size is auto-calculated from placement size and your text. The stroke-weight slider only changes line thickness, not glyph size. The px value on the right is the effective stroke width at the current scale.
ロゴ向けに調整するには？How do I tune it for a logo?
配置サイズで横幅・高さを先に決め、文字の太さは 8 以上（最大 20）、字間は 0 以下（最大 −8）を試してください。色や装飾（下線・きらり）もプレビューを見ながら調整できます。Set placement width and height first, then try stroke width 8 or higher (max 20) and letter spacing 0 or below (down to −8). Adjust color and decorations (underline, sparkle) while watching the preview.
「描画時間」と「遅延再生」とは？What are animation duration and delayed play?
「描画時間」はアニメ全体の長さ（0.5〜6 秒）です。「順番に描く」を選んだときは、線の本数に応じて 1 本あたりの秒数が自動で割り当てられます。「遅延再生」は再生開始前の待ち時間（0〜0.5 秒）です。"Animation duration" is the total length (0.5–6 s). In "One by one" mode, per-stroke timing is auto-calculated from the stroke count. "Delayed play" is the wait before playback starts (0–0.5 s).
「スクロールで表示時」とは？What does "On scroll into view" mean?
ページをスクロールして SVG が画面内に入ったタイミングでアニメーションを始める再生方法です。実装例をコピーすると、表示を検知する JS も含まれます。Playback starts when the SVG scrolls into the viewport. The copied HTML example includes JavaScript that watches for visibility.
CSS はどう使いますか？How do I use the CSS?
「CSSをコピー」でアニメーション用スタイルを取得し、プレビューと同じ CSS クラス名で SVG を包んだ HTML に貼り付けます。「実装例をコピー」なら HTML + CSS が一式で得られます。描画時間・遅延再生・再生方法はプレビューで設定した内容が反映されます。"Copy CSS" gives animation styles—wrap your SVG with the same CSS class name shown in the preview. "Copy example" provides a full HTML + CSS snippet. Duration, delay, and playback mode match your preview settings.
データはサーバーに送られますか？Is data sent to a server?
いいえ。フォント・KanjiVG データの読み込みと SVG/CSS 生成はすべてブラウザ内で完結します。No. Font loading, KanjiVG fetch, and SVG/CSS generation run entirely in your browser.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
