디자인 아틀라스
EN
▞ 패턴·텍스타일

콰트르포일 (사엽무늬)

Quatrefoil

네 개의 원(잎)이 중심을 두고 대칭으로 겹쳐 네잎클로버처럼 보이는 모티프. 고딕 성당 창 장식에서 왔습니다.

다른 이름: 사엽무늬네잎무늬Four-lobe motif
···
html
<div class="wrap"><svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
  <defs>
    <pattern id="qf" width="60" height="60" patternUnits="userSpaceOnUse">
      <rect width="60" height="60" fill="#efe9da"/>
      <g fill="#8a5a7a" fill-opacity=".65">
        <circle cx="30" cy="14" r="13"/>
        <circle cx="46" cy="30" r="13"/>
        <circle cx="30" cy="46" r="13"/>
        <circle cx="14" cy="30" r="13"/>
      </g>
      <animateTransform attributeName="patternTransform" type="translate" from="0 0" to="-60 0" dur="14s" repeatCount="indefinite"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#qf)"/>
</svg></div><span class="tag">quatrefoil</span>
css
.wrap{position:absolute;inset:0;overflow:hidden}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(70,35,55,.82);
  color:#f3e9ee;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

이름은 프랑스어 "quatre feuilles"(네 잎)에서 왔습니다. 13세기 이후 고딕 건축의 트레이서리(창틀 장식)에서 널리 쓰였지만, 네 개의 원이 겹쳐 만드는 기하학 자체는 이슬람 기하 문양과 유럽 문장학에서도 각자 독립적으로 나타난, 여러 전통이 공유하는 보편적 도형입니다.

건축에서는 창문 하나의 형태(단일 모티프)로 쓰이는 경우가 많지만, 표면 장식 패턴으로 쓸 때는 이 클로버 모양을 다이아몬드(오지) 격자를 따라 반복해서 타일링합니다 — 벽지·업홀스터리에서 보는 콰트르포일 무늬는 대부분 이 반복형입니다.

구조는 중심에서 상하좌우(또는 대각선) 방향으로 같은 크기의 원 네 개를 겹치는 것뿐입니다. SVG 로는 원 네 개를 한 <pattern> 타일에 겹쳐 그리고, 반투명 채움으로 겹친 부분이 알파 스태킹만으로 자연스럽게 짙어지게 둡니다 — 도형을 따로 자르거나 합칠(boolean) 필요가 없습니다.

언제 쓰나

벽지/업홀스터리 텍스처, 헤리티지·럭셔리 브랜드 배경 패턴에 씁니다.