Mask Type - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "mask-type"; export const description = "Utilities for controlling how an SVG mask is interpreted.";

Examples

Basic example

Use the mask-type-alpha and mask-type-luminance utilities to control the type of an SVG mask:

<Figure> <Example> { <div> <Stripes border className="relative mx-auto flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96" > <svg viewBox="0 0 384 192"> <mask id="blob1" className="mask-type-alpha fill-gray-700/70"> <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" /> </mask> <image href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80" height="100%" width="100%" preserveAspectRatio="xMaxYMid slice" mask="url(#blob1)" /> </svg> </Stripes> <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">mask-type-alpha</p> <Stripes border className="relative mx-auto mt-8 flex h-48 max-w-96 items-center justify-center overflow-hidden rounded-lg sm:w-96" > <svg viewBox="0 0 384 192"> <mask id="blob2" className="mask-type-luminance fill-gray-700/70"> <path d="M138.25 45.9161c34.504 -4.0384 45.586 -8.2996 69.504 -26.7274c35.516 -27.35568 88.5 -27.47958 103.651 24.8472c11.65 40.2452 0.417 90.1771 -25.438 113.0701c-43.537 38.552 -124.113 45.445 -174.128 15.703c-43.1183 -25.637 -56.9741 -74.9589 -30.0882 -107.1019c9.1187 -10.902 23.4522 -15.924 56.4992 -19.791z" /> </mask> <image href="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=80" height="100%" width="100%" preserveAspectRatio="xMaxYMid slice" mask="url(#blob2)" /> </svg> </Stripes> <p className="mt-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> mask-type-luminance </p> </div> } </Example>

html

<!-- [!code classes:mask-type-alpha,mask-type-luminance] -->
<svg>
  <mask id="blob1" class="mask-type-alpha fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob1)" />
</svg>

<svg>
  <mask id="blob2" class="mask-type-luminance fill-gray-700/70">
    <path d="..."></path>
  </mask>
  <image href="/img/mountains.jpg" height="100%" width="100%" mask="url(#blob2)" />
</svg>

</Figure>

When using mask-type-luminance the luminance value of the SVG mask determines visibility, so sticking with grayscale colors will produce the most predictable results. With mask-alpha, the opacity of the SVG mask determines the visibility of the masked element.

Responsive design