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 {
	position: relative;
	z-index: 1;
	display: inline-block;
	font-size: 256px; /* Chrome disappears emojis larger than this */
	animation: poop-dance .8s infinite alternate ease-in-out;
	text-shadow:
		5px -205px 1px red,
		-180px -40px 1px orange,
		-205px 270px 1px yellow,
		180px 340px 1px green,
		-285px -15px 1px blue,
		50px 200px 1px indigo,
		-145px 110px 1px violet;
}

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

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

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;\
		text-shadow:\
			50px -20px 1px #6A5B18,\
		 	-50px -20px 1px #964E41;\
	} </style>\
	<text y="200">💩</text></svg>');
	background: var(--poop) 0 0 repeat-x / 200px 180px, 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-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}