JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<svg viewbox="0 0 100 100">
  <defs>
    <pattern id="img1" patternUnits="objectBoundingBox" width="1" height="1">
      <image xlink:href="http://wallpapers1.ru/priroda/data/priroda129_129.jpg" x="0" y="0" width="300" height="200" />
    </pattern>
  </defs>
  <path d="M 100,100 L 0,100 L 100,0 z" fill="url(#img1)" />
  
</svg>

CSS

svg{
  display:block;
  width:100px;
}
svg image{
  transition:all .5s;
}
svg:hover image{
  transform:scale(1.5);
}