Pooparty - view in Chrome for the full effect

dabblet.css

/**
 * Pooparty - view in Chrome for the full effect
 */

@keyframes poop-dance {
	from, 49% { transform-origin: -50% 100%; }
	50%, 75%, to { transform-origin: 150% 100%; }
	25% { transform: rotate(-10deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(10deg); }
}

.poop {
	display: inline-block;
	font-size: 256px; /* Chrome disappears emojis larger than this */
	animation: poop-dance .8s infinite alternate ease-in-out;
}

.poop:first-child, .poop:last-child {
	font-size: 200px;
	position: relative; top: -100px;
}

.poop:first-child { filter: hue-rotate(-25deg); }
.poop:last-child { filter: hue-rotate(25deg); }

body {
	text-align: center;
	padding-top: 16rem;
	--poop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">\
	<style>@keyframes poop-jump {\
		from { transform: translateY(-100px) }\
		70% { transform: translateY(0); }\
		to { transform: translate(.25em, 1em) scale(1.1, .5) translate(-.275em, -.05em); }\
	}\
	text {font: 100px/1 emoji; animation: poop-jump .8s infinite alternate ease-in; }\
	</style>\
	<text y="200">💩</text></svg>');
	background: var(--poop) 0 0 repeat-x / 200px 160px, var(--poop) 100px 100px / 200px 200px repeat-x hsl(50, 100%, 90%);
}

dabblet.html

<div class="poop">💩</div>
<div class="poop">💩</div>
<div class="poop">💩</div>

dabblet.js

// alert('Hello world!');

settings.json

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