.animation{
	height:364px;
	position:relative;
	margin: auto;
}
.animation>.actor{
	z-index:2;
	position:absolute;
	left:0;
	width:100px;
	margin-left:-50px;
	text-align:center;
}
.animation>.actor>span{
	font-size:8pt;
	font-weight:bold;
	background:#FFF;
	color:#000;
	display:inline-block;
	padding:4px 8px;
	border-radius:4px;
	border:solid 1px rgba(var(--theme),.5);
	box-shadow:0 5px 18px rgba(91,130,230,.1)
}
@keyframes flow-opposite {
	100% {
		stroke-dashoffset: 0;
	}
}
.animation svg{
	width:100%;
	height:100%;
}

.animation .line{
	fill:none;
	stroke:#fbfbfb;
	stroke-width: 5;
}

.animation .line.dots{
	fill:none;
	stroke:rgb(var(--theme));
	stroke-dasharray: 0, 8;
	stroke-width: 3;
    stroke-dashoffset: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: 1s linear 0s infinite normal none running flow-opposite !important;
}
.animation .line.dots.slow{
	stroke-dashoffset: 16;
	stroke-dasharray: 0, 16;
}