Half transparent circle in another half circle - css

Question

I have to make such contruction like this one on the picture. There is a bubble with some fancy ending and I don't know, how to make this half transparent circle inside it.
How can I do that?
I have some image as a background.
.bubble {
background-color: #34bc74;
border-top-right-radius: 0;
border-radius: 10px;
line-height: 18px;
margin: 100px 0 0 0;
padding: 15px 65px 25px 15px;
position: relative;
width: 200px;
}
.circle {
background-color: #34bc74;
border-bottom-right-radius: 140px;
border-top-right-radius: 140px;
border-left-color: transparent;
width: 70px;
height: 140px;
position: absolute;
z-index: 1;
top: -70px;
right: -70px;
overflow: hidden;
}
.circle:after {
height: 70px;
width: 35px;
left: -35px;
z-index: 2;
content: '';
border-radius: 70px;
position: absolute;
// border: 35px solid $green;
// box-shadow: 0px 300px 0px 300px #448CCB;
}
<div class="bubble">
Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
<div class="circle"></div>
</div>

Answer 1

You could try create the shape using svg masking.
Here's some more info from MDN
(poor) example...
body {
background: url(https://unsplash.it/1000x1000);
}
.bubble {
background-color: #34bc74;
border-top-right-radius: 0;
border-radius: 10px;
line-height: 18px;
margin: 100px 0 0 0;
padding: 15px 65px 25px 15px;
position: relative;
width: 200px;
}
.bubble svg {
position: absolute;
right: -4em;
top: -1em;
}
<div class="bubble">
Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
<svg width="100" height="100">
<defs>
<mask id="inner-circle">
<rect width="100%" height="100%" fill="white"/>
<circle r="28" cx="40" cy="20" fill="black"/>
</mask>
</defs>
<circle id="curve" r="50" cx="50" cy="50" fill="#34bc74" mask="url(#inner-circle)" />
</svg>
</div>

Answer 2

Using a combination of pseudo-elements and box-shadow properties you can get close to the intended result.
Experiment and adjust height, width, and box-shadow values as required.
.bubble {
background-color: #34bc74;
border-top-right-radius: 0;
border-radius: 10px;
line-height: 18px;
margin: 100px 0 0 0;
padding: 15px 65px 25px 15px;
position: relative;
width: 200px;
}
.circle {
width: 155px;
height: 140px;
border-radius: 100%;
position: absolute;
top: -70px;
right: -45px;
overflow: hidden;
z-index: -1;
}
.circle:after {
content: "";
width: 112px;
height: 87px;
border-radius: 100%;
box-shadow: 55px -15px 0 0 #34bc74;
position: absolute;
z-index: 9;
overflow: hidden;
}
.circle:before {
content: "";
width: 112px;
height: 88px;
border-radius: 100%;
box-shadow: 72px 52px 0 0 #34bc74;
position: absolute;
z-index: 9;
overflow: hidden;
}
<div class="bubble">
Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id Donec viverra sodales imperdiet. Aliquam eget ante nec nulla hendrerit dignissim sit amet id
<div class="circle"></div>
</div>