Quatrefoil

콰트르포일 (사엽무늬)

Four overlapping circular lobes arranged symmetrically around a centre, reading as a four-leaf clover — born in Gothic cathedral window tracery.

Also known as: 사엽무늬네잎무늬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}

The name comes from French "quatre feuilles," four leaves. It's most associated with Gothic architectural tracery from the 13th century onward, but the underlying geometry of four overlapping circles is a shape several traditions arrived at independently, including Islamic geometric ornament and European heraldry.

In architecture it often appears as a single motif — the shape of one window — but as a surface pattern it's tiled repeatedly along a diamond (ogee) lattice. The quatrefoil you see on wallpaper or upholstery is almost always this repeating version.

The structure is just four same-sized circles overlapping around a centre, north-south-east-west or on the diagonals. In SVG, four circles sit in one <pattern> tile with semi-transparent fill, so the overlaps darken naturally through alpha stacking — no shape-boolean cutting or merging required.

When to use

Use for wallpaper/upholstery texture and heritage or luxury brand background patterns.