페이즐리

<div class="wrap"><svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" width="100%" height="100%">
  <defs>
    <g id="boteh">
      <path class="body" d="M36,66 C24,54 18,36 24,20 C28,8 42,2 54,10 C62,16 60,26 50,26
        C42,26 36,34 38,44 C40,52 44,58 44,66 Z"/>
      <ellipse class="body" cx="44" cy="108" rx="34" ry="42"/>
      <ellipse class="inner" cx="44" cy="108" rx="21" ry="27"/>
      <circle class="dot" cx="38" cy="96" r="4.5"/>
      <circle class="dot" cx="58" cy="106" r="3.5"/>
      <circle class="dot" cx="42" cy="124" r="3.5"/>
    </g>
    <pattern id="p" width="130" height="170" patternUnits="userSpaceOnUse">
      <rect width="130" height="170" fill="#efe7d8"/>
      <use href="#boteh" fill="#7a3b5e" x="4" y="2"/>
      <use href="#boteh" fill="#c98a3f" transform="translate(48,12) rotate(180 44 76)"/>
      <animateTransform attributeName="patternTransform" type="translate" from="0 0" to="-130 -170" dur="14s" repeatCount="indefinite"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#p)"/>
</svg></div><span class="tag">paisley</span>

.wrap{position:absolute;inset:0;overflow:hidden}
.inner{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2}
.dot{fill:rgba(255,255,255,.65)}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(60,20,40,.82);
  color:#f3e6d0;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}