:root {
/* =========================================
1. JAGGED (Height: 390px)
========================================= */
--mask1-height: 450px;
--mask1-offset: 150px;
/* Safe zone to prevent gradient covering teeth */
--mask1-top-url: url('data:image/svg+xml;utf8,');
--mask1-btm-url: url('data:image/svg+xml;utf8,');
/* =========================================
2. ROUGH PAINT (Height: 462px)
========================================= */
--mask2-height: 520px;
--mask2-offset: 270px;
--mask2-top-url: url('data:image/svg+xml;utf8,');
--mask2-btm-url: url('data:image/svg+xml;utf8,');
/* =========================================
3. CURVED ROUGH (Height: 319px)
========================================= */
--mask3-height: 370px;
--mask3-offset: 210px;
--mask3-top-url: url('data:image/svg+xml;utf8,');
--mask3-btm-url: url('data:image/svg+xml;utf8,');
/* =========================================
4. SPIKES (Height: 573px)
========================================= */
--mask4-height: 635px;
--mask4-offset: 195px;
--mask4-top-url: url('data:image/svg+xml;utf8,');
--mask4-btm-url: url('data:image/svg+xml;utf8,');
/* =========================================
5. TORN (Height: 384px)
========================================= */
--mask5-height: 384x;
--mask5-offset: 255px;
/* The specific 141px you wanted! */
--mask5-top-url: url('data:image/svg+xml;utf8,');
--mask5-btm-url: url('data:image/svg+xml;utf8,');
/* =========================================
6. FRAME (Top & Bottom in one SVG)
========================================= */
--mask6-height: 582px;
--mask6-offset: 180px;
--mask6-url: url('data:image/svg+xml;utf8,');
/* =========================================
7. FRAME BOTTOM (Bottom pattern only)
========================================= */
--mask7-height: 889px;
--mask7-offset: 260px;
--mask7-url: url('data:image/svg+xml;utf8,');
}
/* =========================================
BASE SETUP
========================================= */
/* Define Heights and Offsets dynamically per mask class */
.mask1-top,
.mask1-btm,
.mask1-both {
--m-height: var(--mask1-height);
--m-offset: var(--mask1-offset);
}
.mask2-top,
.mask2-btm,
.mask2-both {
--m-height: var(--mask2-height);
--m-offset: var(--mask2-offset);
}
.mask3-top,
.mask3-btm,
.mask3-both {
--m-height: var(--mask3-height);
--m-offset: var(--mask3-offset);
}
.mask4-top,
.mask4-btm,
.mask4-both {
--m-height: var(--mask4-height);
--m-offset: var(--mask4-offset);
}
.mask5-top,
.mask5-btm,
.mask5-both {
--m-height: var(--mask5-height);
--m-offset: var(--mask5-offset);
}
/* Common properties for all masks */
/* v1.0.4 - Constrain mask positioning to the element box */
[class*="mask"] {
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Make positioning/clip area explicit so top/bottom anchoring stays on this element */
-webkit-mask-origin: border-box;
mask-origin: border-box;
-webkit-mask-clip: border-box;
mask-clip: border-box;
/* Optional: allows using container query units (cqw) later */
container-type: inline-size;
}
/* =========================================
TOP ONLY IMPLEMENTATION
========================================= */
.mask1-top {
-webkit-mask-image: var(--mask1-top-url), linear-gradient(#000, #000);
mask-image: var(--mask1-top-url), linear-gradient(#000, #000);
}
.mask2-top {
-webkit-mask-image: var(--mask2-top-url), linear-gradient(#000, #000);
mask-image: var(--mask2-top-url), linear-gradient(#000, #000);
}
.mask3-top {
-webkit-mask-image: var(--mask3-top-url), linear-gradient(#000, #000);
mask-image: var(--mask3-top-url), linear-gradient(#000, #000);
}
.mask4-top {
-webkit-mask-image: var(--mask4-top-url), linear-gradient(#000, #000);
mask-image: var(--mask4-top-url), linear-gradient(#000, #000);
}
.mask5-top {
-webkit-mask-image: var(--mask5-top-url), linear-gradient(#000, #000);
mask-image: var(--mask5-top-url), linear-gradient(#000, #000);
}
/* SVG on top, gradient anchored to bottom */
[class*="mask"][class*="-top"]{
-webkit-mask-position:
top center,
bottom center;
mask-position:
top center,
bottom center;
/* KEY FIX */
-webkit-mask-size:
max(100%, 1440px) auto,
100% calc(100% - var(--m-offset));
mask-size:
max(100%, 1440px) auto,
100% calc(100% - var(--m-offset));
}
/* =========================================
BOTTOM ONLY IMPLEMENTATION
========================================= */
.mask1-btm {
-webkit-mask-image: var(--mask1-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask1-btm-url), linear-gradient(#000, #000);
}
.mask2-btm {
-webkit-mask-image: var(--mask2-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask2-btm-url), linear-gradient(#000, #000);
}
.mask3-btm {
-webkit-mask-image: var(--mask3-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask3-btm-url), linear-gradient(#000, #000);
}
.mask4-btm {
-webkit-mask-image: var(--mask4-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask4-btm-url), linear-gradient(#000, #000);
}
.mask5-btm {
-webkit-mask-image: var(--mask5-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask5-btm-url), linear-gradient(#000, #000);
}
/* SVG on bottom, gradient anchored to top */
[class*="mask"][class*="-btm"] {
-webkit-mask-position: bottom center, top center;
mask-position: bottom center, top center;
-webkit-mask-size:
auto var(--m-height),
100% calc(100% - var(--m-offset));
mask-size:
auto var(--m-height),
100% calc(100% - var(--m-offset));
}
/* =========================================
BOTH (TOP & BOTTOM) IMPLEMENTATION
========================================= */
.mask1-both {
-webkit-mask-image: var(--mask1-top-url), var(--mask1-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask1-top-url), var(--mask1-btm-url), linear-gradient(#000, #000);
}
.mask2-both {
-webkit-mask-image: var(--mask2-top-url), var(--mask2-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask2-top-url), var(--mask2-btm-url), linear-gradient(#000, #000);
}
.mask3-both {
-webkit-mask-image: var(--mask3-top-url), var(--mask3-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask3-top-url), var(--mask3-btm-url), linear-gradient(#000, #000);
}
.mask4-both {
-webkit-mask-image: var(--mask4-top-url), var(--mask4-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask4-top-url), var(--mask4-btm-url), linear-gradient(#000, #000);
}
.mask5-both {
-webkit-mask-image: var(--mask5-top-url), var(--mask5-btm-url), linear-gradient(#000, #000);
mask-image: var(--mask5-top-url), var(--mask5-btm-url), linear-gradient(#000, #000);
}
[class*="mask"][class*="-both"] {
-webkit-mask-position: top center, bottom center, center;
mask-position: top center, bottom center, center;
/* We subtract (2 * offset) from the gradient height so it floats exactly
between the top and bottom jagged edges without covering them.
*/
-webkit-mask-size:
auto var(--m-height),
auto var(--m-height),
100% calc(100% - (2 * var(--m-offset)));
mask-size:
auto var(--m-height),
auto var(--m-height),
100% calc(100% - (2 * var(--m-offset)));
}
/* v1.0.6 - Full-frame mask (top + bottom in one SVG) */
.mask6 {
-webkit-mask-image: var(--mask6-url);
mask-image: var(--mask6-url);
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* v1.0.7 - Full-element mask with bottom pattern SVG */
.mask7 {
-webkit-mask-image: var(--mask7-url);
mask-image: var(--mask7-url);
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-position: bottom center;
mask-position: bottom center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}