Gebogener Text auf dem Zifferblatt
Auf einem Smartwatch-Zifferblatt erklärt jede Komplikation ihren Wert mit Text, der der Rundung der Lünette folgt.
Einstellungen
Code
<div class="uvq08-wch" role="group" aria-label="Zifferblatt"><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">Puls 72 bpm</textPath></text><text class="ct c1" id="uvq08-wch-t1"><textPath href="#uvq08-wch-a" startOffset="73%" text-anchor="middle">8.432 Schritte</textPath></text><text class="ct c2" id="uvq08-wch-t2"><textPath href="#uvq08-wch-b" startOffset="73%" text-anchor="middle">Wolkig, max. 21°</textPath></text><text class="ct c3" id="uvq08-wch-t3"><textPath href="#uvq08-wch-b" startOffset="27%" text-anchor="middle">Akku 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="Puls" aria-describedby="uvq08-wch-t0">72</button><button type="button" class="k k1 pk" style="--p:84;--r:var(--c1)" aria-label="Schritte" aria-describedby="uvq08-wch-t1">8,4k</button><button type="button" class="k k2" style="--p:0;--r:var(--c1)" aria-label="Wetter" 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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Tooltips
Alle ansehen: TooltipsWofür du ihn nutzen kannst
Ein rundes Smartwatch-Zifferblatt mit Minutenring, umlaufendem Sekundenpunkt und vier Komplikationen für Puls, Schritte, Wetter und Akku. Beim Hovern oder Fokussieren erscheint die Erklärung als gebogener Text entlang der Lünette, gesetzt mit einem SVG-textPath, während die Buchstaben an ihren Platz zusammenrücken. Passt zu Wearable-Apps, Fitness-Dashboards und Produktseiten für Uhren.
Die Hauptfarbe färbt Schritte und Wetter, die Zweitfarbe Puls und Akku. Halte jede Zeile unter etwa zwanzig Zeichen, damit sie in ihr Viertel passt, und verschiebe sie über den Versatz auf dem Bogen.