SVG Coração

O símbolo do coração em SVG: geometria, história e animação

O clássico símbolo do coração é formado por dois semicírculos sobre um triângulo invertido. Em SVG, costuma ser expresso como um único <path> combinando curvas Bezier cúbicas e quadráticas, o que produz lóbulos suaves e uma ponta aguda. Um path compacto com menos de 200 bytes renderiza nítido em qualquer tamanho — de um botão de curtir de 16 pixels a uma ilustração principal preenchendo a viewport.

<svg viewBox="0 0 100 90" width="48" height="48">
  <path d="M50,80 C30,60 10,40 30,20 Q50,0 50,40
           Q50,0 70,20 C90,40 70,60 50,80 Z"
        fill="#e91e63"/>
</svg>

Matemáticos também descrevem a curva de forma implícita como (x² + y² − 1)³ − x²y³ = 0, a chamada "curva do coração". A forma, apesar de universalmente reconhecida como símbolo de amor, não se parece em nada com o órgão anatômico — corações anatômicos ficam reservados para ilustrações médicas com seus diagramas Lub-Dub separados. Teorias sobre a origem remontam à iconografia medieval e possivelmente à semente da planta extinta silphium, usada como contraceptivo na antiga Cirene.

Cores e significado cultural

A cor carrega semântica. O vermelho do Material Design #e91e63 e o clássico #ff0000 são lidos como amor romântico; rosa #ff69b4 como carinho; gradientes vermelho-rosa são populares em apps de relacionamento. Emojis separam o significado por cor — ❤️ romântico, 💛 amizade, 💚 ciúme ou vegano, 💙 confiança, 💜 apropriado pelo fandom Army do BTS. O logo I ♥ NY de Milton Glaser (1977) consolidou a forma como substituto de verbo e entrou em domínio público.

Animação: batimento e burst de like

Um batimento cardíaco natural é uma pulsação de dois tempos. Uma sequência simples de @keyframes escalando 1 → 1,1 → 1 → 1,05 → 1 em cerca de 1 segundo reproduz o ritmo Lub-Dub. O "burst" do like no Twitter / X combina o scale-up com explosão de partículas e fade de cor. Apple Health e Fitbit usam um coração SVG em tempo real que pulsa no BPM real do usuário, via JavaScript que atualiza a duração da animação.

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.05); }
}

Usos em UI de produto

O coração é o ícone canônico de "favorito" / "curtir". O Twitter substituiu sua estrela por um coração em 2015 — uma mudança polêmica porque o coração implica endosso emocional mais forte do que a estrela. Tinder usa o coração como ação principal. O Spotify usa coração outlined para "salvar em Curtidas". Outlined vs filled é o padrão para estados não curtido vs curtido; alternar entre eles com uma transição de 200 ms é suficiente para parecer polido.

Perguntas frequentes

Como animar um pulso? Use @keyframes em CSS com duas etapas de escala (1 → 1,1 → 1 → 1,05 → 1) e duração de cerca de 1 segundo para imitar Lub-Dub. Para BPM variável, controle a duração via JavaScript.

Outlined ou filled? Outlined para o estado padrão "ainda não curtido", filled quando o usuário curte. Alterne o atributo fill no clique e adicione uma animação breve de scale para deixar a mudança tátil.

Qual tamanho usar em um botão de curtir? 16–24 px em listas densas, 24–32 px em feeds, 40–48 px quando o coração é a ação principal. As HIGs da Apple e do Material recomendam área de toque mínima de 44 × 44 px, mesmo que o coração visual seja menor.

SVG do coração vs emoji ❤️ — qual usar? Emoji é mais rápido (sem markup, sem CSS), mas não pode ser estilizado ou animado e renderiza diferente entre plataformas. SVG inline dá controle total sobre cor, traço e animação, com custo de ~200 bytes.