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

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 >
<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 > </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 >
<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 > </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.

CodePudding user response：

As I've commented I would put both circles in svg. For theimage you can use clipPath to cute 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>

CodePudding user response：

If you don't like the alternative you could just add another white circle that overlaps the existing one.... look here

 <div >
  <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 > </span>
</div>

That will generate the arc but you still to set the negative margin-left to .ant-avatar to overlap the svg...

CodePudding user response：

.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 >
    <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 > </span>
  </div>

CodePudding user response：

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;
}