今回の仕上がりは、こんな感じ
公式画面の「プラス - 1」から保存したSVGです。書き出されたファイルは20px四方・209バイトでした。下の作例では60px四方に拡大して繰り返し、文字の下に濃いパネルを置いています。模様以外の文章と配置は編集部が作りました。
実際の背景の使用例を開く ↗ · SVGとライセンスをまとめて保存 · ライセンスと表記を読む
最終ファイルの背景色は#0b1623、線色は#28766bです。入力した色は内部の色変換でわずかに変わる場合があり、作例には保存ファイルの色を使いました。
色を変えてSVGを保存する
1. 模様を選ぶ
公式サイトの一覧で「プラス - 1」を選びます。この手順の模様をすぐ開くなら、プラス - 1の編集画面へ進んでください。広告が表示された場合は、公式の編集画面へ戻ります。広告内のダウンロードは押しません。
2. 色を入力して、Enterで確定する
「色」の濃い四角を押し、入力欄へ#0b1623ffを入れてEnterを押します。もう一つの四角では#28756bffを同じ手順で確定します。末尾のffは不透明の指定です。今回は入力だけでは色が反映されず、Enterで確定するとプレビューが変わりました。
3. 見え方を調整する
「ズーム」を3にすると、画面のプラス同士の間隔が広がりました。ストロークは1、水平・垂直間隔と角度は0のままです。この画面のズームは保存されるSVGの寸法と同じではありません。今回のSVGは20px四方のタイルだったため、表示側のCSSで60px四方に指定しました。
4. 「ダウンロード」のSVGを保存する
「コピー」のSVGと「ダウンロード」のSVGは別のボタンです。ファイルを残すときは後者を選びます。編集部では公式ボタンを選択してEnterで保存し、Downloadsにできたpattern.svg系のファイルを確認しました。幅1200・高さ720も入力しましたが、SVGは20px四方でした。PNG保存の結果は今回は検証していません。
文字を重ねるときの工夫
模様を文字のすぐ後ろまで敷くと、細い文字が読みにくくなることがあります。作例では文字の範囲だけ濃紺のパネルを重ねました。模様は余白で見せ、見出しと説明は読める状態を保ちます。
.banner {
background: #0b1623 url("./plus-tile.svg") repeat;
background-size: 60px 60px;
}
.panel { background: #0b1623f2; }小さなタイル一枚で広い背景を作れた点は便利でした。ただし、柄の密度や配色次第で見やすさは変わります。名刺や印刷への利用、他の模様の書き出し結果は今回の確認対象ではありません。
利用条件と確認範囲
公式サイトと開発リポジトリはMITライセンスを案内しています。使用・変更・配布・商用利用が許可されていますが、コピーや実質的な部分には著作権表示と許諾文を残す条件があります。掲載ファイルと同じ場所にLICENSE.txtを置き、作者名と出典も記しました。再配布する際も一緒に保存してください。
2026年10月4日、PCのサイドブラウザで模様の選択、色・ズームの変更、SVG保存、保存したSVGを使った背景を確認しました。この操作では登録や支払いは不要でした。別のProプラン、API・MCP、PNG、印刷品質、実機スマホでの公式ツール操作は未確認です。
Xでは紹介投稿と、その返信にある公式リンクを確認しました。作者の投稿ではないため、制作背景の根拠にはしていません。反響の規模を裏付ける情報も揃っておらず、「バズっている」とは記していません。