<div class="item">
<svg viewBox="0 0 579 408" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clip">
<use href="#path"/>
</clipPath>
</defs>
<path id="path" d="M 10.986695,61.279799 C 11.742798,52.152791 13.167372,41.440502 23.410959,33.517783 L 41.42132,16.48942 c 3.210055,-2.955937 10.624962,-4.629824 20.559781,-5.535394 L 529.01109,11.48476 c 8.35432,3.033288 15.66129,1.697897 26.53699,25.204965 l 0.67442,108.089895 c -1.48371,13.40838 -9.02034,24.56629 -28.35815,31.33655 l -72.59172,-1.50522 c -9.43544,1.68736 -18.92766,3.11794 -26.26911,14.27443 l -27.17857,27.93644 c -9.80692,9.20416 -15.72128,18.25291 -14.44918,27.00129 l 0.18573,97.15254 c -0.5481,8.12203 -3.91583,15.87334 -10.94887,23.14272 l -29.75909,28.10839 c -8.18144,6.50039 -14.61165,6.14889 -21.25113,6.61617 L 39.873104,398.76913 C 20.266093,395.74973 14.779828,382.97169 10.500121,369.35982 Z" />
<image href="https://get.wallhere.com/photo/dark-planet-space-space-art-digital-art-Vadim-Sadovski-1504297.jpg" x="25" y="0" width="100%" height="100%" preserveAspectRatio="none" clip-path="url(#clip)"/>
<text x="30" y="120">traffic</text>
<text x="40" y="240">jam</text>
<text x="40" y="360">2023</text>
</svg>
</div>
path{
fill:none;
stroke: #fff;
stroke-width:2px;
}
.item{
background: url(https://get.wallhere.com/photo/dark-planet-space-space-art-digital-art-Vadim-Sadovski-1504297.jpg);
background-size: cover;
}
image{
filter: blur(10px)
}
text{
fill: #fff;
font-family: sans;
font-size: 100px;
text-transform: uppercase;
font-weight: 900;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.