< pseudo-mask />

A tiny custom element that generates SVG masks from text content ✨

Live demo

Load module

<script src="https://cdn.skypack.dev/pseudo-mask" type="module" async></script>

<!-- or use module with native package imports -->

<script type="importmap">{"imports": {"@ponomarevlad/svg-text": "https://cdn.skypack.dev/@ponomarevlad/svg-text"}}</script>
<script src="https://unpkg.com/es-module-shims/dist/es-module-shims.js" async noshim></script>
<script src="https://cdn.jsdelivr.net/npm/pseudo-mask" type="module"></script>

Place text in element

<pseudo-mask>Place your text here</pseudo-mask>

Or wrap inside

<h1>
    <pseudo-mask>Header</pseudo-mask>
</h1>

Styling Demo

<style>
    body {
        display: flex;
        align-items: center;
        background-size: cover;
        justify-content: center;
        background-image: url("https://picsum.photos/1024");
    }

    h1 {
        font-size: 120px;
        line-height: 1.3em;
        font-family: Helvetica, sans-serif;
        --filter: blur(15px) saturate(2) brightness(.8);
    }
</style>
<h1>
    <pseudo-mask>Glassy</pseudo-mask>
</h1>