Morphing Shape
Une forme SVG pleine qui passe en douceur du losange au cercle, à l'étoile puis au carré en changeant de teinte — un vrai morphing, fluide aussi dans Safari.
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 est un seul <path class="mrph-shape"> dans un SVG de 120 × 120 unités. Les quatre formes (losange, cercle, étoile à cinq branches, carré) sont écrites avec la même structure : 20 points d'ancrage reliés par 20 courbes de Bézier cubiques. Les côtés droits sont des courbes dont les poignées restent sur la ligne, le cercle utilise des poignées d'arc. Comme chaque forme a le même nombre et le même type de commandes, le navigateur sait calculer toutes les formes intermédiaires : la transformation est continue, sans saut.
L'animation est en SMIL : un <animate attributeName="d"> enchaîne les quatre chemins en 4 s (un quart de cycle par passage, accélération et freinage doux via keySplines=".42 0 .58 1"), puis revient au losange et recommence. Un second <animate attributeName="fill">, calé sur la même horloge, fait glisser la couleur de l'indigo #6366f1 au violet #8b5cf6, au magenta #d946ef puis au rose #ec4899.
Pourquoi SMIL et pas la propriété CSS d : Safari ne connaît pas d en CSS, la forme y resterait figée. <animate> sur l'attribut d est pris en charge par Chrome, Firefox et Safari. Le petit script ne sert qu'au mouvement réduit ; aucune classe ni animation CSS générique : tout est préfixé mrph-, le code se colle à côté de n'importe quel autre effet.
Accessibilité
- Décoratif par défaut : le SVG porte
aria-hidden="true"etfocusable="false", les lecteurs d'écran l'ignorent. Si la forme porte un sens (un état « en écoute », par exemple), dites-le dans un texte visible à côté, comme dans l'exemple de l'appli de notes. - Mouvement réduit : une animation SMIL ne s'arrête pas en CSS. Le script lit
prefers-reduced-motion: reduce, met chaque dessin en pause avecpauseAnimations()et le ramène au début (setCurrentTime(0)) : il reste un losange indigo net. Il suit aussi le changement de réglage en cours de visite et relance l'animation si l'option est désactivée. - Rien à activer : l'effet ne réagit ni au pointeur ni au clavier ; aucun piège de focus. Pour un usage interactif (pause au clic), utilisez un vrai
<button>et les méthodes SVG standard, voir la FAQ. - Rythme : un cycle complet dure 4 s, sans clignotement ni flash ; le changement de couleur est progressif.
Compatibilité navigateur
SMIL <animate> sur l'attribut d et sur fill, pauseAnimations() / setCurrentTime(), media query prefers-reduced-motion. Mesuré dans Chromium, Firefox et WebKit (Playwright) : 0 erreur, forme intermédiaire continue entre chaque paire de formes (même chemin à 50 ms près dans les 3 moteurs), deux copies indépendantes, copie seule affichée après une copie masquée, arrêt net en mouvement réduit. Le morphing lui-même fonctionne dans des versions bien plus anciennes ; les versions ci-dessous sont celles où le mouvement réduit est aussi respecté.
Sans SMIL, le chemin garde sa valeur de départ : un losange indigo immobile. Sans JavaScript, seul l'arrêt en mouvement réduit manque ; le morphing tourne normalement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0601-root">
<div class="mrph-stage">
<svg class="mrph-svg" viewBox="0 0 120 120" aria-hidden="true" focusable="false">
<path class="mrph-shape" fill="#6366f1" d="…losange…">
<animate class="mrph-d" attributeName="d" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0;.25;.5;.75;1" keySplines="…" values="…losange;cercle;étoile;carré;losange…"/>
<animate class="mrph-fill" attributeName="fill" dur="4s" repeatCount="indefinite" calcMode="spline" keyTimes="0;.25;.5;.75;1" keySplines="…" values="#6366f1;#8b5cf6;#d946ef;#ec4899;#6366f1"/>
</path>
</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 — --mrph-size) |
120px | Côté du dessin. 100% le fait suivre la largeur du parent ; le SVG garde ses proportions. |
Fond et hauteur du bloc (CSS — --mrph-page, --mrph-root-h) |
#0a0a0f / 300px | --mrph-page:transparent et --mrph-root-h:0px pour poser la forme sur votre propre fond, dans un bouton ou une carte. |
Durée d'un cycle (HTML — dur des deux <animate>) |
4s | Mettez la même valeur sur les deux balises pour garder couleur et forme synchronisées (ex. dur="6s" pour un fond calme). |
Couleurs (HTML — values de l'animation fill) |
#6366f1;#8b5cf6;#d946ef;#ec4899;#6366f1 | Une couleur par forme (losange, cercle, étoile, carré) et la première répétée à la fin pour boucler sans saut. Pensez à changer aussi fill sur le <path> (couleur sans animation). |
Vitesse de chaque passage (HTML — keySplines) |
.42 0 .58 1 (×4) | Courbe d'accélération de chaque quart de cycle. 0 0 1 1 donne un mouvement régulier, sans pause apparente sur chaque forme. |
Formes (HTML — values de l'animation d) |
losange ; cercle ; étoile ; carré ; losange | Chaque forme doit garder exactement la même structure (un M puis 20 C puis Z) : sinon le navigateur saute d'une forme à l'autre au lieu de les fondre. |
FAQ
C. Pour une nouvelle forme, partez d'une forme existante et déplacez ses points, ou faites-la redessiner en 20 cubiques dans un éditeur vectoriel avant de la coller dans values.svg.pauseAnimations() fige l'image, svg.unpauseAnimations() relance, svg.setCurrentTime(0) revient au losange. Appelez-les sur le .mrph-svg de la copie concernée, depuis un vrai <button>. animation-play-state en CSS n'a aucun effet sur SMIL.d en SMIL, que Safari prend en charge ; la propriété CSS d, elle, n'existe pas dans Safari, et une forme animée de cette façon y resterait figée. Mesuré dans WebKit avec le même rendu que Chrome et Firefox.
