I am trying to make an arc like cut at the right of svg circle.
Current Result:
.ant-avatar-group {
display: inline-flex;
}
.ant-avatar {
width: 38px;
height: 38px;
line-height: 38px;
font-size: 19px;
background: #ccc;
border-radius: 50%;
}<div class="ant-avatar-group">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.15" cx="20" cy="20" r="19" fill="#F6BB43" stroke="white" stroke-width="2">
</circle>
</svg>
<span class="ant-avatar"> </span>
</div>Expected Result:
Code Tried:
Changed, cx="20" to cx="30"
Also adding,
margin-left: -8px; and border-left: 4px solid #fff to .ant-avatar makes the avatar icon to distort (loose its original size) of the right avatar circle.
.ant-avatar-group {
display: inline-flex;
}
.ant-avatar {
width: 38px;
height: 38px;
line-height: 38px;
font-size: 19px;
background: #ccc;
border-radius: 50%;
}<div class="ant-avatar-group">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.15" cx="30" cy="20" r="19" fill="#F6BB43" stroke="white" stroke-width="2">
</circle>
</svg>
<span class="ant-avatar"> </span>
</div>But this doesn't give the expected output as there needs to be arc like cut. Kindly help me to achieve the result making the svg circle with right arc as like the given expected result.
Big thanks in advance.