assets/leetcode-total-info-circle.svg


<svg 
	viewBox="0 0 650 300"
	height="200px"
	width="600px" 
	xmlns="http://www.w3.org/2000/svg">
<style>
.label {
	font: bold 25px sans-serif;
	color: #404040;
	-webkit-text-stroke: 1px white;
  }
.name {
	font: bold 20px sans-serif;
	color: #404040;
  }

.line {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 3.5s ease-in-out forwards;	
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.totalSum {
	font: 50px sans-serif;
}

.totalSumLabel {
	font: 20px sans-serif;
}

.path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: dash 3.5s ease-in-out forwards;	
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}
  
@keyframes dash {
	to {
		stroke-dashoffset: 0;
	}
}

</style>
<g stroke="#E6E2E1" fill="none" stroke-width="2">
	<circle cx="20" cy="150" r="125" />
	<circle cx="20" cy="150" r="105" />
	<circle cx="20" cy="150" r="85" />
</g>
<g fill="none" stroke-width="20">
	<line x1="180" y1="120" x2="550" y2="120" stroke="#a5d9c1" />
	<line x1="180" y1="190" x2="550" y2="190" stroke="#ffdb99" />
	<line x1="180" y1="260" x2="550" y2="260" stroke="#f5977f" />
</g>

	<g fill="none" stroke-width="20" class="line">
		<line x1="180" y1="120" x2="213" y2="120"  stroke="#7BC8A4" />
		<line x1="180" y1="190" x2="195" y2="190" stroke="#FFC65D" />
		<line x1="180" y1="260" x2="182" y2="260" stroke="#F16745" />
	</g>
	
	<g fill="none" stroke-width="20" stroke-linecap="round" class="path">
	<path d="M 20 25 A 125 125 45 0 1 86 43" stroke="#7BC8A4"/>
	<path d="M 20 45 A 105 105 45 0 1 45 48" stroke="#FFC65D"/>
	<path d="M 20 65 A 85 85 45 0 1 20 65" stroke="#F16745"/>
	
	</g>
	
	 <g class="name">
		<text x="180" y="100" fill="#7BC8A4" >Easy</text>
		<text x="240" y="100" fill="#404040">74</text>
		<text x="270" y="100" fill="#ABABA1">/808</text>
		<text x="430" y="100" fill="#989894">Beats 85.6%</text>

		<text x="180" y="170" fill="#FFC65D" >Medium</text>
		<text x="270" y="170" fill="#404040">72</text>
		<text x="300" y="170" fill="#ABABA1">/1683</text>
		<text x="430" y="170" fill="#989894">Beats 80.8%</text>

		<text x="180" y="240" fill="#F16745" >Hard</text>
		<text x="240" y="240" fill="#404040">5</text>
		<text x="270" y="240" fill="#ABABA1">/714</text>
		<text x="430" y="240" fill="#989894">Beats 46.5%</text>
	</g>
	<g> 
		<text x="-20" y="165" fill="#404040" class="totalSum" >151</text>
		<text x="-10" y="200" fill="#8A8883" class="totalSumLabel" >Solved</text>
	</g>
<g class="label"> 
	<text x="200" y="50" fill="#3288bd" >Leetcode Solved Problems:</text>
</g>

</svg>