<div class='box'>
	<svg>
		<mask id='m' fill='#fff'>
			<rect id='r' width='100%' height='100%'/>
			<circle id='c' r='50' fill='#000'/>
			<use xlink:href='#c' x='100%'/>
			<use xlink:href='#c' y='100%'/>
			<use xlink:href='#c' x='100%' y='100%'/>
		</mask>
		<use xlink:href='#r' fill='#f90' mask='url(#m)'/>
	</svg>
</div>

.box {
	position: relative;
	margin: .75em auto 0;
	max-width: 25em;
	min-height: 10em;
}

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

/* JUST PRETTYFYING STUFF, NOT ESSENTIAL FOR A WORKING DEMO */
html {
	$over-c: rgba(invert(#222), .5);
	min-width: 10em; height: 100%;
	background: 
		linear-gradient($over-c, $over-c), 
		url(https://images.unsplash.com/photo-1510920018318-3b4dfe979e4d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=76eda3022d9860f69a7fc7a94e46c3e6) 0 0/ cover
}