Como Fazer Um Coração Perfeito

Construir um coração perfeito não é sobre seguir uma fórmula pronta

A maioria das pessoas tenta desenhar um coração usando dois arcos de círculo e duas linhas retas na parte inferior. O resultado parece artificial. Os pontos de conexão ficam visíveis e o contorno parece colado, não desenhado. O problema é que esse método ignora como curvas de Bézier funcionam na prática, e quem já passou horas ajustando pontos de controle num vetor sabe do que eu falo.

como fazer um coração perfeito — a abordagem matemática

O coração paramétrico clássico segue uma equação simples, mas a aplicação direta dela gera um vértice inferior extremamente agudo, quase afiado. Para um design limpo, você precisa suavizar essa região. O caminho mais direto é combinar arcos circulares na parte superior com uma curva de Bézier quadrática na base, escolhendo os pontos de controle de forma que a tangente seja contínua em cada junção. Os parâmetros que uso com frequência: raio de 0,5 para cada semicírculo superior, centro esquerdo em (-0,5; 0,5) e centro direito em (0,5; 0,5). O ponto inferior da base fica em (0; -0,6). Os pontos de controle da Bézier inferior ficam em (-0,5; -0,1) e (0,5; -0,1). A inclinação do arco no ponto de conexão é exatamente a mesma da Bézier naquele ponto, então não há quebra de suavidade. Isso você pode verificar calculando a derivada no ângulo de conexão, mas na prática basta renderizar e observar se o traço continua sem ângulos.

Quando eu estava refinando um ícone de app há algum tempo, gastei quase três horas tentando forçar simetria visual usando apenas simetria perfeita no software de vetor. O problema era que a vista da tela achata a proporção e o coração parecia ligeiramente inclinado para um lado dependendo do display. A solução foi ajustar o centro dos arcos superiores em cerca de 2% para compensar a distorção da viewport. Não é um truque mágico, é só prestar atenção em como a relação entre a altura e a largura do viewbox altera a percepção.

Implementação prática em SVG

Aqui está uma versão que funciona bem na maioria dos contextos, com coordenadas normalizadas para um viewBox de 0 a 1: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.6" width="200" height="320">
<path d="M 0.5 1.2
C 0.5 1.2, 0.05 0.85, 0.05 0.55
A 0.2 0.2 0 0 1 0.25 0.35
A 0.2 0.2 0 0 1 0.45 0.55
C 0.45 0.75, 0.5 0.95, 0.5 1.05
C 0.5 0.95, 0.55 0.75, 0.55 0.55
A 0.2 0.2 0 0 1 0.75 0.35
A 0.2 0.2 0 0 1 0.95 0.55
C 0.95 0.85, 0.5 1.2, 0.5 1.2 Z"
fill="currentColor"/>
</svg>

Esse path usa dois arcos circulares para as partes superiores e uma Bézier cúbica na base. O atributo fill="currentColor" permite herdar a cor do contexto, o que facilita reutilização em interfaces. Se você precisar de um coração apenas como contorno, troque fill por stroke e adicione stroke-width conforme necessário. Uma observação importante: o heart curve paramétrico puro tem um ponto de inflexão na transição entre o arco e a Bézier que, em certas resoluções de renderização, aparece como uma micro-quebra. O workaround que encontrei foi adicionar um pequeno override no raio do arco no ponto de transição — basicamente, aumentar o raio em 0,005 e mover o ponto de controle da Bézier em 0,01 para cima. O resultado é um traço visualmente suave mesmo em telas de baixa resolução.

Erros comuns que todo mundo comete

O erro mais frequente é tentar construir o coração apenas com curvas de Bézier quadráticas, sem considerar a geometria dos arcos. Quadráticas sozinhas não conseguem representar a curvatura circular das partes superiores com precisão, e o controle manual dos pontos tende a gerar assimetrias que passam despercebidas até você testar em diferentes tamanhos. A combinação de arcos com Bézier é o que mantém a simetria sem esforço extra. Outro problema comum é ignorar a relação de aspecto do viewbox. Um coração desenhado em um viewBox quadrado vai parecer diferente do mesmo path renderizado em um retangular. Isso não é um defeito do desenho, é física de projeção. Sempre defina o viewBox com proporções próximas a 1:1,6 ou ajuste o design após testar no tamanho final de uso.

Limitações do método

A abordagem paramétrica funciona bem para logotipos, ícones e ilustrações vetoriais. Ela não funciona bem quando você precisa de um coração tridimensional com profundidade real, como para impressão 3D ou modelagem orgânica. Nesse caso, o ideal é usar um modelo de superfície baseado na equação de volume do coração, que é uma outra história completamente. O método descrito aqui também não lida bem com gradientes complexos dentro da forma — se você precisa de sombreamento interno, o path puro vai exigir camadas adicionais ou máscaras. Se o objetivo for apenas um símbolo simples e escalável, o SVG acima resolve. Se precisar de versatilidade maior, exporte como SVG e ajuste os valores de raio e controle diretamente no código. Não existe ferramenta automática que garanta perfeição visual, porque "perfeito" depende do contexto de uso, do tamanho de renderização e da intenção do design. O que funciona para um ícone de 24 pixels não funciona para um mural de 3 metros, e vice-versa.