無料ツール
日本語
SVGパターンの作成
SVGパターンの作成 — サイズや色を指定し、コードや結果を確認. 入力値は端末内で処理されます。 登録不要.
登録不要
ツールを読み込み中…
使い方
- 1値を入力して設定を選んでください。
- 2ツールを実行して結果を確認してください。
- 3結果をコピーするか入力を変えて比較してください。
使う前に
入力範囲と単位を確認してください。結果は入力条件とブラウザに基づきます。
広告配信で通信情報を処理する場合があります。パーソナライズはプライバシー選択に従います。 プライバシー（英語）
実際の入力と出力の例
実際のエンジンに以下の例を入力した結果です。個人の入力や保存作業は使いません。ツールの例読込で同じ入力を確認できます。
入力例
| 項目 | 値 |
|---|---|
| 方式 | ドット |
| 色 | #0F766E |
| 背景色 | #FFFFFF |
| パターン間隔 (px) | 24 |
| 線幅・点の半径 (px) | 2 |
結果例
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><defs><pattern id="p" width="24" height="24" patternUnits="userSpaceOnUse"><rect width="24" height="24" fill="#FFFFFF"/><circle cx="12" cy="12" r="2" fill="#0F766E"/></pattern></defs><rect width="400" height="400" fill="url(#p)"/></svg>
入力条件
以下は入力検証の許容範囲であり、すべての値が現実的・適切だと保証するものではありません。
- 方式: 選択可能な値: ドット / ストライプ / 格子
- パターン間隔 (px): 許容範囲: 4 ≤ x ≤ 200
- 線幅・点の半径 (px): 許容範囲: 0.1 ≤ x ≤ 20