18 replies

SVG Text Mask

hello there i wanted to use a mask for my title but mask is kinda heavy like 450kb, when i use it for text mu whole website becomes laggy, perhaps is there any better way to apply mask for text (i'll use it for dynamic pages so i cant just export it like an image) i can also send a mask if that'll help

<h1 class="font-[Akshar] leading-none bg-clip-text text-primary-900 bg-transparent
  [-webkit-mask:url(/img/font-pattern.svg)_repeat_10%_70%] [mask:url(/img/font-pattern.svg)_repeat_10%_70%] whitespace-nowrap z-10"
  :style="{ textShadow: `-1.4px -1.4px 0 #004d38, 1.4px -1.4px 0 #004d38, -1.4px 1.4px 0 #004d38, 1.4px 1.4px 0 #004d38` }">
  Some text
 </h1>

<h1 class="font-[Akshar] leading-none bg-clip-text text-primary-900 bg-transparent
  [-webkit-mask:url(/img/font-pattern.svg)_repeat_10%_70%] [mask:url(/img/font-pattern.svg)_repeat_10%_70%] whitespace-nowrap z-10"
  :style="{ textShadow: `-1.4px -1.4px 0 #004d38, 1.4px -1.4px 0 #004d38, -1.4px 1.4px 0 #004d38, 1.4px 1.4px 0 #004d38` }">
  Some text
 </h1>

<h1 class="font-[Akshar] leading-none bg-clip-text text-primary-900 bg-transparent
  [-webkit-mask:url(/img/font-pattern.svg)_repeat_10%_70%] [mask:url(/img/font-pattern.svg)_repeat_10%_70%] whitespace-nowrap z-10"
  :style="{ textShadow: `-1.4px -1.4px 0 #004d38, 1.4px -1.4px 0 #004d38, -1.4px 1.4px 0 #004d38, 1.4px 1.4px 0 #004d38` }">
  Some text
 </h1>

<h1 class="font-[Akshar] leading-none bg-clip-text text-primary-900 bg-transparent
  [-webkit-mask:url(/img/font-pattern.svg)_repeat_10%_70%] [mask:url(/img/font-pattern.svg)_repeat_10%_70%] whitespace-nowrap z-10"
  :style="{ textShadow: `-1.4px -1.4px 0 #004d38, 1.4px -1.4px 0 #004d38, -1.4px 1.4px 0 #004d38, 1.4px 1.4px 0 #004d38` }">
  Some text
 </h1>

SVG Text Mask

Similar Threads

Similar Threads

Similar Threads