Повтор маски

<div class="grid grid-col-2 sm:grid-col-3 gap-3">
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-tile mask-repeat"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-repeat</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-tile mask-repeat-x"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-repeat-x</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-tile mask-repeat-y"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-repeat-y</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-tile mask-repeat-none"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-repeat-none</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-tile mask-repeat-round"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-repeat-round</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="radius-1 border border-dashed border-outline-variant">
      <div class="h-e4 bg-primary demo-mask-tile mask-repeat-space"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-repeat-space</code>
  </div>
</div>

/* Demo only. The Framework has no class for mask-image, so each example sets
   its own. The mask is inline on purpose: an example renders in a sandboxed
   frame with an opaque origin, and a mask image is fetched in CORS mode, so a
   file from the site is refused and the masked element disappears with it. */
.demo-mask-tile {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 1.75rem 1.75rem;
  mask-size: 1.75rem 1.75rem;
}