Vereinfachung der Apple Watch Breathe App Animation mit CSS Variablen

Als ich den Originalartikel über die Nachbildung dieser Animation sah, war mein erster Gedanke, dass alles mit Hilfe von Präprozessoren und insbesondere CSS-Variablen vereinfacht werden könnte. Tauchen wir also ein und sehen wir, wie!

Die Struktur

Wir behalten exakt die gleiche Struktur bei.

Um zu vermeiden, dass dasselbe mehrmals geschrieben werden muss, habe ich mich für die Verwendung eines Präprozessors entschieden.

Meine Wahl des Präprozessors hängt immer davon ab, was ich tun möchte, da in vielen Fällen etwas wie Pug mehr Flexibilität bietet, aber manchmal erlauben Haml oder Slim mir, die geringste Menge an Code zu schreiben, ohne überhaupt eine Schleifenvariable einführen zu müssen, die ich sowieso später nicht benötigen würde.

Bis vor kurzem hätte ich dafür wahrscheinlich Haml verwendet. Derzeit bevorzuge ich jedoch eine andere Technik, die es mir ermöglicht, die Anzahl der Elemente sowohl im HTML- als auch im CSS-Präprozessor-Code nicht festlegen zu müssen, was bedeutet, dass ich sie nicht in beiden ändern muss, wenn ich zu einem späteren Zeitpunkt einen anderen Wert verwenden möchte.

Um besser zu verstehen, was ich meine, betrachten Sie das folgende Haml und Sass

- 6.times do
  .item

$n: 6; // number of items

/* set styles depending on $n */

Im obigen Beispiel muss ich, wenn ich die Anzahl der Elemente im Haml-Code ändere, dies auch im Sass-Code tun, sonst bricht alles zusammen. Auf mehr oder weniger offensichtliche Weise ist das Ergebnis nicht mehr das beabsichtigte.

Daher können wir dies umgehen, indem wir die Anzahl der Kreise als Wert einer CSS-Variable festlegen, die wir später im Sass-Code verwenden. Und in dieser Situation fühle ich mich besser, wenn ich Pug verwende

- var nc = 6; // number of circles

.watch-face(style=`--nc: ${nc}`)
  - for(var i = 0; i < nc; i++)
    .circle(style=`--i: ${i}`)

Wir haben auch den Index für jedes .circle-Element auf ähnliche Weise festgelegt.

Die grundlegenden Stile

Wir behalten die exakt gleichen Stile auf dem body bei, keine Änderungen dort.

Genau wie bei der Struktur verwenden wir einen Präprozessor, um fast dasselbe mehrmals schreiben zu müssen. Meine Wahl ist Sass, da ich damit am vertrautesten bin, aber für etwas Einfaches wie diese Demo gibt es nichts Besonderes an Sass, das es zur besten Wahl macht – LESS oder Stylus erledigen die Aufgabe genauso gut. Es ist einfach schneller für mich, Sass-Code zu schreiben, das ist alles.

Aber wofür verwenden wir einen Präprozessor?

Nun, erstens verwenden wir eine Variable $d für den Durchmesser der Kreise, damit wir, wenn wir sie größer oder kleiner machen und auch steuern wollen, wie weit sie während der Animation herausgehen, nur den Wert dieser Variable ändern müssen.

Falls sich jemand fragt, warum hier keine CSS-Variablen verwendet werden, liegt es daran, dass ich diesen Weg nur dann einschlagen möchte, wenn meine Variablen dynamisch sein sollen. Dies ist bei dem Durchmesser nicht der Fall, also warum mehr schreiben und dann vielleicht sogar Workarounds für CSS-Variablen-Bugs finden, auf die wir stoßen könnten?

$d: 8em;

.circle {
  width: $d; height: $d;
}

Beachten Sie, dass wir dem Wrapper (.watch-face) keine Abmessungen zuweisen. Wir müssen das nicht.

Im Allgemeinen gilt: Wenn der Zweck eines Elements nur darin besteht, ein Container für absolut positionierte Elemente zu sein, ein Container, auf den wir Gruppen-Transforms (animiert oder nicht) anwenden, und dieser Container keinen sichtbaren Textinhhalt, keine Hintergründe, keine Rahmen, keine Box-Schatten aufweist... dann muss ihm keine explizite Abmessung zugewiesen werden.

Eine Nebenwirkung davon ist, dass wir, um unsere Kreise in der Mitte zu halten, ihnen einen negativen margin von minus dem Radius (der die Hälfte des Durchmessers ist) geben müssen.

$d: 8em;
$r: .5*$d;

.circle {
  margin: -$r;
  width: $d; height: $d;
}

Wir geben ihnen auch denselben border-radius, mix-blend-mode und background wie im Originalartikel und erhalten das folgende Ergebnis

Nun, wir erhalten das Obige in WebKit-Browsern und Firefox, da Edge mix-blend-mode noch nicht unterstützt (obwohl Sie für die Implementierung abstimmen können und bitte tun Sie das, wenn Sie möchten, dass es unterstützt wird, denn Ihre Stimmen zählen), sodass es uns etwas Hässliches zeigt

Um dies zu umgehen, verwenden wir @supports

.circle {
  /* same styles as before */
  
  @supports not (mix-blend-mode: screen) {
    opacity: .75
  }
}

Nicht perfekt, aber viel besser

Betrachten wir nun das Ergebnis, das wir erzielen wollen

Wir haben insgesamt sechs Kreise, drei davon in der linken Hälfte und drei weitere in der rechten Hälfte. Sie alle haben einen background, der eine Art Grün ist, die in der linken Hälfte etwas mehr ins Gelbliche und die in der rechten Hälfte etwas mehr ins Bläuliche gehen.

Wenn wir unsere Kreise ab dem obersten in der rechten Hälfte nummerieren und dann im Uhrzeigersinn vorgehen, haben die ersten drei Kreise in der rechten Hälfte einen bläulich-grünen background und die letzten drei in der linken Hälfte einen gelblich-grünen background.

Zu diesem Zeitpunkt haben wir den background für alle Kreise auf den gelblich-blauen eingestellt. Das bedeutet, wir müssen ihn für die erste Hälfte der sechs Kreise überschreiben. Da wir CSS-Variablen in Selektoren nicht verwenden können, machen wir dies im Pug-Code

- var nc = 6; // number of circles

style .circle:nth-child(-n + #{.5*nc}) { background: #529ca0 }
.watch-face(style=`--nc: ${nc}`)
  - for(var i = 0; i < nc; i++)
    .circle(style=`--i: ${i}`)

Falls Sie eine Auffrischung benötigen, wählt :nth-child(-n + a) die Elemente mit den gültigen Indizes aus, die wir für ganzzahlige Werte von n ≥ 0 erhalten. In unserem Fall ist a = .5*nc = .5*6 = 3, also ist unser Selektor :nth-child(-n + 3).

Wenn wir n durch 0 ersetzen, erhalten wir 3, was ein gültiger Index ist, also passt unser Selektor zum dritten Kreis.

Wenn wir n durch 1 ersetzen, erhalten wir 2, ebenfalls ein gültiger Index, also passt unser Selektor zum zweiten Kreis.

Wenn wir n durch 2 ersetzen, erhalten wir 1, wieder gültig, also passt unser Selektor zum ersten Kreis.

Wenn wir n durch 3 ersetzen, erhalten wir 0, was kein gültiger Index ist, da die Indizes hier nicht 0-basiert sind. An diesem Punkt hören wir auf, da klar wird, dass wir keine weiteren positiven Werte erhalten werden, wenn wir fortfahren.

Der folgende Pen veranschaulicht, wie das funktioniert – die allgemeine Regel ist, dass :nth-child(-n + a) die ersten a Elemente auswählt

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Zurück zu unserer kreisförmigen Verteilung, das bisherige Ergebnis ist unten zu sehen

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Positionierung

Zuerst machen wir den Wrapper relativ positioniert und seine .circle-Kinder absolut positioniert. Jetzt überlappen sie sich alle in der Mitte.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Um zu verstehen, was wir als Nächstes tun müssen, werfen wir einen Blick auf die folgende Abbildung

Die Mittelpunkte der Kreise in der Ausgangsposition liegen auf derselben horizontalen Linie und einen Radius vom rechtesten Kreis entfernt. Das bedeutet, wir können diese Endposition durch eine Translation um einen Radius $r entlang der x-Achse erreichen.

Aber was ist mit den anderen Kreisen? Ihre Mittelpunkte in der Endposition sind ebenfalls einen Radius von ihrer Ausgangsposition entfernt, nur entlang anderer Linien.

Das bedeutet, wenn wir zuerst ihr Koordinatensystem drehen, bis ihre x-Achse mit der Linie zwischen der Anfangs- und Endposition der Mittelpunkte übereinstimmt, und sie dann um einen Radius translatieren, können wir sie alle auf sehr ähnliche Weise in die korrekte Endposition bringen.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

In Ordnung, aber um wie viel Grad jeden von ihnen drehen?

Nun, wir gehen von der Tatsache aus, dass wir 360° auf einem Kreis um einen Punkt haben.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Wir haben sechs Kreise, die gleichmäßig verteilt sind, also beträgt die Drehdifferenz zwischen zwei aufeinanderfolgenden Kreisen 360°/6 = 60°. Da wir den rechtesten .circle (den zweiten) nicht drehen müssen, steht dieser bei 0°, was den davor (den ersten) auf -60°, den danach (den zweiten) auf 60° und so weiter setzt.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Beachten Sie, dass -60° und 300° = 360° - 60° dieselbe Position auf dem Kreis einnehmen, so dass es egal ist, ob wir dorthin durch eine Drehung um 300° im Uhrzeigersinn (positiv) oder durch eine Drehung um 60° in die andere Richtung auf dem Kreis gelangen (was uns das Minuszeichen gibt). Wir werden die Option -60° im Code verwenden, da dies ein praktisches Muster in unserem Fall leichter erkennbar macht.

Unsere Transforms sehen also so aus

.circle {
  &:nth-child(1 /* = 0 + 1 */) {
    transform: rotate(-60deg /* -1·60° = (0 - 1)·360°/6 */) translate($r);
  }
  &:nth-child(2 /* = 1 + 1 */) {
    transform: rotate(  0deg /*  0·60° = (1 - 1)·360°/6 */) translate($r);
  }
  &:nth-child(3 /* = 2 + 1 */) {
    transform: rotate( 60deg /*  1·60° = (2 - 1)·360°/6 */) translate($r);
  }
  &:nth-child(4 /* = 3 + 1 */) {
    transform: rotate(120deg /*  2·60° = (3 - 1)·360°/6 */) translate($r);
  }
  &:nth-child(5 /* = 4 + 1 */) {
    transform: rotate(180deg /*  3·60° = (4 - 1)·360°/6 */) translate($r);
  }
  &:nth-child(6 /* = 5 + 1 */) {
    transform: rotate(240deg /*  4·60° = (5 - 1)·360°/6 */) translate($r);
  }
}

Das gibt uns die gewünschte Verteilung

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Es ist jedoch sehr repetitiver Code, der leicht verdichtet werden kann. Für jeden von ihnen kann der Drehwinkel als Funktion des aktuellen Index und der Gesamtzahl der Elemente geschrieben werden

.circle {
  /* previous styles */
  
  transform: rotate(calc((var(--i) - 1)*360deg/var(--nc))) translate($r);
}

Dies funktioniert in WebKit-Browsern und Firefox 57+, schlägt jedoch in Edge und älteren Firefox-Browsern fehl, da calc() innerhalb von rotate()-Funktionen nicht unterstützt wird.

Glücklicherweise haben wir in diesem Fall die Möglichkeit, die einzelnen Drehwinkel im Pug-Code zu berechnen und festzulegen und sie dann im Sass-Code entsprechend zu verwenden

- var nc = 6, ba = 360/nc;

style .circle:nth-child(-n + #{.5*nc}) { background: #529ca0 }
.watch-face
  - for(var i = 0; i < nc; i++)
    .circle(style=`--ca: ${(i - 1)*ba}deg`)

.circle {
  /* previous styles */
  
  transform: rotate(var(--ca)) translate($r);
}

Wir brauchten die vorherigen benutzerdefinierten Eigenschaften in diesem Fall nicht wirklich für etwas anderes, also haben wir sie einfach entfernt.

Wir haben jetzt einen kompakten, browserübergreifenden Code für die gewünschte Verteilung

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Gut, das bedeutet, wir sind mit dem wichtigsten Teil fertig! Jetzt zum Schnickschnack...

Abschluss

Wir nehmen die transform-Deklaration aus der Klasse und legen sie in einen Satz von @keyframes. In der Klasse ersetzen wir sie durch die Nicht-Translations-Variante

.circle {
  /* same as before */
  
  transform: rotate(var(--ca))
}

@keyframes circle {
  to { transform: rotate(var(--ca)) translate($r) }
}

Wir fügen auch den @keyframes-Satz für die pulsierende Animation auf dem .watch-face-Element hinzu.

@keyframes pulse {
  0% { transform: scale(.15) rotate(.5turn) }
}

Beachten Sie, dass wir weder die 0% (from) noch die 100% (to) Keyframes benötigen. Wenn diese fehlen, werden ihre Werte für die animierten Eigenschaften (nur die transform-Eigenschaft in unserem Fall) aus den Werten generiert, die wir auf den animierten Elementen ohne die animation hätten.

Im Falle der circle-Animation ist das rotate(var(--ca)). Im Falle der pulse-Animation ergibt scale(1) dieselbe Matrix wie none, was der Standardwert für transform ist, so dass wir ihn nicht einmal auf dem .watch-face-Element festlegen müssen.

Wir machen die animation-duration zu einer Sass-Variable, so dass wir sie, wenn wir sie jemals ändern wollen, nur an einer Stelle ändern müssen. Und schließlich legen wir die animation-Eigenschaft sowohl auf dem .watch-face-Element als auch auf den .circle-Elementen fest.

$t: 4s;

.watch-face {
  position: relative;
  animation: pulse $t cubic-bezier(.5, 0, .5, 1) infinite alternate
}

.circle {
  /* same as before */
  
  animation: circle $t infinite alternate
}

Beachten Sie, dass wir keine Timing-Funktion für die circle-Animation festlegen. Das ist ease in der Originaldemo und wir legen sie nicht explizit fest, da dies der Standardwert ist.

Und das ist es – wir haben unser animiertes Ergebnis!

Wir könnten auch den Translationsabstand so anpassen, dass er nicht genau $r ist, sondern ein etwas kleinerer Wert (z.B. .95*$r). Dies kann auch den mix-blend-mode-Effekt etwas interessanter machen

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Bonus: Der allgemeine Fall!

Das Obige gilt speziell für sechs .circle-Blütenblätter. Nun sehen wir, wie wir es anpassen können, damit es für jede Anzahl von Blütenblättern funktioniert. Warten Sie, müssen wir mehr tun, als nur die Anzahl der Kreiselemente im Pug-Code zu ändern?

Nun, sehen wir, was passiert, wenn wir das tun

Die Ergebnisse sehen nicht schlecht aus, aber sie folgen nicht ganz demselben Muster – die erste Hälfte der Kreise (die bläulich-grünen) auf der rechten Seite einer vertikalen Symmetrielinie und die zweite Hälfte (gelblich-grün) auf der linken Seite.

Wir sind im nc = 8-Fall ziemlich nah dran, aber die Symmetrielinie ist nicht vertikal. Im nc = 9-Fall haben jedoch alle unsere Kreise einen gelblich-grünen background.

Lassen Sie uns also sehen, warum diese Dinge passieren und wie wir die Ergebnisse erzielen können, die wir tatsächlich wollen.

:nth-child() zu unserem Vorteil nutzen

Zuerst erinnern wir uns, dass wir mit diesem kleinen Stück Code die Hälfte der Kreise mit einem bläulich-grünen background versehen

.circle:nth-child(-n + #{.5*nc}) { background: #529ca0 }

Aber im nc = 9-Fall haben wir .5*nc = .5*9 = 4.5, was unseren Selektor :nth-child(-n + 4.5) macht. Da 4.5 keine ganze Zahl ist, ist der Selektor ungültig und der background wird nicht angewendet. Also machen wir als Erstes den .5*nc-Wert zu einer ganzen Zahl

style .circle:nth-child(-n + #{~~(.5*nc)}) { background: #529ca0 }

Das ist besser, denn für einen nc-Wert von 9 ist der Selektor .circle:nth-child(-n + 4), der uns die ersten 4 Elemente zur Anwendung eines bläulich-grünen backgrounds gibt

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Wir haben jedoch immer noch nicht die gleiche Anzahl von bläulich-grünen und gelblich-grünen Kreisen, wenn nc ungerade ist. Um das zu beheben, geben wir dem Kreis in der Mitte (vom ersten bis zum letzten) einen gradienten background.

Mit "dem Kreis in der Mitte" meinen wir den Kreis, der von beiden Seiten (Anfang und Ende) gleich weit entfernt ist. Die folgende interaktive Demo veranschaulicht dies sowie die Tatsache, dass bei einer geraden Gesamtzahl von Kreisen kein mittlerer Kreis vorhanden ist.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

In Ordnung, wie bekommen wir diesen Kreis?

Mathematisch gesehen ist dies die Schnittmenge der Menge, die die ersten ceil(.5*nc) Elemente enthält, und der Menge, die alle außer den ersten floor(.5*nc) Elementen enthält. Wenn nc gerade ist, sind floor(.5*nc) und ceil(.5*nc) gleich und unsere Schnittmenge ist die leere Menge ∅. Dies wird durch den folgenden Pen veranschaulicht

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Wir erhalten die ersten ceil(.5*nc) Elemente mit :nth-child(-n + #{Math.ceil(.5*nc)}), aber was ist mit der anderen Menge?

Im Allgemeinen wählt :nth-child(n + a) alle außer den ersten a - 1 Elementen aus

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Um also alle außer den ersten floor(.5*nc) Elementen zu erhalten, verwenden wir :nth-child(n + #{~~(.5*nc) + 1}).

Das bedeutet, wir haben den folgenden Selektor für den mittleren Kreis

:nth-child(n + #{~~(.5*nc) + 1}):nth-child(-n + #{Math.ceil(.5*nc)})

Mal sehen, was das ergibt.

• Wenn wir 3 Elemente haben, ist unser Selektor :nth-child(n + 2):nth-child(-n + 2), der uns das zweite Element liefert (die Schnittmenge der Mengen {2, 3, 4, ...} und {2, 1})
• Wenn wir 4 Elemente haben, ist unser Selektor :nth-child(n + 3):nth-child(-n + 2), der nichts erfasst (die Schnittmenge der Mengen {3, 4, 5, ...} und {2, 1} ist die leere Menge ∅)
• Wenn wir 5 Elemente haben, ist unser Selektor :nth-child(n + 3):nth-child(-n + 3), der uns das dritte Element liefert (die Schnittmenge der Mengen {3, 4, 5, ...} und {3, 2, 1})
• Wenn wir 6 Elemente haben, ist unser Selektor :nth-child(n + 4):nth-child(-n + 3), der nichts erfasst (die Schnittmenge der Mengen {4, 5, 6, ...} und {3, 2, 1} ist die leere Menge ∅)
• Wenn wir 7 Elemente haben, ist unser Selektor :nth-child(n + 4):nth-child(-n + 4), der uns das vierte Element liefert (die Schnittmenge der Mengen {4, 5, 6, ...} und {4, 3, 2, 1})
• Wenn wir 8 Elemente haben, ist unser Selektor :nth-child(n + 5):nth-child(-n + 4), der nichts erfasst (die Schnittmenge der Mengen {5, 6, 7, ...} und {4, 3, 2, 1} ist die leere Menge ∅)
• Wenn wir 9 Elemente haben, ist unser Selektor :nth-child(n + 5):nth-child(-n + 5), der uns das fünfte Element liefert (die Schnittmenge der Mengen {5, 6, 7, ...} und {5, 4, 3, 2, 1})

Jetzt, da wir das Element in der Mitte auswählen können, wenn wir insgesamt eine ungerade Anzahl haben, geben wir ihm einen Gradienten-background

- var nc = 6, ba = 360/nc;

style .circle:nth-child(-n + #{~~(.5*nc)}) { background: var(--c0) }
  | .circle:nth-child(n + #{~~(.5*nc) + 1}):nth-child(-n + #{Math.ceil(.5*nc)}) {
  |   background: linear-gradient(var(--c0), var(--c1))
  | }
.watch-face(style=`--c0: #529ca0; --c1: #61bea2`)
  - for(var i = 0; i < nc; i++)
    .circle(style=`--ca: ${(i - 1)*ba}deg`)

Der Grund, warum wir einen Gradienten von oben nach unten verwenden, ist, dass wir diesen Gegenstand letztendlich unten haben wollen, geteilt in zwei Hälften durch die vertikale Symmetrielinie der Anordnung. Das bedeutet, wir müssen ihn zuerst drehen, bis seine x-Achse nach unten zeigt, und ihn dann entlang dieser neuen Richtung seiner x-Achse nach unten translatieren. In dieser Position befindet sich die Oberseite des Elements in der rechten Hälfte der Anordnung und die Unterseite des Elements in der linken Hälfte der Anordnung. Wenn wir also einen Gradienten von der rechten Seite der Anordnung zur linken Seite der Anordnung wünschen, ist dies ein von oben nach unten gerichteter Gradient auf diesem tatsächlichen .circle-Element.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Mit dieser Technik haben wir nun das Problem der Hintergründe für den allgemeinen Fall gelöst

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Jetzt bleibt nur noch, die Symmetrieachse vertikal zu machen.

Winkel zähmen

Um zu sehen, was wir hier tun müssen, konzentrieren wir uns auf die gewünschte Positionierung im oberen Teil. Dort möchten wir immer zwei Kreise haben (der erste in DOM-Reihenfolge auf der rechten Seite und der letzte in DOM-Reihenfolge auf der linken Seite), die symmetrisch zur vertikalen Achse positioniert sind, die unsere Anordnung in zwei sich spiegelnde Hälften teilt.

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.

Die Tatsache, dass sie symmetrisch sind, bedeutet, dass die vertikale Achse den Winkelabstand zwischen ihnen ba (der 360° geteilt durch die Gesamtzahl der Kreise nc beträgt) in zwei gleiche Hälften teilt.

Beide sind also einen halben Basiswinkel (wobei der Basiswinkel ba 360° geteilt durch die Gesamtzahl der Kreise nc ist) von der vertikalen Symmetrieachse entfernt, einer in positiver Richtung und der andere in der anderen Richtung.

Die obere Hälfte der Symmetrieachse liegt bei -90° (was 270° entspricht).

Um also zum ersten Kreis in DOM-Reihenfolge zu gelangen (demjenigen, der oben rechts steht), beginnen wir bei 0°, gehen 90° in negativer Richtung und dann einen halben Basiswinkel zurück in positiver Richtung (im Uhrzeigersinn). Das platziert den ersten Kreis bei .5*ba - 90 Grad.

Danach liegt jeder weitere Kreis im Winkel des vorherigen Kreises plus einem Basiswinkel. Auf diese Weise haben wir

• der erste Kreis (Index 0, Selektor :nth-child(1)) liegt bei ca₀ = .5*ba - 90 Grad
• der zweite Kreis (Index 1, Selektor :nth-child(2)) liegt bei ca₁ = ca₀ + ba = ca₀ + 1*ba Grad
• der dritte Kreis (Index 2, Selektor :nth-child(3)u) liegt bei ca₂ = ca₁ + ba = ca₀ + ba + ba = ca₀ + 2*ba Grad
• im Allgemeinen liegt der Kreis mit Index k bei caₖ = caₖ₋₁ + ba = ca₀ + k*ba Grad

Der aktuelle Winkel des Kreises mit Index i ist also .5*ba - 90 + i*ba = (i + .5)*ba - 90 Grad

- var nc = 6, ba = 360/nc;

//- same as before
.watch-face(style=`--c0: #529ca0; --c1: #61bea2`)
  - for(var i = 0; i < nc; i++)
    .circle(style=`--ca: ${(i + .5)*ba - 90}deg`)

Dies ergibt unseren endgültigen Pen, bei dem wir nur nc im Pug-Code ändern müssen, um das Ergebnis zu ändern

Siehe den Pen von thebabydino (@thebabydino) auf CodePen.