CSS Shenannigans

All the animations below are made with only one html element.

One love

HTML

<div id="one-love"><div>

CSS

#one-love {
	--body-color: rgb(234, 68, 40);
	--border-color: rgb(81, 18, 3);
	--background-color-light: rgb(243, 97, 97);
	--background-color-medium: rgb(224, 63, 59);
	--background-color-dark: rgb(179, 40, 39);
	--shine-color: rgb(255, 174, 160);
	--beat-expand-amount: 1.3;
	--angle: 45deg;
	font-size: 6px;
	width: 100em;
	height: 100em;
	border-radius: 5em;
	overflow: hidden;
	position: relative;
}

#one-love::before {
	content: "";
	background-color: var(--body-color);
	width: 20em;
	height: 20em;
	display: block;
	position: absolute;
	left: 40em;
	top: 40em;
	border-radius: 50% 50% 0 50%;
	transform: rotate(var(--angle)) scale(1);
	box-shadow: -10em 0 var(--body-color), 0 -4em var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 var(--background-color-dark), 0 0 var(--background-color-dark), 0 0 var(--background-color-dark), 0 0 0 75em var(--background-color-light);
	animation: IconHeartBeat 3s ease-out infinite, IconHeartPulse 3s ease-out infinite;
}

#one-love::after {
	content: "";
	position: absolute;
	width: 6em;
	height: 6em;
	left: 47em;
	top: 42em;
	transform: rotate(var(--angle)) scale(1);
	border-radius: 50%;
	box-shadow: 1em 1em 0 -.5em var(--border-color), -2em 7em 0 0 var(--body-color), -3em 6em 0 -.5em var(--border-color), 7em -2em 0 0 var(--body-color), 6em -3em 0 -.5em var(--border-color), 4em -14em 0 -1em var(--shine-color);
	animation: IconHeartBlink 5s ease infinite, IconHeartPulse 3s ease-out infinite;
	background-color: var(--body-color);
}

@keyframes IconHeartBlink {
	0% { box-shadow: 1em 1em 0 -.5em var(--border-color), -2em 7em 0 0 var(--body-color), -3em 6em 0 -.5em var(--border-color), 7em -2em 0 0 var(--body-color), 6em -3em 0 -.5em var(--border-color), 4em -14em 0 -1em var(--shine-color); }
	60% { box-shadow: 1em 1em 0 -.5em var(--border-color), -2em 7em 0 0 var(--body-color), -3em 6em 0 -.5em var(--border-color), 7em -2em 0 0 var(--body-color), 6em -3em 0 -.5em var(--border-color), 4em -14em 0 -1em var(--shine-color); }
	70% { box-shadow: 1em 1em 0 -.5em var(--border-color), 0 9.5em 0 0 var(--body-color), -3em 6em 0 -1.5em var(--border-color), 9.5em 0 0 0 var(--body-color), 6em -3em 0 -1.5em var(--border-color), 4em -14em 0 -1em var(--shine-color); }
	90% { box-shadow: 1em 1em 0 -.5em var(--border-color), 0 9.5em 0 0 var(--body-color), -3em 6em 0 -1.5em var(--border-color), 9.5em 0 0 0 var(--body-color), 6em -3em 0 -1.5em var(--border-color), 4em -14em 0 -1em var(--shine-color); }
	100% { box-shadow: 1em 1em 0 -.5em var(--border-color), -2em 7em 0 0 var(--body-color), -3em 6em 0 -.5em var(--border-color), 7em -2em 0 0 var(--body-color), 6em -3em 0 -.5em var(--border-color), 4em -14em 0 -1em var(--shine-color); }
}

@keyframes IconHeartBeat {
	0% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 0 var(--background-color-dark), 0 0 0 0 var(--background-color-dark), 0 0 0 0 var(--background-color-dark), 0 0 0 75em var(--background-color-light); }
	33.33% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 71vw var(--background-color-dark), -71vw 0 0 71vw var(--background-color-dark), 0 -71vw 0 71vw var(--background-color-dark), 0 0 0 75em var(--background-color-light); }
	33.34% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 0 var(--background-color-dark), 0 0 0 0 var(--background-color-dark), 0 0 0 0 var(--background-color-dark), 0 0 0 75em var(--background-color-dark); }
	33.35% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 0 var(--background-color-medium), 0 0 0 0 var(--background-color-medium), 0 0 0 0 var(--background-color-medium), 0 0 0 75em var(--background-color-dark); }
	66.66% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 71vw var(--background-color-medium), -71vw 0 0 71vw var(--background-color-medium), 0 -71vw 0 71vw var(--background-color-medium), 0 0 0 75em var(--background-color-dark); }
	66.67% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 0 var(--background-color-medium), 0 0 0 0 var(--background-color-medium), 0 0 0 0 var(--background-color-medium), 0 0 0 75em var(--background-color-medium); }
	66.68% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 0 var(--background-color-light), 0 0 0 0 var(--background-color-light), 0 0 0 0 var(--background-color-light), 0 0 0 75em var(--background-color-medium); }
	99.98% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 71vw var(--background-color-light), -71vw 0 0 71vw var(--background-color-light), 0 -71vw 0 71vw var(--background-color-light), 0 0 0 75em var(--background-color-medium); }
	99.99% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 71vw var(--background-color-light), 0 0 0 0 var(--background-color-light), 0 0 0 0 var(--background-color-light), 0 0 0 75em var(--background-color-light); }
	100% { box-shadow: -10em 0 0 0 var(--body-color), 0 -4em 0 0 var(--body-color), -10em 0 0 1em var(--border-color), 0 -10em 0 0 var(--body-color), 0 -10em 0 1em var(--border-color), 0 0 0 1em var(--border-color), 0 0 0 0 var(--background-color-dark), 0 0 0 0 var(--background-color-dark), 0 0 0 0 var(--background-color-dark), 0 0 0 75em var(--background-color-light); }
}

@keyframes IconHeartPulse {
	0% { transform: rotate(var(--angle)) scale(1); }
	16.6% { transform: rotate(var(--angle)) scale(var(--beat-expand-amount)); }
	33.33% { transform: rotate(var(--angle)) scale(1); }
	50% { transform: rotate(var(--angle)) scale(var(--beat-expand-amount)); }
	66.66% { transform: rotate(var(--angle)) scale(1); }
	83.3% { transform: rotate(var(--angle)) scale(var(--beat-expand-amount)); }
	100% { transform: rotate(var(--angle)) scale(1); }
}

The impossible one

HTML

<div id="the-impossible-one"><div>

CSS

#the-impossible-one {
	--body-color-light: #4baad1;
	--body-color-medium: #1079b6;
	--body-color-dark: #174599;
	--background-color-light: #c3e8ff;
	--background-color-medium: #95cef1;
	--background-color-dark: #75c0ef;
	--real-background-color: #54a6d9;
	position: relative;
	font-size: 6px;
	width: 100em;
	height: 100em;
	border-radius: 50%;
	background-color: var(--background-color-light);
	animation: 6s linear infinite penroseAnimationRotate;
	overflow: hidden;
}

#the-impossible-one::before{
	content: "";
	transform: skewX(30deg);
	position: absolute;
	width: 0;
	height: 0;
	border-bottom: 8.67em solid var(--body-color-dark);
	border-left: 10em solid transparent;
	border-right-width: 0;
	border-top-width: 0;
	top: 37em;
	left: 45em;
	box-shadow: 0 4.33em 0 0 var(--body-color-dark), 0 8.67em 0 0 var(--body-color-dark), 0 13em 0 0 var(--body-color-dark), 0 17.33em 0 0 var(--body-color-dark), 0 21.67em 0 0 var(--body-color-dark), 0 26em 0 0 var(--body-color-dark), -6em 26em 0 0 var(--body-color-dark), -10em 26em 0 0 var(--body-color-dark), -15em 26em 0 0 var(--body-color-dark), -20em 26em 0 0 var(--body-color-dark), -25em 26em 0 0 var(--body-color-dark), -30em 26em 0 0 var(--body-color-dark), -35em 26em 0 0 var(--body-color-dark), -40em 26em 0 0 var(--body-color-dark), -10em 17.33em 0 0 var(--body-color-light), -15em 17.33em 0 0 var(--body-color-light), -20em 17.33em 0 0 var(--body-color-light), -25em 17.33em 0 0 var(--body-color-light), -30em 17.33em 0 0 var(--body-color-light), 10em 18em 0 0 var(--body-color-medium), 10em 17.33em 0 0 var(--body-color-medium), 10em 13em 0 0 var(--body-color-medium), 10em 8.67em 0 0 var(--body-color-medium), 10em 4.33em 0 0 var(--body-color-medium), 10em 0 0 0 var(--body-color-medium), 10em -4.33em 0 0 var(--body-color-medium), 10em -8.67em 0 0 var(--body-color-medium), 10em -13em 0 0 var(--body-color-medium), 10em -17.33em 0 0 var(--body-color-medium);
	animation: 6s ease-in-out infinite penroseAnimationRotateBefore;
}

#the-impossible-one::after{
	content: "";
	transform: skewX(-30deg);
	position: absolute;
	width: 0;
	height: 0;
	border-top: 8.67em solid var(--body-color-medium);
	border-left: 10em solid transparent;
	border-right-width: 0;
	border-bottom-width: 0;
	top: 63em;
	left: 65em;
	box-shadow: -50em -8.67em 0 0 var(--body-color-light), -50em -13em 0 0 var(--body-color-light), -50em -17.33em 0 0 var(--body-color-light), -50em -21.67em 0 0 var(--body-color-light), -50em -26em 0 0 var(--body-color-light), -50em -30.33em 0 0 var(--body-color-light), -50em -34.67em 0 0 var(--body-color-light), -50em -39em 0 0 var(--body-color-light), -50em -43.33em 0 0 var(--body-color-light), -40em -17.33em 0 0 var(--body-color-medium), -40em -21.67em 0 0 var(--body-color-medium), -40em -26em 0 0 var(--body-color-medium), -40em -30.33em 0 0 var(--body-color-medium), -40em -34.67em 0 0 var(--body-color-medium), .33em 0 0 0 var(--body-color-medium);
	animation: 6s ease-in-out infinite penroseAnimationRotateAfter;
}

@keyframes penroseAnimationRotate{
	0% { transform: rotate(0deg); box-shadow: 6.67em 0 0 33.33em var(--background-color-light), -6.67em -3.33em 0 41.67em var(--background-color-medium), 10em -3.33em 0 58.33em var(--background-color-dark), 0 0 0 var(--max-size) var(--real-background-color); }
	50% { box-shadow: 0 1.33em 0 41.67em var(--background-color-light), 1.33em 6.67em 0 41.67em var(--background-color-medium), -6.67em 6em 0 58.33em var(--background-color-dark), 0 0 0 var(--max-size) var(--real-background-color); }
	100% { transform: rotate(360deg); box-shadow: 6.67em 0 0 33.33em var(--background-color-light), -6.67em -3.33em 0 41.67em var(--background-color-medium), 10em -3.33em 0 58.33em var(--background-color-dark), 0 0 0 var(--max-size) var(--real-background-color); }
}

@keyframes penroseAnimationRotateBefore{
	0% { border-bottom-color: var(--body-color-dark); box-shadow: 0 4.33em 0 0 var(--body-color-dark), 0 8.67em 0 0 var(--body-color-dark), 0 13em 0 0 var(--body-color-dark), 0 17.33em 0 0 var(--body-color-dark), 0 21.67em 0 0 var(--body-color-dark), 0 26em 0 0 var(--body-color-dark), -6em 26em 0 0 var(--body-color-dark), -10em 26em 0 0 var(--body-color-dark), -15em 26em 0 0 var(--body-color-dark), -20em 26em 0 0 var(--body-color-dark), -25em 26em 0 0 var(--body-color-dark), -30em 26em 0 0 var(--body-color-dark), -35em 26em 0 0 var(--body-color-dark), -40em 26em 0 0 var(--body-color-dark), -10em 17.33em 0 0 var(--body-color-light), -15em 17.33em 0 0 var(--body-color-light), -20em 17.33em 0 0 var(--body-color-light), -25em 17.33em 0 0 var(--body-color-light), -30em 17.33em 0 0 var(--body-color-light), 10em 18em 0 0 var(--body-color-medium), 10em 17.33em 0 0 var(--body-color-medium), 10em 13em 0 0 var(--body-color-medium), 10em 8.67em 0 0 var(--body-color-medium), 10em 4.33em 0 0 var(--body-color-medium), 10em 0 0 0 var(--body-color-medium), 10em -4.33em 0 0 var(--body-color-medium), 10em -8.67em 0 0 var(--body-color-medium), 10em -13em 0 0 var(--body-color-medium), 10em -17.33em 0 0 var(--body-color-medium); }
	33.33% { border-bottom-color: var(--body-color-light); box-shadow: 0 4.33em 0 0 var(--body-color-light), 0 8.67em 0 0 var(--body-color-light), 0 13em 0 0 var(--body-color-light), 0 17.33em 0 0 var(--body-color-light), 0 21.67em 0 0 var(--body-color-light), 0 26em 0 0 var(--body-color-light), -6em 26em 0 0 var(--body-color-light), -10em 26em 0 0 var(--body-color-light), -15em 26em 0 0 var(--body-color-light), -20em 26em 0 0 var(--body-color-light), -25em 26em 0 0 var(--body-color-light), -30em 26em 0 0 var(--body-color-light), -35em 26em 0 0 var(--body-color-light), -40em 26em 0 0 var(--body-color-light), -10em 17.33em 0 0 var(--body-color-medium), -15em 17.33em 0 0 var(--body-color-medium), -20em 17.33em 0 0 var(--body-color-medium), -25em 17.33em 0 0 var(--body-color-medium), -30em 17.33em 0 0 var(--body-color-medium), 10em 18em 0 0 var(--body-color-dark), 10em 17.33em 0 0 var(--body-color-dark), 10em 13em 0 0 var(--body-color-dark), 10em 8.67em 0 0 var(--body-color-dark), 10em 4.33em 0 0 var(--body-color-dark), 10em 0 0 0 var(--body-color-dark), 10em -4.33em 0 0 var(--body-color-dark), 10em -8.67em 0 0 var(--body-color-dark), 10em -13em 0 0 var(--body-color-dark), 10em -17.33em 0 0 var(--body-color-dark); }
	66.66% { border-bottom-color: var(--body-color-medium); box-shadow: 0 4.33em 0 0 var(--body-color-medium), 0 8.67em 0 0 var(--body-color-medium), 0 13em 0 0 var(--body-color-medium), 0 17.33em 0 0 var(--body-color-medium), 0 21.67em 0 0 var(--body-color-medium), 0 26em 0 0 var(--body-color-medium), -6em 26em 0 0 var(--body-color-medium), -10em 26em 0 0 var(--body-color-medium), -15em 26em 0 0 var(--body-color-medium), -20em 26em 0 0 var(--body-color-medium), -25em 26em 0 0 var(--body-color-medium), -30em 26em 0 0 var(--body-color-medium), -35em 26em 0 0 var(--body-color-medium), -40em 26em 0 0 var(--body-color-medium), -10em 17.33em 0 0 var(--body-color-dark), -15em 17.33em 0 0 var(--body-color-dark), -20em 17.33em 0 0 var(--body-color-dark), -25em 17.33em 0 0 var(--body-color-dark), -30em 17.33em 0 0 var(--body-color-dark), 10em 18em 0 0 var(--body-color-light), 10em 17.33em 0 0 var(--body-color-light), 10em 13em 0 0 var(--body-color-light), 10em 8.67em 0 0 var(--body-color-light), 10em 4.33em 0 0 var(--body-color-light), 10em 0 0 0 var(--body-color-light), 10em -4.33em 0 0 var(--body-color-light), 10em -8.67em 0 0 var(--body-color-light), 10em -13em 0 0 var(--body-color-light), 10em -17.33em 0 0 var(--body-color-light); }
	100% { border-bottom-color: var(--body-color-dark); box-shadow: 0 4.33em 0 0 var(--body-color-dark), 0 8.67em 0 0 var(--body-color-dark), 0 13em 0 0 var(--body-color-dark), 0 17.33em 0 0 var(--body-color-dark), 0 21.67em 0 0 var(--body-color-dark), 0 26em 0 0 var(--body-color-dark), -6em 26em 0 0 var(--body-color-dark), -10em 26em 0 0 var(--body-color-dark), -15em 26em 0 0 var(--body-color-dark), -20em 26em 0 0 var(--body-color-dark), -25em 26em 0 0 var(--body-color-dark), -30em 26em 0 0 var(--body-color-dark), -35em 26em 0 0 var(--body-color-dark), -40em 26em 0 0 var(--body-color-dark), -10em 17.33em 0 0 var(--body-color-light), -15em 17.33em 0 0 var(--body-color-light), -20em 17.33em 0 0 var(--body-color-light), -25em 17.33em 0 0 var(--body-color-light), -30em 17.33em 0 0 var(--body-color-light), 10em 18em 0 0 var(--body-color-medium), 10em 17.33em 0 0 var(--body-color-medium), 10em 13em 0 0 var(--body-color-medium), 10em 8.67em 0 0 var(--body-color-medium), 10em 4.33em 0 0 var(--body-color-medium), 10em 0 0 0 var(--body-color-medium), 10em -4.33em 0 0 var(--body-color-medium), 10em -8.67em 0 0 var(--body-color-medium), 10em -13em 0 0 var(--body-color-medium), 10em -17.33em 0 0 var(--body-color-medium); }
}

@keyframes penroseAnimationRotateAfter{
	0% { border-top-color: var(--body-color-medium); box-shadow: -50em -8.67em 0 0 var(--body-color-light), -50em -13em 0 0 var(--body-color-light), -50em -17.33em 0 0 var(--body-color-light), -50em -21.67em 0 0 var(--body-color-light), -50em -26em 0 0 var(--body-color-light), -50em -30.33em 0 0 var(--body-color-light), -50em -34.67em 0 0 var(--body-color-light), -50em -39em 0 0 var(--body-color-light), -50em -43.33em 0 0 var(--body-color-light), -40em -17.33em 0 0 var(--body-color-medium), -40em -21.67em 0 0 var(--body-color-medium), -40em -26em 0 0 var(--body-color-medium), -40em -30.33em 0 0 var(--body-color-medium), -40em -34.67em 0 0 var(--body-color-medium), .33em 0 0 0 var(--body-color-medium); }
	33.33% { border-top-color: var(--body-color-dark); box-shadow: -50em -8.67em 0 0 var(--body-color-medium), -50em -13em 0 0 var(--body-color-medium), -50em -17.33em 0 0 var(--body-color-medium), -50em -21.67em 0 0 var(--body-color-medium), -50em -26em 0 0 var(--body-color-medium), -50em -30.33em 0 0 var(--body-color-medium), -50em -34.67em 0 0 var(--body-color-medium), -50em -39em 0 0 var(--body-color-medium), -50em -43.33em 0 0 var(--body-color-medium), -40em -17.33em 0 0 var(--body-color-dark), -40em -21.67em 0 0 var(--body-color-dark), -40em -26em 0 0 var(--body-color-dark), -40em -30.33em 0 0 var(--body-color-dark), -40em -34.67em 0 0 var(--body-color-dark), .33em 0 0 0 var(--body-color-dark); }
	66.66% { border-top-color: var(--body-color-light); box-shadow: -50em -8.67em 0 0 var(--body-color-dark), -50em -13em 0 0 var(--body-color-dark), -50em -17.33em 0 0 var(--body-color-dark), -50em -21.67em 0 0 var(--body-color-dark), -50em -26em 0 0 var(--body-color-dark), -50em -30.33em 0 0 var(--body-color-dark), -50em -34.67em 0 0 var(--body-color-dark), -50em -39em 0 0 var(--body-color-dark), -50em -43.33em 0 0 var(--body-color-dark), -40em -17.33em 0 0 var(--body-color-light), -40em -21.67em 0 0 var(--body-color-light), -40em -26em 0 0 var(--body-color-light), -40em -30.33em 0 0 var(--body-color-light), -40em -34.67em 0 0 var(--body-color-light), .33em 0 0 0 var(--body-color-light); }
	100% { border-top-color: var(--body-color-medium); box-shadow: -50em -8.67em 0 0 var(--body-color-light), -50em -13em 0 0 var(--body-color-light), -50em -17.33em 0 0 var(--body-color-light), -50em -21.67em 0 0 var(--body-color-light), -50em -26em 0 0 var(--body-color-light), -50em -30.33em 0 0 var(--body-color-light), -50em -34.67em 0 0 var(--body-color-light), -50em -39em 0 0 var(--body-color-light), -50em -43.33em 0 0 var(--body-color-light), -40em -17.33em 0 0 var(--body-color-medium), -40em -21.67em 0 0 var(--body-color-medium), -40em -26em 0 0 var(--body-color-medium), -40em -30.33em 0 0 var(--body-color-medium), -40em -34.67em 0 0 var(--body-color-medium), .33em 0 0 0 var(--body-color-medium); }
}