Playing around with food

dabblet.css

/* Playing around with food */
body {
	transform: translateZ(0);
	font-smoothing: subpixel-antialiased;
	background: darkgray;
}

.block {
	width: 500px;
	height: 500px;
	margin: 20px;
	float: left;
	background-color: yellow;
	background-image: 
		radial-gradient(100% 150%, circle, yellow 24%, white 25%, white 28%, yellow 29%, yellow 36%, white 36%, white 40%, transparent 40%, transparent),
		radial-gradient(0    150%, circle, yellow 24%, white 25%, white 28%, yellow 29%, yellow 36%, white 36%, white 40%, transparent 40%, transparent),
		radial-gradient(50%  100%, circle, white 10%, yellow 11%, yellow 23%, white 24%, white 30%, yellow 31%, yellow 43%, white 44%, white 50%, yellow 51%, yellow 63%, white 64%, white 71%, transparent 71%, transparent),
		radial-gradient(100% 50%,  circle, white 5%, yellow 6%, yellow 15%, white 16%, white 20%, yellow 21%, yellow 30%, white 31%, white 35%, yellow 36%, yellow 45%, white 46%, white 49%, transparent 50%, transparent),
		radial-gradient(0    50%,  circle, white 5%, yellow 6%, yellow 15%, white 16%, white 20%, yellow 21%, yellow 30%, white 31%, white 35%, yellow 36%, yellow 45%, white 46%, white 49%, transparent 50%, transparent);
	background-size:100px 50px;
	background-repeat: repeat;
}

.block:hover {
	margin: 5px;
	width: 10px;
	height: 10px;
	transition: all 1s ease;
}

dabblet.html

<div class="block"></div>

settings.json

{"page":"css","view":"split"}