Pulse / Heartbeat
Un cœur SVG qui bat en double battement, entouré de deux anneaux qui s'élargissent et s'effacent — en CSS pur, avec un réglage pour l'arrêter et le relancer.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le dessin tient dans un SVG de 80 × 80 unités : un <path class="hrtb-heart"> rouge #ef4444 et deux cercles .hrtb-ring de rayon 20, sans remplissage, au trait de 2 unités, centrés au même point.
Le cœur suit @keyframes hrtbBeat : il grossit à 115 % au premier temps (15 % du cycle), revient, puis à 110 % au second temps (45 %), comme un « poum-poum », et reste au repos jusqu'à la fin du cycle de 1,2 s. Chaque anneau suit hrtbRing : il part de 80 % de sa taille à 80 % d'opacité et s'agrandit jusqu'à 180 % en disparaissant ; le second anneau part un quart de cycle après le premier. Les deux animations sont dérivées d'une seule variable, --hrtb-speed : changer le rythme garde cœur et anneaux synchrones.
Ajoutez l'attribut data-hrtb-idle sur .fx-0606-root pour arrêter le battement (cœur immobile, anneaux cachés) ; retirez-le pour le relancer, par exemple après un clic. Aucun JavaScript n'est livré : les noms d'animation et de classes sont préfixés hrtb, ils ne se mélangent pas avec un autre cœur battant de la page.
Accessibilité
- Décoratif : le SVG porte
aria-hidden="true"etfocusable="false". Le sens (un soutien enregistré, un coup de cœur) doit être dans un texte visible, comme le libellé du bouton dans le premier exemple. - Mouvement réduit : sous
prefers-reduced-motion: reduce, le cœur ne bat plus et un seul anneau reste affiché, fixe et pâle (35 % d'opacité, 130 % de la taille) : le dessin garde son halo sans rien qui pulse. - Rythme sans danger : un battement par 1,2 s (50 par minute), loin des fréquences de clignotement à risque ; aucun changement brutal de luminosité.
- Interaction à votre charge : l'effet ne capte ni clic ni clavier. Pour un « J'aime », placez-le dans un vrai
<button aria-pressed>et basculezdata-hrtb-idleau clic.
Compatibilité navigateur
Animations CSS (transform: scale sur des éléments SVG), variables CSS dans animation et calc() sur une durée, prefers-reduced-motion. Mesuré dans Chromium, Firefox et WebKit (Playwright) : 0 erreur, trois animations nommées hrtbBeat / hrtbRing, aucune animation avec data-hrtb-idle, rendu figé en mouvement réduit, deux copies indépendantes.
Sans animations CSS, le cœur rouge reste affiché, immobile, et les anneaux restent invisibles.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0606-root">
<div class="hrtb-stage">
<svg class="hrtb-svg" viewBox="0 0 80 80" aria-hidden="true" focusable="false">
<circle class="hrtb-ring" cx="40" cy="40" r="20"/>
<circle class="hrtb-ring" cx="40" cy="40" r="20"/>
<path class="hrtb-heart" d="…"/>
</svg>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — --hrtb-size) |
80px | Côté du dessin ; 100% suit la largeur du parent. Les anneaux dépassent légèrement le cœur à leur plus grand : laissez un peu d'air autour. |
Couleur (CSS — --hrtb-color) |
#ef4444 | Cœur et anneaux ensemble (blanc sur un bouton coloré, par exemple). |
Rythme (CSS — --hrtb-speed) |
1.2s | Durée d'un battement complet ; 60 / durée = battements par minute (0.8s ≈ 75 par minute). Le décalage du second anneau suit automatiquement. |
Arrêt / relance (HTML — attribut data-hrtb-idle sur .fx-0606-root) |
absent (le cœur bat) | Présent : cœur immobile, anneaux cachés. Basculez-le en JavaScript pour faire battre le cœur seulement après une action. |
Fond et hauteur du bloc (CSS — --hrtb-page, --hrtb-root-h) |
#0a0a0f / 300px | transparent et 0px pour glisser le cœur dans un bouton, une pastille ou un titre. |
FAQ
data-hrtb-idle sur la racine dans le HTML, puis retirez-le au clic : root.removeAttribute('data-hrtb-idle'). Pour l'arrêter à nouveau, root.setAttribute('data-hrtb-idle', ''). Le CSS s'occupe du reste, aucun script n'est livré.--hrtb-speed: calc(60s / 90) (environ 0,67 s). Vous pouvez la changer en direct depuis vos données avec root.style.setProperty('--hrtb-speed', …).hrtbBeat et hrtbRing, et toutes les classes sont préfixées hrtb : rien ne porte un nom générique comme heartbeat ou .heart qui pourrait entrer en conflit avec un autre effet.
