body,html {
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	background:rgb(10,21,117);
}
main {
	width:200px;
	height:500px;
	/* border:1px solid black;
	*/
}
svg {
	width:200px;
	height:50px;
	margin-bottom:20px;
	/* background:#ccc;
	*/
        cursor:default;
}
rect#shape {
	fill:transparent;
	stroke:white;
	stroke-width:6px;
	stroke-dasharray:0 500;
	stroke-dashoffset:0;
	transition:0.5s ease;
	/* animation:dong 2s ease-in-out infinite alternate;
	*/
}
svg:hover #shape {
	stroke-dasharray:500 0;
	stroke-width:6px;
	stroke:rgb(32,213,226);
}
@keyframes dong {
	100% {
	stroke-dasharray:500 0;
	stroke-width:6px;
	/* stroke-dashoffset:-250;
	*/
      stroke:white;
}
}rect#one {
	fill:transparent;
	stroke:yellowgreen;
	stroke-width:6px;
	stroke-dasharray:0 500;
	stroke-dashoffset:250;
	animation:dong1 2s ease-in-out infinite alternate;
}
@keyframes dong1 {
	100% {
	stroke-dasharray:500 0;
	stroke-width:6px;
	/* stroke-dashoffset:0;
	*/
            stroke:greenyellow;
}
}rect#two {
	fill:transparent;
	stroke:rgb(233,43,43);
	stroke-width:6px;
	stroke-dasharray:200 300;
	stroke-dashoffset:250;
	animation:dong2 2s ease-in-out infinite alternate;
}
@keyframes dong2 {
	100% {
	stroke-dasharray:200 0;
	stroke-width:6px;
	/* stroke-dashoffset:0;
	*/
            stroke:rgb(233,43,43);
}
}rect#three {
	fill:transparent;
	stroke:rgb(233,220,43);
	stroke-width:6px;
	stroke-dasharray:50 450;
	stroke-dashoffset:50;
	animation:dong3 2s ease-in-out infinite alternate;
}
rect#threes {
	fill:transparent;
	stroke:rgb(233,103,43);
	stroke-width:6px;
	stroke-dasharray:50 450;
	stroke-dashoffset:-200;
	animation:dong3 2s ease-in-out infinite alternate;
}
@keyframes dong3 {
	100% {
	stroke-dasharray:500 0;
	stroke-width:6px;
	/* stroke-dashoffset:-250;
	*/
            stroke:rgb(233,220,43);
}
}rect#four {
	fill:transparent;
	stroke:skyblue;
	stroke-width:6px;
	stroke-dasharray:50 450;
	stroke-dashoffset:150;
	transition:0.5s ease;
	/* animation:dong4 2s ease infinite alternate;
	*/
}
svg:hover #four {
	stroke-dasharray:250 250;
}
rect#fours {
	fill:transparent;
	stroke:blue;
	stroke-width:6px;
	stroke-dasharray:50 450;
	stroke-dashoffset:200;
	transition:0.5s ease;
	/* animation:dong4s 2s ease infinite alternate;
	*/
}
svg:hover #fours {
	stroke-dasharray:250 50;
}
@keyframes dong4 {
	100% {
	stroke-dasharray:250 250;
}
}@keyframes dong4s {
	100% {
	stroke-dasharray:250 50;
}
}text {
	fill:white;
	font-size:30px;
	transition:0.5s linear;
}
svg:hover text {
	fill:rgb(30,129,223);
}
svg:hover .four {
	fill:rgb(231,105,21);
}
#five {
	fill:transparent;
	stroke:rgb(255,0,179);
	stroke-width:6px;
	stroke-dasharray:50 400;
	stroke-dashoffset:-75;
	stroke-opacity:0;
	animation:dong5 1s linear infinite alternate;
}
@keyframes dong5 {
	100% {
	stroke-opacity:1;
	stroke:rgb(192,44,180);
	stroke-dasharray:50 20;
}
}#six {
	fill:transparent;
	stroke:rgb(0,255,21);
	stroke-width:6px;
	stroke-dasharray:50 400;
	stroke-dashoffset:50;
	animation:dong6 1s linear infinite alternate;
}
@keyframes dong6 {
	100% {
	stroke:rgb(231,250,59);
	stroke-dasharray:20 1;
}
}