CSS 패턴 배경 생성기

대부분의 "패턴 생성기" 도구는 모든 옵션에 대해 동일한 반복 선형 그라데이션 공식을 조용히 재사용하고 숫자만 변경합니다. 이것은 그렇지 않습니다. 여기에 있는 6가지 패턴 유형 각각은 실제로 해당 모양을 생성하는 특정 CSS 기술로 구축되었습니다. 줄무늬는 두 개의 색상 밴드가 있는 단일 반복 선형 그라데이션을 사용합니다. 도트는 직사각형 그리드에 원형 점을 깔끔하게 타일링할 수 없는 반복 방사형 그라데이션 대신 배경 크기(고전적인 CSS 점 트릭)를 통해 순전히 타일링된 하나의 방사형 그라데이션을 사용합니다. 체커보드는 실제 4사분면 원추형 그라데이션 공식을 사용합니다. 정사각형 타일의 중심에 있는 원추형 그라데이션은 자연스럽게 90도 경계에서 4개의 사분면 정사각형으로 분할되고, 해당 사분면 타일에 걸쳐 두 가지 색상을 번갈아 가며 근사치가 아닌 실제 체커보드로 만듭니다.

그리드와 대각선 크로스해칭은 모두 경계 트릭을 사용하여 두 번째 방향을 속이는 대신 별도의 배경 이미지 항목으로 두 개의 반복 선형 그라데이션을 레이어합니다. 그리드는 선명한 수평 및 수직 규칙선을 위해 "오른쪽으로"와 "아래로" 반복 그라데이션을 결합합니다. 크로스해칭은 바스켓 위브 스타일의 대각선 직조를 위해 +45deg 및 -45deg 반복 그라데이션을 레이어합니다. 이는 정확하게 설명할 가치가 있습니다. 이는 진정한 헤링본 기하학이 아닌 정직한 크로스해칭이며 도구는 이를 과장하기보다는 그렇게 표시합니다. 삼각형은 체커보드의 4개 쐐기 원추형 그라데이션 기술을 재사용하지만 45도 회전된 그라데이션을 시작합니다. 이는 쐐기 경계를 타일의 가장자리 중간점에서 모서리로 이동하고 동일한 4개의 쐐기를 4개의 사분면 사각형 대신 4개의 모서리에서 모서리까지의 삼각형으로 바꿉니다.

모든 패턴 유형은 실제로 적용되는 컨트롤만 표시합니다. 줄무늬에는 각도 슬라이더가 표시되고, 점에는 점 반경과 간격이 표시되며, 격자선과 크로스해칭에는 선 두께가 표시됩니다. 그리고 큰 타일 미리 보기 상자는 변경 사항이 있을 때마다 다시 칠해지기 때문에 값을 적용하기 전에 여러 번의 전체 반복을 볼 수 있습니다. 출력 모드를 SVG로 전환하면 동일한 패턴이 일반 직사각형, 원, 경로 또는 다각형 프리미티브로 작성된 <pattern> 요소로 다시 나타나 SVG 문서의 <defs> 내부에 붙여넣을 수 있으며, 독립형 .svg 파일을 한 번의 클릭으로 다운로드할 수 있습니다.

모든 것이 브라우저에서 로컬로 실행됩니다. 이미지 업로드, 서버 왕복, 계정이 없습니다. 반복 없는 단색 또는 그라데이션 채우기의 경우 이 사이트의 CSS 그라데이션 생성기가 대신 적합한 도구입니다. 이것은 특히 제로 이미지 자산으로 구축된 타일 가능한 기하학적 배경을 위한 것입니다.