<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.