.box {
  width: 100px;
  height: 100px;
  background: #000;
}

.animation {
  animation: 2s ease 0s 1 normal none running animation;
}
.circle {
  width: 100vh;
 //   animation: spin 20s linear infinite;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left:50%;
    margin-left:-50vh;
}
.st0 {
	fill: #42EEEE;
	fill-opacity:0.3; 
	stroke-opacity:0.5;
}

.st1 {
	fill: #EE42EE;
	fill-opacity:0.3; 
	stroke-opacity:0.5;
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

@keyframes animation {
  0% {
    transform: scale(.3);
  }

  50% {
    transform: scale(.6) rotate(-45deg);
    background: green;
  }

  100% {
    transform: scale(1) rotate(180deg);
    background: yellow;
  }
}

html{
	height:100vh;
	overflow: hidden;
}

body {
background-color: #fcfcfc;
background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
	overflow:hidden;
}