partial circle in svg
HTML
<div class="classy">
<svg width="100%" height="100%" viewBox="-1 -1 103 103">
<circle cx="51" cy="51" r="50"/>
</svg>
</div>
CSS
.classy{
width: 100px;
height: 100px;
position:relative;
border: 1px solid blue;
}
.classy svg circle {
stroke: green;
fill: none;
stroke-dasharray: 1150;
stroke-dashoffset: 890;
}