Curtains

dabblet.css

/**
 * Curtains
 */
.screen, .curtains {
	background:#ccc;
	width:400px;
	height:300px;
}
.curtains {
	background:none;
	overflow:hidden;
	position:relative;
}
	.curtains > * {
		background:#c00;
		box-shadow:0 0 25px rgba(0,0,0,.8);
		position:absolute;
	}
	.bl, .br {
		width:100px;
		height:200px;
		border-radius: 90%  60%  50%  50%  / 60%   60%   40%  40%;
		bottom:-80px;
		left:-60px;
	}
	.br {
		left:auto;
		right:-60px;
	}
	.lc, .rc {
		width:300px;
		height:600px;
		border-radius: 90%  60%  50%  50%  / 60%   60%   40%  40%;
		top:-400px;
		left:-220px;
	}
	.rc {
		left:auto;
		right:-220px;
	}
	.tl, .tc, .tr {
		width:300px;
		height:150px;
		border-radius: 90%;
		left:-100px;
		top:-75px;
	}
	.tc {
		left:50px;
		top:-100px;
	}
	.tr {
		left:auto;
		right:-100px;
	}

dabblet.html

<div class="screen">
	<div class="curtains">
		<div class="bl"></div>
		<div class="br"></div>
		<div class="lc"></div>
		<div class="rc"></div>
		<div class="tl"></div>
		<div class="tr"></div>
		<div class="tc"></div>
	</div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}