JSFiddle - React, Tailwind, and code Playground

by djatha

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Crop/clip a picture</title>
  </head>
  <body>
    <h1>variant 1: group with a cutted rect on top</h1>
    <svg xmlns:xlink="http://www.w3.org/1999/xlink">
      <g transform="rotate(-250,200,200)">
        <image xlink:href="http://i.imgur.com/YVQZl.jpg" x="0" y="0" width="150" height="134"/>
        <path d="M110,25a 25 25 0 0 1 -50,0a 25 25 0 0 1 50 0 M0,0h150v134h-150v-134
        " stroke="white" fill="white" fill-rule="evenodd" stroke-widht="2"/>
        <!-- On filling rules: see
        http://www.w3.org/TR/SVG/painting.html#FillProperties and experiment
        a bit -->
      </g>
    </svg>
  </body>
</html>