Damask

다마스크

A symmetrical floral motif woven from a single colour thread, made visible purely by how light bounces off the weave direction.

Also known as: 다마스크 문양
···
html
<div class="wrap"><svg viewBox="0 0 300 310" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
  <defs>
    <g id="fleur">
      <rect class="wing" x="18" y="73" width="64" height="11" rx="5.5"/>
      <path class="wing" d="M50,22 C44,36 40,56 46,73 C48,79 52,79 54,73 C60,56 56,36 50,22 Z" transform="rotate(-34 50 77)"/>
      <path class="wing" d="M50,22 C44,36 40,56 46,73 C48,79 52,79 54,73 C60,56 56,36 50,22 Z" transform="rotate(34 50 77)"/>
      <path class="body" d="M50,10 C42,26 37,50 44,70 C47,78 53,78 56,70 C63,50 58,26 50,10 Z"/>
      <path class="body" d="M38,84 C38,102 43,116 50,130 C57,116 62,102 62,84 Z"/>
      <circle class="wing" cx="50" cy="134" r="7"/>
    </g>
    <pattern id="pd" width="100" height="155" patternUnits="userSpaceOnUse">
      <rect width="100" height="155" fill="#4a2f3a"/>
      <use href="#fleur" x="0" y="4"/>
      <animateTransform attributeName="patternTransform" type="translate" from="0 0" to="0 -155" dur="16s" repeatCount="indefinite"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#pd)"/>
</svg></div><span class="tag">damask</span>
css
.wrap{position:absolute;inset:0;overflow:hidden}
.wing{fill:#66404e}
.body{fill:#7c5262}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.16);
  color:#f3e8ea;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

The name comes from Damascus, Syria, a major hub on the Silk Road. It's the height of medieval weaving technique: warp-faced satin weave and weft-faced sateen alternate within the same cloth to form the pattern — meaning it doesn't use two colours at all. The motif and ground are told apart purely by how the same-coloured thread catches light at different angles.

Visually it's a large, mirror-symmetric floral or foliate motif repeated along a diamond (ogee) lattice. The repeat unit is large and generously spaced, which is also why damask can look almost plain up close and only resolve into its pattern from a distance.

Using two literal colours in CSS/SVG works against the original tone-on-tone character, so a web version approximates that sheen contrast with two brightness levels of the same hue instead — a darker pair of mirrored leaves against a lighter body. An SVG <pattern> draws that symmetric leaf-and-bud motif and repeats it straight down the column.

When to use

Use for upholstery/wallpaper texture and formal invitation or packaging backgrounds. Keep the two tones close — strong colour contrast kills damask's signature subtlety.