Положение маски

<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-leaf mask-repeat-none mask-inline-start-top"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-inline-start-top</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-leaf mask-repeat-none mask-top"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-top</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-leaf mask-repeat-none mask-inline-end-top"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-inline-end-top</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-leaf mask-repeat-none mask-inline-start"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-inline-start</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-leaf mask-repeat-none mask-center"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-center</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-leaf mask-repeat-none mask-inline-end"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-inline-end</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-leaf mask-repeat-none mask-inline-start-bottom"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-inline-start-bottom</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-leaf mask-repeat-none mask-bottom"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-bottom</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-leaf mask-repeat-none mask-inline-end-bottom"></div>
    </div>
    <code class="text-1/2 color-on-surface-variant">mask-inline-end-bottom</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-leaf {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M252 468c-13-93-9-155-37-206-18-33-47-56-88-70 8 63 34 106 82 130-19-85-8-158 35-218 50 69 57 149 18 239 17-70 57-116 121-137-5 74-42 123-111 148-10 37-12 75-8 114h-12Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M252 468c-13-93-9-155-37-206-18-33-47-56-88-70 8 63 34 106 82 130-19-85-8-158 35-218 50 69 57 149 18 239 17-70 57-116 121-137-5 74-42 123-111 148-10 37-12 75-8 114h-12Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 3rem 3rem;
  mask-size: 3rem 3rem;
}