<div class='box'>
	<svg>
		<circle id='c' r='50'/>
		<use xlink:href='#c' x='100%'/>
		<use xlink:href='#c' y='100%'/>
		<use xlink:href='#c' x='100%' y='100%'/>
	</svg>
</div>
.box {
	position: relative;
	margin: .75em auto 0;
	outline: solid 4px #f90;
	max-width: 25em;
	min-height: 8.75em;
}

svg {
	position: absolute;
	width: 100%; height: 100%;
	outline: solid 2px #b53;
}

/* 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
}

circle { fill: #95a }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.