Texte courbe sur cadran de montre
Sur le cadran d’une montre connectée, chaque complication explique sa valeur avec un texte qui suit la courbe de la lunette.
Réglages
Code
<div class="uvq08-wch" role="group" aria-label="Cadran de la montre"><div class="fc"><svg viewBox="0 0 200 200" aria-hidden="true"><defs><path id="uvq08-wch-a" d="M25 100A75 75 0 0 1 175 100"/><path id="uvq08-wch-b" d="M16 100A84 84 0 0 0 184 100"/></defs><g class="tk"><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(0 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(6 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(12 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(18 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(24 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(30 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(36 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(42 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(48 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(54 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(60 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(66 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(72 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(78 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(84 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(90 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(96 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(102 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(108 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(114 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(120 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(126 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(132 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(138 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(144 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(150 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(156 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(162 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(168 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(174 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(180 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(186 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(192 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(198 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(204 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(210 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(216 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(222 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(228 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(234 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(240 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(246 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(252 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(258 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(264 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(270 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(276 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(282 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(288 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(294 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(300 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(306 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(312 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(318 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(324 100 100)"/><line x1="100" y1="3.5" x2="100" y2="9" class="mj" transform="rotate(330 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(336 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(342 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(348 100 100)"/><line x1="100" y1="3.5" x2="100" y2="6.5" transform="rotate(354 100 100)"/></g><circle class="sd" cx="100" cy="5.5" r="2.2"/><text class="ct c0" id="uvq08-wch-t0"><textPath href="#uvq08-wch-a" startOffset="27%" text-anchor="middle">Pouls 72 bpm</textPath></text><text class="ct c1" id="uvq08-wch-t1"><textPath href="#uvq08-wch-a" startOffset="73%" text-anchor="middle">8 432 pas</textPath></text><text class="ct c2" id="uvq08-wch-t2"><textPath href="#uvq08-wch-b" startOffset="73%" text-anchor="middle">Nuageux, max. 21°</textPath></text><text class="ct c3" id="uvq08-wch-t3"><textPath href="#uvq08-wch-b" startOffset="27%" text-anchor="middle">Batterie 64 %</textPath></text><text class="tm" x="100" y="111" text-anchor="middle">10:09</text></svg><button type="button" class="k k0" style="--p:72;--r:var(--c2)" aria-label="Pouls" aria-describedby="uvq08-wch-t0">72</button><button type="button" class="k k1 pk" style="--p:84;--r:var(--c1)" aria-label="Pas" aria-describedby="uvq08-wch-t1">8,4k</button><button type="button" class="k k2" style="--p:0;--r:var(--c1)" aria-label="Météo" aria-describedby="uvq08-wch-t2">18°</button><button type="button" class="k k3" style="--p:64;--r:var(--c2)" aria-label="Batterie" aria-describedby="uvq08-wch-t3">64%</button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Info-bulles
Voir tout : Info-bullesOù l’utiliser
Un cadran rond de montre connectée avec un anneau de graduations, un point des secondes qui tourne et quatre complications pour le pouls, les pas, la météo et la batterie. Au survol ou au focus, l’explication apparaît en texte courbe le long de la lunette, posé sur un textPath SVG. Elle convient aux applis de montres, tableaux de forme physique et fiches produit horlogères.
La couleur principale teinte les textes des pas et de la météo, la secondaire ceux du pouls et de la batterie. Garde chaque ligne sous une vingtaine de caractères pour qu’elle tienne dans son quart de cadran, et change le décalage sur l’arc pour la déplacer.