/*
 * 26 January 2021
 * SVG-in-CSS Flipping Checkerboard Pattern
 * Inspired by 👉 https://codepen.io/Krishnaa_Gupta/pen/KKXOWJK
 * drop-shadow version 👉 https://codepen.io/ShadowShahriar/pen/JjOPZGN
 * Temani's rebound (⚠ Chrome-Only) 👉 https://codepen.io/t_afif/full/gOXObxx

 * ✔ cross-browser
 * ✔ no DIV, no pseudo-elements
 * ✔ only 3 CSS declarations
 * ✔ highly customizable with CSS variables
 * ⚠ uses encoded inline SVG as background-image
 *
 */

/* === uncomment to see how it works! 👇 === */
/* :root{
	background-color: #000;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
} */

html {
	height: 100%;
	background-size: 30vmin;
	background-image: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 10 10' width='10' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E%0Adiv%7B \
	\
	\
	--t: 3s; --c1: whitesmoke; --c2: brown; --e: cubic-bezier(.68,-0.55,.27,1.55); --d: -1; \
	\
	\
	%7D div%7B--o:scale(0.707106) rotate(45deg) translate(calc(100%25*var(--x,0)),calc(100%25*var(--y,0)));%0A position:absolute;left:0;top:0;width:100%25;height:100%25%7D%0A.a%7Bbackground:var(--c2);transform:var(--o);animation:r var(--e) var(--t) infinite %7D%0A.b%7Banimation:f steps(1) var(--t) infinite%7D%0A.x%7Bbackground:var(--c1);transform:var(--o) rotate(0deg); animation:cr var(--e) var(--t) infinite, i steps(1) var(--t) infinite %7D .A%7B--x:1%7D%0A.B%7B--x:-1%7D%0A.C%7B--y:1%7D%0A.D%7B--y:-1%7D @keyframes i%7B0%25,50%25%7Bz-index: -1 %7D 50%25,100%25%7Bz-index: 1%7D%7D%0A@keyframes f%7B0%25,50%25%7Bbackground:var(--c1)%7D 50%25,100%25%7B background:var(--c2)%7D%7D%0A@keyframes r%7B50%25,100%25%7Btransform:scale(0.707106) rotate(135deg)%7D%7D%0A @keyframes cr%7B0%25,50%25%7Btransform:var(--o) rotate(calc(-90deg * var(--d, 1)))%7D%7D%0A%3C/style%3E%3Cdiv class='b'%3E%3C/div%3E%3Cdiv class='A x'%3E%3C/div%3E%3Cdiv class='B x'%3E%3C/div%3E%3Cdiv class='C x'%3E%3C/div%3E%3Cdiv class='D x'%3E%3C/div%3E%3Cdiv class='a'%3E%3C/div%3E%3C/div%3E %3C/foreignObject%3E%3C/svg%3E");
}