<div class="logo">
<h1>
Hidd<span>e</span>n
<br>
Br<span>a</span>in
</h1>
</div>
* {
margin: 0;
padding: 0;
}
.logo {
--color-bkg: #22315c;
--color-text: #fff;
--letter-mask: url(https://assets.codepen.io/9632/letter-e.svg);
background-color: var(--color-bkg);
display: grid;
height: 100vh;
place-items: center;
}
.logo h1 {
color: var(--color-text);
font-family: Roboto, sans-serif;
font-size: 6rem;
line-height: 0.85;
text-align: center;
text-transform: uppercase;
}
.logo span {
background-color: var(--color-text);
mask-image: var(--letter-mask);
mask-repeat: no-repeat;
mask-size: contain;
}
span:nth-child(3) {
--letter-mask: url(https://assets.codepen.io/9632/letter-a.svg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.