html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;



  display: flex;
  justify-content: center;
  align-items: center;



}

canvas {
  max-width: 100%;
  max-height: 100%;

  margin: auto;

  overflow: auto;
  object-fit: contain;

  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  filter: drop-shadow(0 0 1.5rem #252525);
}

.center-body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	/****** center box
	width: 300px;
	height: 300px;
	border: solid 1px #aaa; */
}
body {

}

:root {
  --c1: #eb4034;
  --c2: #3a73d6;
  --c3: #3ad649;
  --c4: #d63ab7;
  --w: 0;
  --h: 0;
}

.box-L {
	position: absolute;
  width: var(--w);
	height: var(--h);
	overflow: hidden;
}
.box-L::after {
	content: "";
	display: block;
	background-color: var(--c1);
	position: absolute;
	height: 100%;
  	width: 100%;
  	transform-origin: left;
  	scale: 0%;
	animation: 4s ease-out infinite LSide;
}
.box-T {
	position: absolute;
  width: var(--w);
	height: var(--h);
	overflow: hidden;
}
.box-T::after {
	content: "";
	display: block;
	background-color: var(--c2);
	position: absolute;
	height: 100%;
  	width: 100%;
  	transform-origin: top;
  	scale: 0%;
	animation: 4s ease-out infinite TSide;
}
.box-R {
	position: absolute;
  width: var(--w);
	height: var(--h);
	overflow: hidden;
}
.box-R::after {
	content: "";
	display: block;
	background-color: var(--c3);
	position: absolute;
	height: 100%;
  	width: 100%;
  	transform-origin: right;
  	scale: 0%;
	animation: 4s ease-out infinite RSide;
}
.box-B {
	position: absolute;
  width: var(--w);
	height: var(--h);
	overflow: hidden;
}
.box-B::after {
	content: "";
	display: block;
	background-color: var(--c3);
	position: absolute;
	height: 100%;
  	width: 100%;
  	transform-origin: top;
  	scale: 0%;
	animation: 4s ease-out infinite BSide;
}

@keyframes LSide {
	0% {
		scale: 0% 100%;
	}
	25% {
		scale: 100% 100%;
	}
	50% {
		scale: 100% 100%;
	}
  	75% {
		scale: 0% 100%;
	}
}

@keyframes TSide {
	25% {
		scale: 100% 0%;
	}
	50% {
		scale: 100% 100%;
	}
	75% {
		scale: 100% 100%;
	}
  	100% {
		scale: 100% 0%;
	}
}
@keyframes RSide {
	50% {
		scale: 0% 100%;
	}
	75% {
		scale: 100% 100%;
	}
	75.1% {
		scale: 0% 100%;
	}
}
@keyframes BSide {
	0% {
		scale: 100% 0%;
	}
 	 74.99% {
    	scale: 100% 0%;
 	 }
	75% {
		scale: 100% 100%;
	}
	100% {
		scale: 100% 0%;
	}
}