<svg aria-hidden="true" width="0" height="0">
<filter id="filter">
<feTurbulence type="turbulence" baseFrequency="0.002 0.008" numOctaves="20" seed="2" stitchTiles="stitch" result="turbulence" />
<feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix" />
<feColorMatrix type="matrix" values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 150 -15" in="colormatrix" result="colormatrix1" />
<feComposite in="SourceGraphic" in2="colormatrix1" operator="in" result="composite" />
</filter>
</svg>
<div class="grunge">Grunge</div>
.grunge {
white-space: nowrap;
font-size: 15vw;
color: white;
font-family: Arial Black, Helvetica, sans-serif;
font-weight: 700;
filter: url(#filter);
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100dvh;
overflow: hidden;
background: #333;
text-align: center;
}
svg {
display: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.