Icon-Intro

Aus einer Birne wird ein Zahnrad. Die obere Hälfte der Form klappt um die Diagonale nach unten, gibt dabei das dahinter längst drehende Rad frei und landet deckungsgleich auf der unteren Hälfte — von dort läuft das Rad endlos weiter. Die Kippe ist eine orthografische Faltung: quer zur Diagonalachse wird der Maßstab von 1 nach −1 gezogen, wodurch die Hälfte umschlägt, ohne sich zu verzerren. Das Rad blendet dabei nicht von Anfang an ein, sondern erst zwischen 60° und 170° Kippwinkel — vorher wäre es nur eine Ahnung hinter dem Deckel.

Gezeichnet wird in zwei Durchgängen. Zuerst entsteht das Icon deckend auf einer Offscreen-Ebene, denn nur dort verdeckt der kippende Deckel das Rad korrekt. Dann geht das Ganze in einem Zug über den bewegten Grund, mit Deckkraft und Mischmodus. Beides läuft im Canvas statt in CSS, weil Safari Mischmodi über einem laufenden video stillschweigend ignoriert: Im Stylesheet steht der Modus, gerendert wird Normal. Die Regler auf der Seite stehen auf den Werten der Produktionsfassung und lassen sich von dort aus verstellen.

↗ Live im Lab: labs.marckusse.at/derposch/icon-intro