placing a circle on a picture I have in my css

.circle{

    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: black;
    line-height: 0;
    position: absolute;
    right:-20px; top:-2px;
    z-index: 2;
}
.circle:after {
    content: "";
    display: block;
    padding-bottom: 100%;
    position: relative;
    
    
  }
.circle-txt {
    /* (E1) CENTER TEXT IN CIRCLE */
    position: absolute;
    bottom: 50%;
    width: 100%;
    text-align: center;
   
    /* (E2) THE FONT - NOT REALLY IMPORTANT */
    font-family: "font";
    font-size:inherit;
    
  }

:root{
    --pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z"
}
.frame{
    padding-right: 1px;
    height: 579px;
    width: 595px;
    clip-path: path(var(--pic));
    margin-left: 8%;
    margin-bottom: 5%;
    position: relative;
    z-index: 1;
    
    
}
img{
    height: 579px;
    width: 595px;
}

<div class="frame">
    <img src="1.png">
    <div class="circle">
        <div class="circle-txt">فریلنسینگ چیست؟</div>
    </div>
</div>

I'm trying to put a circle on the corner of a frame like the picture but only the part of the circle that's inside of the frame can be seen. the part that i marked with x is invisible. i would appreciate if anyone can tell me what is that I'm doing wrong.

how it looks how i want it to look