JSFiddle - React, Tailwind, and code Playground

HTML

<div class='rectangle'>

<div class='circle'>
    <div class='arc'></div>
    <div class='arc2'></div>
</div>
</div>

CSS

.rectangle {
  background-color: white;
  width:200px;
  height:200px;
  border:solid 1px navy;
}
.circle {
    position: relative;
    width: 70px; height: 70px;
    border-radius: 50%;
    background: white;
    margin-top:calc(50% - 35px);
    margin-left:calc(100% - 50px);
}
.arc {
    overflow: hidden;
    position: absolute;
    top: -1px; right: 50%; bottom: 50%; left: -1px;
    transform-origin: 100% 100%;
    transform: rotate(115deg);
}
.arc:before {
    box-sizing: border-box;
    display: block;
    border: solid 1px navy;
    width: 200%; height: 200%;
    border-radius: 50%;
    content: '';
}

.arc2 {
    overflow: hidden;
    position: absolute;
    top: -1px; right: 50%; bottom: 50%; left: -1px;
    transform-origin: 100% 100%;
    transform: rotate(155deg);
}
.arc2:before {
    box-sizing: border-box;
    display: block;
    border: solid 1px navy;
    width: 200%; height: 200%;
    border-radius: 50%;
    content: '';
}