Circulo Com Ponto No Meio

Como criar e usar um círculo com ponto no meio corretamente

Esse símbolo aparece o tempo todo em interfaces, diagramas técnicos e até em planilhas. Na prática, é simplesmente um círculo com um ponto central, mas a forma como você o implementa muda completamente o resultado final. Vou explicar direto. Primeiro, a definição básica: esse é um elemento gráfico composto por uma borda circular com um ponto sólido no centro geométrico. É usado como ícone de reprodução (o famoso botão de play), como marcador em mapas, como indicador de status em dashboards, e em desenhos técnicos para representar o centro de uma circunferência ou o ponto nulo em sistemas de coordenadas. O símbolo Unicode mais próximo disso é o (U+25CF BLACK CIRCLE), embora esse já venha preenchido e não separe claramente a borda do ponto.

O que é um círculo com ponto no meio na prática

Na minha experiência trabalhando com design de interface e documentação técnica, encontrei um problema específico que todo mundo acaba enfrentando: a diferença entre um círculo vazio com ponto no meio (o que a maioria das pessoas quer dizer ao buscar por "círculo com ponto no meio") e os ícones pré-fabricados que aparecem nos pacotes de símbolos. A maioria dos kits vetoriais que você baixa da internet entrega um ícone onde o círculo externo tem uma espessura arbitrária e o ponto interno está levemente deslocado do centro. Isso parece bobo até você precisar alinhá-los em escala diferente ou usá-los em um diagrama técnico onde a simetria importa. O trabalho-around que eu uso é simples e funciona há anos: no Illustrator ou no Inkscape, crio duas formas separadas. Um círculo com stroke e fill transparente, e outro círculo menor totalmente preenchido. Depois de posicionado exatamente no centro, grupo os dois e salvo como um símbolo ou componente. Assim, quando precisar redimensionar, posso ajustar a espessura do stroke independentemente do tamanho do ponto. Eu costumo definir o ponto interno com cerca de 35 a 40% do diâmetro do círculo externo. Isso dá uma proporção visualmente equilibrada na maioria dos contextos.

Opções para obter esse símbolo

Existem várias formas de colocar esse elemento no seu projeto. A mais rápida é usar caracteres Unicode. O (U+25CF) é um círculo preenchido inteiro, o que não serve se você precisa da borda separada. Já o (U+25CB WHITE CIRCLE) dá apenas o contorno sem o ponto. Nenhum caractere Unicode padrão combina os dois exatamente como você precisa, então para uso puro em texto, aí já é limitado. Se você está num documento de texto e precisa apenas marcar algo rapidamente, pode copiar e colar o símbolo de bancos como o site de Unicode ou usar o atalho do próprio sistema. No Word, por exemplo, você vai em Inserir > Símbolo e procura por "circle". No macOS, Command+Control+Espaço abre o visualizador de emojis e caracteres onde você encontra essas opções. Para projetos de design ou desenvolvimento, a melhor opção é usar SVG. Um círculo com ponto no meio em SVG fica assim:

<svg width="64" height="64" viewBox="0 0 64 64">
<circle cx="32" cy="32" r="28" fill="none" stroke="currentColor" stroke-width="4"/>
<circle cx="32" cy="32" r="10" fill="currentColor"/>
</svg> Isso é escalável, leve, e você controla cada parâmetro. O ponto `currentColor` herda a cor do texto ou do elemento pai, o que facilita manter consistência visual sem precisar ajustar cores manualmente em cada lugar onde o ícone aparece.

Como fazer isso no Excel e em ferramentas de escritório

Muita gente precisa disso em planilhas ou apresentações e não sabe que a solução é mais simples do que baixar um pacote de ícones. No Excel, vá em Inserir > Formas > Círculo. Desenhe um círculo. Copie e cole outro círculo menor dentro dele. No círculo maior, vá em Preenchimento da Forma > Sem preenchimento e ajuste a Espessura da Linha. No círculo menor, use Preenchimento da Forma com a cor desejada. Posicione os dois usando as guias de alinhamento para centralizá-los perfeitamente. No Google Slides ou no PowerPoint o processo é idêntico. A vantagem dessas ferramentas é que o grupo resultante pode ser copiado e colado quantas vezes precisar, e o alinhamento permanece preciso mesmo se você mover ou redimensionar o grupo todo.

Problemas comuns e o que evitar

O erro mais frequente que eu vejo é tentar criar esse símbolo usando o ícone de "play" dos pacotes de ícones populares. A direção triangular do play NÃO é um círculo com ponto no meio. Isso parece óbvio, mas em buscas por "círculo com ponto no meio" muitos resultados de bibliotecas como Font Awesome ou Material Icons entregam o ícone de play porque a similaridade visual enganosa faz com que esses ícones apareçam nos primeiros lugares dos mecanismos de busca. Se você precisa de um círculo com borda e ponto, verifique sempre se o ícone tem centro vazio entre a borda e o ponto. Outro problema recorrente é o antialiasing em resoluções baixas. Quando você reduz esse ícone para 16x16 pixels em uma interface, a borda fina do círculo muitas vezes desaparece ou fica com aspecto borrado. A solução prática é garantir que o stroke mínimo seja de pelo menos 2 pixels na resolução final de exibição, ou usar um caminho vetorial em vez de formas com stroke se a qualidade visual for crítica. Também é importante notar que esse tipo de símbolo tem limitações sérias em contextos de acessibilidade. Um círculo com ponto no meio usado como indicador de estado não passa em testes de contraste se a cor do stroke for muito clara sobre fundo claro. Eu já vi projetos inteiros sendo reprovados em auditorias de acessibilidade por causa de ícones assim mal configurados. Sempre teste com um checker de contraste antes de entregar.

Alternativas quando o círculo com ponto no meio não funciona

Se o seu caso de uso é especificamente um botão de reprodução, considere usar o ícone de play padrão (triângulo) em vez de forçar um círculo com ponto. A convenção de UX é tão estabelecida que mudar isso pode confundir usuários. Por outro lado, se você precisa de um marcador de localização ou de um ponto central em um diagrama, existe o símbolo (U+2299 OPERATOR DOT CIRCLE) que já traz uma interpretação mais matemática e pode ser mais adequado dependendo do contexto técnico. Se o problema é desempenho em uma interface com muitos desses ícones renderizados, SVG inline é geralmente mais rápido do que bibliotecas de ícones baseadas em fontes, especialmente em navegadores mais antigos. A diferença costuma ser de milissegundos por renderização, mas em listas com centenas de itens, isso se acumula e fica perceptível.