ノイズテクスチャジェネレーター
密度・不透明度・色を調整できる粒状テクスチャを生成し、ダウンロードするかCSSとしてコピーできます。
仕組み
選択したタイルサイズのキャンバスがピクセル単位で塗りつぶされます。各ピクセルは、密度スライダーに 対して独立に判定され、粒子を持つかどうかが決まり、その粒子の色のアルファ値は不透明度スライダーで スケーリングされます。モノクロモードでは全体に1色の粒子を使い、これをオフにすると各粒子の明るさも ランダム化され、よりテクスチャの効いた不均一な見た目になります。下のタイル状プレビューは、同じ キャンバスをCSS背景として繰り返し表示し、拡大したときの見え方を確認できます。
ダウンロードされるPNGと「CSSとしてコピー」のdata URIは、どちらもこのキャンバスから
toDataURL/toBlobを使って直接、ブラウザ内で生成されます。
アップロードは一切行われません。
よくある質問
ダウンロードしたPNGは継ぎ目なくタイル状に並びますか?
繰り返しパターンではなくピクセル単位のランダムノイズなので、小さく繰り返すbackground-imageとして使っても目に見える継ぎ目はできません。すべてのピクセルが独立してランダムであり、タイルの端で崩れるような大きな構造がないためです。
PNGダウンロードとCSSコピーの違いは何ですか?
ダウンロードでは、スタイルシートや<img>から参照できる実際の.pngファイルが得られます。「CSSとしてコピー」は代わりに同じ画像をbase64のdata URIとしてbackground-imageルールの中に直接埋め込みます。別途ホストするファイルなしで自己完結したCSSブロックにしたい場合に便利です。
これはどこかに送信されますか?
いいえ。テクスチャはブラウザ内のメモリ上のキャンバスでピクセル単位で生成されます。アップロードは一切行われません。