Vou dar uma resposta que pode ser considera um pouco deselegante, mas como não foram colocadas regras a não ser que seja com CSS e sem border-radius
ai vai mais uma sugestão (mesmo que "polêmica")...
Primeiro vc vai precisar de uma fonte bem geométrica tipo a Futura, que tem a letra O como um circulo perfeito. Outro detalhe, quanto mais "grosso" o traço da fonte mais fácil de fazer o efeito, então quanto mais Bold melhor
No meu exemplo eu usei uma fonte nesses requisitos que achei no Google Fonts a Montserrat
Depois disso eu apenas criei alguns estilos de css para elementos ::after que usei para cobrir os "olhos" dos caracteres. Resumindo basta usar pseudo elementos para tampar os buracos da fonte e ter o circulo perfeito e outras formas...
Veja o resultado no exemplo:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: azure;
}
.container {
position: relative;
z-index: 1;
}
.texto {
font-family: 'Montserrat', Verdana, sans-serif;
font-weight: bold;
color: red;
font-size: 10rem;
position: relative;
text-transform: uppercase;
}
.texto-o::after, .texto-p::after, .texto-a::after {
content: "";
position: absolute;
background-color: red;
z-index: -1;
}
.texto-o::after {
top: 30%;
left: 25%;
width: 50%;
height: 45%;
}
.texto-p::after {
top: 30%;
left: 20%;
width: 60%;
height: 25%;
background-color: rgba(255,0,0,0.75);
}
.texto-a::after {
top: 30%;
left: 35%;
width: 30%;
height: 35%;
background-image: url(http://unsplash.it/40/40);
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900" rel="stylesheet">
<div class="container">
<span class="texto texto-o">o</span>
<span class="texto texto-p">p</span>
<span class="texto texto-a">a</span>
<span class="texto">!</span>
</div>
OBS: funciona do IE8 pra cima https://caniuse.com/#feat=css-gencontent
border-radius
para a maior parte das necessidades sempre vai ser mais prático que qualquer outra coisa.