JSFiddle - React, Tailwind, and code Playground

by linmic

HTML

<svg id='triangle' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <defs>
      <pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
        <image xlink:href='http://dummyimage.com/600x400/abc/333' width="100" height="100" preserveAspectRatio="none"></image>
    </pattern>
  </defs>
    
  <path d='M0 0 L300 0 L300 300 Z' class='myClass'/>
  <rect width="100" height="200" y="300" class="myClass"/>
  <circle cx="500" cy="200" r="100" class="myClass"/>
  <ellipse cx="300" cy="500" rx="100" ry="50" class="myClass"/>
</svg>

CSS

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

svg { width: 100%; height; 100% }