背景パターン生成
Background Pattern Generator
ストライプ・ドット・格子・ノイズなど、継ぎ目のないSVGパターンを色と大きさを決めて作ります。
継ぎ目のない背景パターンを描きます。ドット、格子、ストライプ、市松、十字、三角、波です。CSSのデータURI、SVGファイル、既存の文書に貼る`<pattern>`の断片として返します。回転は`patternTransform`として適用するので、タイルは自分の縁で割れずに継ぎ目のないまま保たれます。
模様
いちばん静かな模様です。点がタイルの 5 分の 1 を超えると、模様ではなく質感として読まれます。
出力
URL エンコードした URI で 450バイト、Base64 では 526バイトです。
Base64 ではなく URL エンコードです。ここでは 14% 小さく、スタイルシートの中でも読めます。どの SVG でも同じことをするなら SVG データ URI エンコーダーがあります。
使い方
形を選びます
それぞれ何のためのものかを書いてあります。ドットがいちばん静かで、格子は図の背後では読みやすく文章の背後では気が散り、斜めのストライプは誰もが「作業中」と分かる塗りです。
タイルの大きさと太さを決めます
太さはピクセル値ではなくタイルに対する割合なので、タイルの大きさを変えてもパターンの性格が保たれます。5分の1あたりを超えると、形はパターンではなくテクスチャとして読まれ始めます。
コントラストは低く保ちます
背景の出来を決めるのはここです。目に見えるパターンは、たいていすでに強すぎます。対比する色ではなく、背景から1段か2段ずらした色を選び、出す前に実際の文章の背後で確かめてください。
CSSか、ファイルか、断片を取ります
CSSはURLエンコードしたデータURIで、`background-image`にそのまま使えます。SVGファイルはURIでは間に合わない場所のためのものです。`<pattern>`の断片は既存の`<svg>`の中に置き、`fill="url(#p)"`で参照します。
よくある質問
継ぎ目なく並びますか。
並びます。そしてそこが幾何の働いている部分です。斜めのストライプは、対角線がタイルの縁を越えて続くように3つの回り込んだ複製として描いていますし、波は継ぎ目で傾きをそろえた2つの3次曲線です。回転が`patternTransform`を通るのも同じ理由で、タイルの中の座標を回してしまうと境界に切れた端が残ります。
PNGで書き出せますか。
ここではできません。出力は3通りの包み方をしたSVGで、解像度に依存せず、大きさもごく一部で済みます。ドットのパターンはデータURIなら数百バイト、PNGのタイルなら数キロバイトになります。ラスターがどうしても必要なら、SVGをダウンロードしてラスタライズしてください。
背景パターンは性能に響きますか。
めったに響きませんが、実在する場合はあります。とても小さなタイルをとても広い面積に敷くと、コンポジタがそれを非常に多くの回数繰り返すことになり、非力なスマートフォンではスクロールに出ます。パターンを置いたページが重く感じるなら、見た目の密度は同じまま、タイルを大きくしてみてください。
パターンを画像の上のテクスチャとして使えますか。
使えます。背景を透明にすると、タイルには前景の形だけが載るので、後ろにあるものが透けます。写真の上にもう1枚の`background-image`の層として重ねてください。
ここから渡せます
CSSグラデーション作成
CSS Gradient Builder
停止点をドラッグして線形・円形・扇形のグラデーションを作り、sRGBまたはOKLCHのCSSを出力します。
OGP画像作成
Social Card Generator
タイトル・サブタイトル・ブランド名とロゴをテンプレートに載せて1200×630の共有画像を作り、一緒に入れるメタタグも書き出します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
次の一手
このツールが出したものをそのまま受け取れる道具です。
CSSグラデーション作成
CSS Gradient Builder
停止点をドラッグして線形・円形・扇形のグラデーションを作り、sRGBまたはOKLCHのCSSを出力します。
OGP画像作成
Social Card Generator
タイトル・サブタイトル・ブランド名とロゴをテンプレートに載せて1200×630の共有画像を作り、一緒に入れるメタタグも書き出します。
SVGをCSSデータURIに
SVG to CSS Data URI
SVGをCSS背景用のデータURIに符号化し、必要な文字だけをエスケープして短く保ちます。
SVG最適化
SVG Optimiser
編集ソフトの残骸を取り除き、変換をまとめ、座標の桁を丸めて、描画結果を並べて比べます。
カラーコード変換
Colour Format Converter
HEX・RGB・HSL・HWB・LAB・LCH・OKLCHのあいだで色を変換し、いちばん近い色名も示します。
カラーピッカー
Colour Picker
OKLCHの色域から、画面のスポイトで、またはアップロードした画像から色を選び、好きな表記でコピーします。