SVG Coração

The heart shape in SVG: geometry, history and animation

The classic heart symbol is built from two semicircles sitting on top of an inverted triangle. In SVG, it is most often expressed as a single <path> mixing cubic and quadratic Bezier commands, which gives smooth lobes and a sharp tip. A compact path under 200 bytes is enough to render crisply at any size, from a 16-pixel like button to a hero illustration scaled to fill the 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>

Mathematicians also describe the curve implicitly as (x² + y² − 1)³ − x²y³ = 0, the so-called "heart curve". The shape, despite being universally recognized as a symbol of love, looks nothing like the anatomical organ — anatomical hearts are reserved for medical illustrations with separate Lub-Dub diagrams. Theories about the origin trace it back to medieval iconography and possibly the seed of the extinct silphium plant, used as contraceptive in ancient Cyrene.

Colors and cultural meaning

Color carries semantics. Material Design red #e91e63 and the classic #ff0000 read as romantic love; pink #ff69b4 as affection; gradients from red to pink are popular on dating apps. Emojis split the meaning by color — ❤️ romantic, 💛 friendship, 💚 jealousy or vegan, 💙 trust, 💜 appropriated by the BTS Army fandom. The I ♥ NY logo by Milton Glaser (1977) cemented the shape as a verb replacement and entered the public domain.

Animation: heartbeat and like burst

A natural heartbeat is a two-beat pulse. A simple @keyframes sequence scaling 1 → 1.1 → 1 → 1.05 → 1 over ~1 second reproduces the Lub-Dub rhythm. The Twitter / X "like burst" combines a scale-up with a particle explosion and a color fade. Apple Health and Fitbit use a real-time SVG heart that pulses at the user's actual BPM, driven by JavaScript that updates the animation duration.

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

Use cases in product UI

The heart is the canonical "favorite" / "like" icon. Twitter famously replaced its star with a heart in 2015 — a controversial move because the heart implies stronger emotional endorsement than a star. Tinder uses the heart as its primary action. Spotify uses an outlined heart for "save to Liked Songs". Outlined vs filled is the standard pattern for unliked vs liked states; toggling between them with a 200 ms transform animation is enough to feel polished.

FAQ

How do I animate a pulse? Use CSS @keyframes with a two-step scale (1 → 1.1 → 1 → 1.05 → 1) and a duration of around 1 second to mimic Lub-Dub. For variable BPM, drive the duration from JavaScript.

Outlined or filled? Outlined for the default "not yet liked" state, filled when the user has liked. Toggle the fill attribute on click and add a brief scale animation to make the change tactile.

What size should a like button use? 16–24 px on dense lists, 24–32 px in feeds, 40–48 px when the heart is the primary action. Apple's HIG and Material both recommend a minimum 44 × 44 px tappable area, even if the visual heart is smaller.

SVG heart vs emoji ❤️ — which to use? Emoji is faster (no markup, no CSS) but cannot be styled or animated, and renders differently across platforms. Inline SVG gives you full control over color, stroke and animation, at a ~200-byte cost.