KOENJP

SVG 패턴 배경 생성기

SVG · PATTERN

점 · 격자 · 사선 줄무늬 · 지그재그 · 물결 · 체크 · 육각형 등 빈틈없이 이어지는 배경 패턴을 만들어요. 크기 · 굵기 · 색 · 회전 · 투명도를 조절해 SVG 코드, CSS 배경(data URI), PNG 타일로 받아요.

패턴

미리보기

빈틈없이 이어지는 타일이에요. 배경 크기에 맞춰 반복돼요.

설정

무늬 색
배경색

내려받기


      

    


    
이 브라우저 안에서만 처리돼요. 서버로 보내지 않아요.

    
알아 두세요. 회전을 주면 CSS · SVG는 회전된 패턴으로 나오지만, 타일 PNG는 회전 없는 타일로 저장돼요. 회전된 그림이 필요하면 큰 이미지 PNG를 쓰세요.

  

  







  

    

      HOW TO
      
사용 방법

      
    
      
  1. 위에서 패턴(점 · 격자 · 사선 · 지그재그 · 물결 · 육각형 등)을 골라요.
    2. 
      
  2. 타일 크기 · 선 굵기(점 크기) · 투명도 · 회전을 조절해요.
    3. 
      
  3. 무늬 색과 배경색을 고르거나 색 조합 칩을 눌러요. 투명 배경도 돼요.
    4. 
      
  4. CSS 배경 또는 SVG 코드를 복사하거나, SVG · 타일 PNG · 큰 이미지 PNG로 내려받아요.
    5. 
      

    

    

      PAIRS WELL WITH
      
같이 쓰기 좋은 도구

      
    

  

  
  

    FAQ
    
자주 묻는 질문

    
CSS 코드는 어떻게 써요?
background-color · background-image · background-size 세 줄을 원하는 요소의 CSS에 붙여 넣으면 돼요. SVG가 코드 안에 들어 있어 이미지 파일이 필요 없어요.

    
회전하면 타일 PNG는 왜 회전이 안 돼요?
기울인 무늬는 정사각형 타일로 빈틈없이 잇기 어려워서, 타일 PNG는 회전 전 모양으로 저장해요. 회전된 그림은 큰 이미지 PNG나 SVG로 받으세요.

    
2x · 3x는 뭐예요?
고해상도 화면용으로 더 큰 픽셀 크기로 저장해요. 쓸 때는 background-size를 원래 타일 크기(px)로 맞추면 선명하게 보여요.