<div class="container">
	
	<svg class="svg-box">
		<rect 
					x="20" 
					y="20"
					rx="5"
					ry="5"
					width="58" 
					height="58" 
					fill="#eee"
					stroke="#C4C4C4"
					stroke-width="2"
					style="stroke-dasharray:8 5; stroke-dashoffset: 10"
					>
		</rect>
		
		<circle 
					cx="130"
					cy="50"
					r="30"
					fill="#eee"
					>
		</circle>
		
		<ellipse
				 rx="40"
				 ry="30"
				 cx="220"
				 cy="50"
				 fill="#eee"
				 >
		</ellipse>
		
		<line
					x1="280"
					y1="50"
					x2="380"
					y2="50"
					stroke="#ddd"
					stroke-width="2"
					>
		</line>
		
		<polyline
			points="20 100, 60 140, 100 100, 140 140"
			stroke="#888"
			stroke-width="2"
			fill="transparent" />
		
		<polygon 
			points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"
			fill="#eee"/>
	
		<text
			x="180"
			y="140"
			class="svg-text"
			>MTJK</text>
		
		<path 
			class="beat-loader" 
			d="M100,240 l50,0 l10,-40 l10,80 l20,-120 l10,100 l10,-20 l30 0"
		/>
		
	</svg>
	
	

</div>
html,body { height: 100%; }
*,*:before,*:after { box-sizing: border-box; }
body {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px;
}
.container {
	width: 90%;
	padding: 30px 0;
}
.svg-box { 
	height: 500px; width: 100%; border-top: 1px solid #eee; border-left: 1px solid #eee; 
	background-image: linear-gradient(to right, transparent 95%, transparent 95%, #eee 100%),linear-gradient(to bottom, transparent 95%, transparent 95%, #eee 100%);
	background-size: 20px 20px;
}
.svg-text {
	font-size: 55px;
	font-family: Arial;
	fill: #eee;
	stroke: #000;
	stroke-width: 2px;
	stroke-dasharray: 0 1000;
	stroke-linecap: butt;
	transition: all 2s linear;
	&:hover{
		cursor: pointer;
		stroke-dasharray: 1000 1000;
	}
}

.beat-loader{
	fill: none;
	stroke-width: 1;
	stroke: #000;
	stroke-dasharray: 0 10000;
	animation: draw 2.5s linear infinite both;
}

@keyframes draw { to { stroke-dasharray: 1000 10000;} }
View Compiled
Rerun