CSS 그리드 및 SVG 필터를 사용한 아트

그리드 자동 흐름의 강력한 기능인 밀도를 탐색해 본 적이 있습니까? 무작위로 생성된 값(설정된 범위 내로 제한됨)과 결합하면 그리드-열 및 그리드-행 속성을 사용하여 멋진 그리드 기반 아트를 만들 수 있습니다. 뛰어들어 보세요!

먼저 기본 그리드 구조를 만들어 보겠습니다.

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

• 디스플레이: 그리드: 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: 촘촘합니다!

감사합니다.

더 동적으로 만들기 위해 회전 및 크기 조정과 같은 변환을 추가해 보겠습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!