How to make right arc in a circle using SVG? - html

Question

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.

Answer 1

As I've commented I would put both circles in svg. For the image you can use clipPath to cut it in a circle shape.
For the other circle I'm usinga mask so that you can see through, since the mask is cutting a circular hole in it.
In CSS I've added a background to the svg. You can remove it
svg{width:300px; background:#efefef}
<svg viewBox="0 0 60 40">
<defs>
<mask id="m">
<rect fill="white" x="0" y="0" width="100" height="40" />
<circle cx="40" cy="20" r="18" fill="blabk" />
</mask>
<clipPath id="clip">
<circle cx="40" cy="20" r="16" fill="00f" />
</clipPath>
</defs>
<circle opacity="1" cx="20" cy="20" r="16" fill="#F6BB43" mask="url(#m)" />
<image href="https://assets.codepen.io/222579/darwin300.jpg" x="21" y="2" width="35" height="35" clip-path="url(#clip)" />
</svg>

Answer 2

Taking enxanetas'answer
Problem with inline SVGs is the ID values need to be unique per SVG,
or any following SVG will use the first defined mask/clip-path IDs
You can create those IDs dynamically:
svg {
width: 250px;
background: #efefef
}
<svg-avatar fill="#4267B2" href="https://i.imgur.com/iCKbSvQ.png"></svg-avatar>
<svg-avatar href="https://i.imgur.com/zTUDE6c.png"></svg-avatar>
<script>
customElements.define("svg-avatar", class extends HTMLElement {
connectedCallback() {
let id = n => n + Math.random() * 1e18; // create a unique id
let maskid = id("mask");
let clipid = id("clip");
this.innerHTML =
`<svg viewBox="0 0 60 40">
<defs>
<mask id="${maskid}"><rect fill="white"x="0"y="0"width="100"height="40"/><circle cx="40"cy="20"r="18"/></mask>
<clipPath id="${clipid}"><circle cx="40"cy="20"r="16"fill="00f"/></clipPath>
</defs>
<circle mask="url(#${maskid})"fill="${this.getAttribute("fill")||"#F6BB43"}"opacity="1"cx="20"cy="20"r="16"/>
<image href="${this.getAttribute("href")}"clip-path="url(#${clipid})"x="21"y="2"width="35"height="35"/>
</svg>`
}});
</script>

Answer 3

If you don't like the alternative you could just add another white circle that overlaps the existing one.... look here
<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>
<circle opacity="1" cx="47" cy="20" r="19" fill="#FFFFFF" stroke="white" stroke-width="2">
</circle>
</svg>
<span class="ant-avatar"> </span>
</div>
That will generate the arc but you still to set the negative margin-left to .ant-avatar to overlap the svg...

Answer 4

.ant-avatar-group {
display: inline-flex;
position:relative;
}
.ant-avatar {
position:absolute;
left:25px;
width: 38px;
height: 38px;
line-height: 38px;
font-size: 19px;
background: #ccc;
border:3px solid white;
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>

Answer 5

circle in svg should have cx="20" because the circle can't go out of it's parent... you should overlap the .ant-avatar over the svg using something like
.ant-avatar {
margin-left: -10px;
}