JSFiddle - React, Tailwind, and code Playground

by StudioAl

HTML

<p>Masked image:</p>
<img class="masked" src="https://picsum.photos/500/250" width="500" height="250" />


<p>Original Image:</p>
<img src="https://picsum.photos/500/250" width="500" height="250" />

<p>Image Mask:</p>
<svg class="example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>

CSS

img.masked {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkitmask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l4.7-4.7-5.3-5.4 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7V155l-8.6-8.6 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.7 8.6-8.6v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.7v-1.1l-8.6-8.6 8.6-8.6V8l-7.9-8h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L301 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2-9.1-9.2-9.1 9.2L137 0h-.1l-9 9.2-9.1-9.2h-.1l-9.1 9.2-9-9.2h-.1l-9.1 9.2L82.3 0l-9.1 9.2L64.1 0 55 9.2 45.9 0h-.1l-9 9.2L27.7 0h-.1l-9.1 9.2-9-9.2h-.1L.3 9.2.1 9l-.1.1v1.1l8.6 8.6L0 27.4v1.1l8.6 8.7L0 45.8v1.1l8.6 8.7L0 64.2v1.1L8.6 74 0 82.6v1.1l8.6 8.6L0 101v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.7v1.1l8.6 8.6-8.6 8.6v1.2l8.6 8.6-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7-8.6 8.6v1.1l8.6 8.7z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 230" xml:space="preserve"><path d="m4.5 225.2 4.8 4.8 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9.1-9.2 9 9.2h.1l9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2 9.1-9.2 9.1 9.2h.1l9-9.2 9.1 9.2h.1l9.1-9.2...