JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt="" width="300" height="300">
</div>

<div class="wrap">
    <img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt="" width="400" height="300">
</div>

<div class="wrap">
    <img src="http://alpatriott.ru/works/primer/images/romashki.jpg" alt="" width="300" height="400">
</div>

CSS

body{
padding:25px;
background:#222;    
}

.wrap{
display: inline-block;
margin: 25px;
position:relative;
overflow:hidden;
}

.wrap>img{
display:block;
}

.wrap:before{
content:'';
position:absolute;
top:0;
right:0;
width:100%;
height:50%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KPGxpbmVhckdyYWRpZW50IGlkPSJnNjEyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+DQo8c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwyNTUsMjU1LC40KSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0icmdiYSgyNTUsMjU1LDI1NSwuNCkiIG9mZnNldD0iLjUiLz48c3RvcCBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwyNTUsMjU1LDApIiBvZmZzZXQ9Ii41Ii8+PHN0b3Agc3RvcC1jb2xvcj0icmdiYSgyNTUsMjU1LDI1NSwwKSIgb2Zmc2V0PSIxIi8+DQo8L2xpbmVhckdyYWRpZW50Pg0KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjEyKSIgLz4NCjwvc3ZnPg==);
background-size: 100% 100%; 


}