what this does
자신의 이미지를 반복 타일로 변환.
Pattern Generator는 16가지 기하학 프리셋 — 또는 업로드한 이미지 — 으로 배경을 만들 수 있습니다. 텍스처 견본, 브랜드 마크, 사진 크롭 또는 PNG, JPEG, WebP, SVG 파일을 반복 타일로 사용하세요.
도구는 완전히 브라우저에서 실행됩니다. 파일을 선택하고 배경색, 타일 크기, 불투명도를 조정한 뒤 CSS를 복사하거나 SVG 또는 PNG를 다운로드하세요. 계정이나 서버 업로드가 필요 없습니다.
step-by-step
5단계로 업로드 및 내보내기.
- Pattern Generator를 엽니다.
- 패턴 선택기에서 Your image 카드 — 그리드 맨 앞의 업로드 타일 — 를 클릭합니다.
- 기기에서 PNG, JPEG, WebP 또는 SVG 파일을 선택합니다. 이미지가 로드되면 미리보기가 업데이트됩니다.
- Background colour, Scale, Opacity를 조정하여 미리보기에서 반복이 올바르게 보일 때까지 조정합니다.
- Copy CSS, Download SVG 또는 Download PNG를 클릭하여 프로젝트에서 패턴을 사용합니다.
your file
이미지에 일어나는 일.
Pattern Generator는 이미지를 중앙 정사각형으로 자릅니다 — 파일 중앙, 짧은 변을 자르기 크기로 사용 — 그 정사각형을 현재 스케일 설정의 타일 크기(최대 256 px)로 조정합니다.
모든 처리는 기기의 메모리에서 이루어집니다. 원본 파일은 Tiny Design Shop이나 제3자 서버에 업로드되지 않습니다.
transparent pngs
투명 PNG와 배경색.
이미지에 투명도가 있는 경우 — PNG, 알파 WebP 또는 SVG — Pattern Generator는 이미지를 그리기 전에 선택한 Background colour로 타일을 채웁니다. 이미지의 불투명 영역은 보이고 투명 픽셀은 배경색이 비쳐 보입니다.
로고 마크 사이 간격 색상을 제어하거나, 잘라낸 텍스처의 가장자리를 부드럽게 하거나, 소스 파일에 자체 배경이 없을 때 브랜드 표면색에 맞출 때 사용하세요.
export
CSS, SVG 또는 PNG 복사.
Copy CSS는 타일이 data URI로 포함된 붙여넣기 가능한 background-color, background-image, background-size 블록을 제공합니다. 반복을 표시할 요소의 스타일시트 또는 인라인 스타일에 붙여넣으세요.
Download SVG는 타일을 독립 벡터 파일로 내보냅니다 — Figma 채우기나 디자인 인수인계에 유용합니다. Download PNG는 타일 미리보기의 1600×900 래스터를 내보냅니다 — 슬라이드, 소셜 미리보기 또는 data URI 배경을 받지 않는 도구에 적합합니다.
세부 사항이 많은 커스텀 이미지는 더 긴 CSS 스니펫을 생성합니다. 도구가 CSS가 크다고 경고하면 인라인 data URI 대신 Download PNG를 사용하거나 타일을 별도 이미지 파일로 호스팅하세요.
limits
파일 크기, 타일 크기, 세션 메모리.
업로드는 8 MB로 제한됩니다. 허용 형식은 PNG, JPEG, WebP, SVG입니다. 타일은 최대 스케일에서 긴 변 256 px로 제한 — 스타일시트를 비대하게 만들지 않고 선명한 CSS 반복에 충분합니다.
커스텀 이미지는 이 브라우저 탭에만 존재합니다. 페이지를 새로고침하거나 탭을 닫으면 업로드가 지워집니다 — 파일을 다시 선택해야 합니다. 클라우드 저장이나 기기 간 동기화는 없습니다.
privacy
파일은 기기를 떠나지 않습니다.
Pattern Generator는 브라우저에서 로컬로 업로드를 처리합니다. 자르기, 크기 조정, 미리보기, 내보내기는 모두 사용자의 기기에서 실행 — Tiny Design Shop 서버로 아무것도 전송되지 않습니다. 완료되면 탭을 닫으세요. 이미지 사본은 보관되지 않습니다.