CSS グリッドと SVG フィルターを使用したアート

グリッド自動フロー: 密度の威力を調べたことがありますか?ランダムに生成された値 (設定範囲内に制限) を組み合わせると、グリッド列プロパティとグリッド行プロパティを使用して、クールなグリッドベースのアートを作成できます。飛び込んでみましょう!

まず、基本的なグリッド構造を作成しましょう:

main {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill,
 minmax(var(--w, 4cqi), 1fr));
}

• display:grid: CSS グリッド レイアウトを確立します。
• Grid-auto-flow: Density: アイテムの位置を変更して、空のスペースを最小限に抑え、グリッド内のギャップを自動的に埋めます。
• Grid-template-columns: レスポンシブな列レイアウトを定義します。ここでは、利用可能なスペースを埋めるために列が自動的に作成され (オートフィル)、各列の最小幅は --w (デフォルトは 4cqi)、最大幅は 1fr です。

この時点では、--w は未定義であるため、デフォルト値 (4cqi) が使用されます。最初のグリッドは次のようになります:

次に、グリッドを多数の ノードで埋めます。これらを JavaScript でレンダリングするときに、ノードごとに 2 つの変数を追加します。

• --gc: スパンする列の数。
• --gr: スパンする行数。

JavaScript でランダムな値を生成する方法は次のとおりです:

const random = (min, max) => 
  Math.random() * (max - min) + min

const column = () => 
`--gc:${Math.floor(random(0, 4))};`

const row = () => 
`--gr:${Math.floor(random(0, 3))};`

CSS では、次のカスタム プロパティを適用します。

b {
  background: oklch(var(--l) var(--c) var(--h) / var(--a));
  grid-column: span var(--gc);
  grid-row: span var(--gr, 1);
}

小さなヘルパー メソッドを使用して、oklch にランダムな色を追加してみましょう:

const color = () => `--l:${
  random(0, 100)}%;--c:${
  random(0, 0.5)};--h:${
  random(0, 60)};--a:${
  random(0.2, 1)};`

これで次のことが得られます:

ありがとう、grid-auto-flow:density!

物事をより動的にするために、回転やスケーリングなどの変換を追加しましょう:

b {
  rotate: var(--r);
  scale: var(--s);
}

JavaScript では、ランダムな変換値を生成します。

const transform = () => 
`--r:${random(-2, 3)}deg;
--s:${random(0.8, 1.2)};`

チェックしてみましょう:

ファンシー！ここで、さらにレベルを上げるために、クールな SVG フィルターを追加しましょう。

JavaScript では、 ノードごとにランダムなフィルターを選択する別の小さなヘルパー メソッドを追加します。

const filter = () =>
  `--url:url(#${
    [
      "pencilTexture",
      "pencilTexture2",
      "pencilTexture3",
      "pencilTexture4",
    ][Math.floor(random(0, 4))]
  });`





これにより次のことがわかります:



ここで、--w プロパティと要素の数を調整するだけで、大きく異なるアートワークを生成できます。



または:



カラーメソッドで開始値と終了値を調整することもできます:





  
  
  デモ


これは Codepen のデモです。アートワークの下にコントロールを追加したので、プロパティを簡単に調整できます:





          

            
        
以上がCSS グリッドと SVG フィルターを使用したアートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。