JSFiddle - React, Tailwind, and code Playground

by kamuran

HTML

<svg id='pattern' xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <pattern id='image' width="1" height="1" viewBox="0 0 100 100">
      <image xlink:href='http://localhost/appID/images/headers/clientes-felices-hd.jpg' width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>

</svg>
<svg id='triangle' xmlns="http://www.w3.org/2000/svg" version="1.1" width='300px' height='300px'>
    <path d='M0 0 L300 0 L300 300 Z' class='myClass'></path>
</svg>

CSS

.myClass {
  fill: url(#image);
  stroke: red;
  stroke-width: 5;
}