css-paint-polyfill/dist/demo/style.css

A polyfill for the CSS Paint API, with special browser optimizations.

body {
	font: 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
pre {
	margin: 0;
}
.ripple {
	position: relative;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	margin: 10px;
	font-size: 5em;
	line-height: 1;
	background-color: rgb(255,64,129);
	border: 0;
	box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
	color: white;
	--ripple-x: 0;
	--ripple-y: 0;
	--ripple-color: rgba(255,255,255,0.54);
	--animation-tick: 0;
}
.spin::before {
	content: '';
	display: block;
	position: absolute;
	box-sizing: border-box;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px dashed rgba(255,255,255,0.5);
	pointer-events: none;
	animation: spin 60s linear forwards infinite;
}
.ripple:nth-of-type(2) {
	--ripple-color: rgba(0,0,0,0.8);
	--ripple-speed: 2;
}
.ripple:nth-of-type(3) {
	font-size: 3em;
	width: 200px;
	height: 200px;
	background-color: #55815b;
	--ripple-color: #5315cf;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@media (min-width: 600px) {
	.ripple {
		background-color: rgb(129,64,255);
	}
}
.ripple:focus {
	outline: none;
}
.ripple.animating {
	background-image: paint(ripple);
}