{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "generatives-markenzeichen", "name": "Generatives Markenzeichen", "name_en": "Generative brand mark (rule-based logo by time, date, seed and CSS random())", "kurz": "Das Zeichen eines Kemptener Studios entsteht live aus Regeln: Die Öffnung im Ring folgt der Sonne, der Wochentag schneidet, ein Wort gibt Ringe und Weite vor, ein Zufallswert pro Besuch kommt aus CSS random() oder JS mit Saat.", "kategorie": "Animationsstile", "kategorie_slug": "animationsstile", "kategorie_nr": 14, "bau_chat": "C6", "prioritaet": "F", "trendstatus": "aufsteigend", "belegstatus": "teilbelegt", "website_belege": 1, "stimmung": [ "verspielt", "laut", "experimentell" ], "stimmung_roh": [ "experimentell", "selbstbewusst", "kreativ" ], "technik": [ "svg", "vanilla-js", "css", "css-property", "intl" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Ein Logo, das nach festen Regeln aus Daten entsteht statt als Datei vorzuliegen. Ein Gerüst bleibt immer gleich und macht das Zeichen wiedererkennbar. Einzelne Parameter folgen Regeln: Uhrzeit, Datum, eine Saat aus Text (Name, Projekt, Veranstaltung) und auf Wunsch ein Zufallswert pro Besuch. Der Zufall kommt aus CSS random(), wo der Browser es kann (Prüfung mit @supports), sonst aus JavaScript mit Saat. Wechseln die Werte, verwandelt sich das Zeichen weich in die neue Form. Jede Form lässt sich als SVG herunterladen.", "warum_es_wirkt": "Das Zeichen lebt, ohne beliebig zu werden: Das Gerüst trägt die Wiedererkennung, die Regeln erzählen etwas über Ort, Zeit oder Person. Für Studios und Kulturhäuser ist das Haltung, die man sieht. Bekannte Vorbilder sind das Zeichen des MIT Media Lab mit rund 40.000 Varianten aus drei Formen und zwölf Farben und das Wetter-Logo von Nordkyn.", "wann_einsetzen": "Kreativstudios, Festivals, Museen, Theater, Hochschulen, Veranstaltungsreihen. Wenn es viele Anwendungen gibt, die verwandt, aber nicht gleich sein sollen: Visitenkarten je Person, Plakate je Veranstaltung, Social-Kacheln je Tag.", "wann_nicht": "Bei Marken, die vor allem Verlässlichkeit ausstrahlen müssen (Kanzlei, Praxis, Bank) und wenn es kein Gerüst gibt, das alle Varianten trägt. Nicht, wenn Druckvorlagen, Favicons und Schilder ohnehin eine feste Form brauchen und niemand die Regeln pflegt.", "varianten": [ "Uhrzeit: Öffnung oder Farbe wandert mit der Sonne, Tag hell, Nacht dunkel", "Datum: Wochentag oder Tag des Jahres steuert Zahl oder Drehung von Elementen", "Saat aus Text: Name einer Person oder Veranstaltung ergibt eine feste Variante (Visitenkarte, Plakat)", "Zufall pro Besuch: CSS random() mit @supports, sonst JavaScript mit Saat", "Daten von außen (Wetter, Pegel, Besucherzahl), wie bei Nordkyn" ], "umsetzung": "Zeichen als SVG aus Parametern zeichnen. Gerüst fest (hier Ring mit Öffnung und Signalpunkt), Ausschnitte über , damit der Export transparent bleibt. Regeln als reine Funktionen: Uhrzeit → Winkel der Öffnung, Wochentag → Zahl der Schnitte, Saat-Text → FNV-1a-Hash → mulberry32 → Ringe und Öffnungsweite. Zufall pro Besuch: @property --zufall { syntax: ''; inherits: true; initial-value: .5 } und @supports (opacity: random(0, 1)) { .buehne { --zufall: random(0, 1) } }; JS liest den berechneten Wert, sonst mulberry32 mit einer Saat aus sessionStorage. Übergänge: alle Zahlen mit expo.out 1200 ms tweenen, Winkel auf kürzestem Weg, diskrete Werte über Präsenz 0 → 1. Download: SVG-Text mit festen Farben als Blob. Für Druck und Favicon eine feste Grundform festlegen (z. B. 12 Uhr, Saat = Markenname). Browserstand (02.11.2026): random() ist seit Chrome 156 stabil (20.10.2026) und in Safari seit 26.2, Firefox fehlt noch; deshalb bleibt die @supports-Weiche mit JS-Rückfall. Für einen Wert je Element gilt das Schlüsselwort element-scoped, das ältere per-element lehnt Chrome 156 ab.", "mobil": "Gleich, Bühne über den Reglern. Uhrzeit-Regler und Saat-Feld groß genug für Daumen; die Woche als Raster aus sieben kleinen Zeichen.", "reduzierte_bewegung": "Statische Form des Tages: Uhrzeit fest auf 12 Uhr, kein Zufall, kein Tween, keine Live-Uhr. Änderungen an den Reglern erscheinen sofort.", "barrierefreiheit": "Das Zeichen ist ein Bild mit beschreibendem Namen (role=\"img\", aria-label mit Stand und Saat). Regler mit sichtbaren Labels und Ausgabe (). Kontrast des Zeichens zum Grund bei Tag und Nacht über 15 : 1. Keine Bewegung über 5 Sekunden ohne Nutzeraktion außer der langsamen Uhrzeit (eine Änderung pro Minute)." }, "messwerte": { "easing": "cubic-bezier(0.16, 1, 0.3, 1)", "dauer_ms": "1200 Formwechsel, 800 Tag/Nacht, 300 UI", "stagger_ms": "60", "distanz": "", "sonstiges": "Gerüst fest, 4 Regeln; Uhrzeit-Zeitraffer in der Vorführung 24 h in 6 s", "herkunft": "eigene Festlegung", "quelle": "Rezept kreativstudio-buehne (Cuberto cubic-bezier(.16,1,.3,1), Reveals 750–1200 ms)" }, "kurve": { "bezier": [ 0.16, 1.0, 0.3, 1.0 ], "css": "cubic-bezier(0.16, 1, 0.3, 1)", "name": "expo.out", "dauer_ms": 1200 }, "gesehen_bei": [ { "seite": "MIT Media Lab (Identität 2011, Richard The)", "url": "https://thenextweb.com/news/mit-media-labs-new-logo-has-40000-variations", "auszeichnung": "", "beobachtung": "Ein Algorithmus setzt jedes Zeichen aus drei Formen und zwölf Farben zusammen, rund 40.000 Varianten. Jede Person im Lab bekommt ihr eigenes Zeichen auf der Visitenkarte, erzeugt über eine Weboberfläche. Verschieden, aber erkennbar verwandt.", "art": "artikel" }, { "seite": "Visit Nordkyn (Neue Design Studio)", "url": "https://neue.no/work/visit-nordkyn/", "auszeichnung": "", "beobachtung": "Das Logo der Region ändert sich nach Wind und Temperatur aus Live-Wetterdaten. Zur Vorstellung zeigt das Studio 90 Logos aus 90 Tagen.", "art": "website" }, { "seite": "Whitney Museum (Experimental Jetset, 2013)", "url": "https://www.dezeen.com/2013/05/21/whitney-graphic-identity-by-experimental-jetset/", "auszeichnung": "", "beobachtung": "Das „responsive W“ ist eine schlanke Zickzacklinie, die ihre Form dem Format anpasst und als Rahmen, Pfeil oder Spalte dient. Fest bleiben das Zickzack-Prinzip und die Schrift Neue Haas Grotesk.", "art": "artikel" }, { "seite": "MDN: random() CSS function", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/random", "auszeichnung": "", "beobachtung": "Abgerufen 01.11.2026 (Stand 09.10.2026). random(?, min, max, step?); Schlüssel auto (Standard), , element-scoped, property-scoped, fixed . Nicht Baseline („Limited availability“). In unregistrierten Custom Properties bleibt die Funktion stehen, mit @property registriert wird ein Wert berechnet.", "art": "artikel" }, { "seite": "OpenReplay Blog: CSS random()", "url": "https://blog.openreplay.com/css-random-function/", "auszeichnung": "", "beobachtung": "17.03.2026: random() ist in Safari 26.2 ausgeliefert, sonst experimentell. Empfohlen: Rückfallwert setzen und in @supports (top: random(1rem, 5rem)) überschreiben.", "art": "artikel" } ], "tutorials": [ { "titel": "MDN: random()", "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/random" }, { "titel": "OpenReplay: CSS random()", "url": "https://blog.openreplay.com/css-random-function/" }, { "titel": "Smashing Magazine: Embracing Playful Imperfection With The CSS random() Function (20.10.2026)", "url": "https://smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/" } ], "kombinierbar_mit": [ "logo-aufbau-intro", "footer-cta-riesen-wortmarke", "token-studio-signatur", "collage-scrapbook" ], "urls": { "detail": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/", "meta": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/meta.json", "demo": "https://cecodesign.de/lab/fundus/animationsstile/generatives-markenzeichen/demo" }, "herkunft": { "quelldateien": [ "DEF-Recherche 01.11.2026" ], "pruefnotizen": [ "01.11.2026: Vorbilder (MIT Media Lab, Nordkyn, Whitney) über Artikel und Studioseite geprüft; eine aktuelle Website mit einem live im Browser erzeugten Logo fehlt noch als Beleg.", "Syntax von random() ist im Fluss: MDN (Stand 09.10.2026) nennt element-scoped und fixed, ältere Artikel per-element. Die Demo nutzt nur die einfache Form random(0, 1) in einer registrierten Custom Property und prüft genau diese Form mit @supports.", "Browserstand (02.11.2026 geprüft): Safari 26.2 hat random() (WebKit laut caniuse-Issue Fyrd/caniuse#7349), Chrome seit 156 stabil (Smashing Magazine 20.10.2026: „Shipped and rolling out right now with Chrome 156“), Firefox noch nicht. MDN führt random() als „Limited availability“. Im Headless-Chromium der Prüfung (153) greift der JS-Rückfall.", "Korrektur 02.11.2026: Status random() in umsetzung nachgetragen (Chrome 156 stabil seit 20.10.2026 laut Smashing Magazine und buildmvpfast.com, dort auch element-scoped statt per-element; web.dev September 2026 nannte es noch für die Beta). Demo unverändert, sie prüft per @supports." ] }, "bau": { "status": "fertig", "kurz": "Das Zeichen eines Kemptener Studios entsteht live aus Regeln: Die Öffnung im Ring folgt der Sonne, der Wochentag schneidet, ein Wort gibt Ringe und Weite vor, ein Zufallswert pro Besuch kommt aus CSS random() oder JS mit Saat.", "demo": true, "abhaengigkeiten": [], "werte": { "easing": "cubic-bezier(0.16, 1, 0.3, 1) (expo.out) für alles; im JS-Tween 1 - 2^(-10t)", "dauer_ms": "1200 Formwechsel (Tween aller Parameter) · 800 Tag/Nacht (Grund und Farbe der Bühne) · 300 UI · Leiste: Einblenden 1200 je Karte, 60 Versatz", "stagger_ms": 60, "distanz": "12px translateY beim Einblenden der Leiste", "druck": "scale 0.97 auf dem Download-Knopf", "geruest": "viewBox -120 … 120; Ring außen 100, innen 56; Punkt Radius 15 auf Radius 78 in #FF5A1F; Ausschnitte (Loch, Öffnung, Ringtrenner 2.6, Schnitte 3.4) über , Export bleibt transparent", "regel_uhrzeit": "Öffnung θ = -((Stunde - 6) / 24) · 360°: 06 Uhr rechts (Ost), 12 Uhr oben, 18 Uhr links, 0 Uhr unten; Nacht vor 6 und ab 20 Uhr (Bühne #111111, Zeichen weiß), sonst Tag (#F2F2F2, Zeichen #0B0B0B); Uhrzeit Europe/Berlin über Intl, live alle 30 s geprüft", "regel_datum": "Wochentag Mo 1 … So 7 = Zahl der Schnitte; Tag des Jahres / 366 · 360° dreht sie", "regel_saat": "Text → FNV-1a 32 bit → mulberry32 → Öffnung 52–76°, 2–5 Ringe mit Gewichten 0.6–1.4, Drehung der Schnitte +0–30°", "regel_zufall": "@property --zufall , @supports (opacity: random(0, 1)) { .buehne { --zufall: random(0, 1) } }, JS liest den berechneten Wert; sonst mulberry32 mit Saat aus sessionStorage (einmal pro Besuch). Punkt rutscht um (zufall - 0.5) · Öffnung · 0.45", "diskret_weich": "Zahl der Ringe und Schnitte als feste Plätze (4 Trenner, 7 Schnitte) mit Präsenz 0 → 1, Winkel auf kürzestem Weg", "download": "SVG 1024 × 1024, Farbe nach Tag/Nacht, Dateiname cambo-zeichen---.svg", "farben": "#0B0B0B, #F2F2F2, #FFFFFF, Meta #8A8A8A, Signal #FF5A1F nur Punkt, Knopf, Markierung", "schrift": "TikTok Sans wdth 75 wght 800, h1 clamp(2.75rem, 1.2rem + 4.6vw, 6rem), Zeilenhöhe 0.9, -0.03em; Text 1.125rem/1.4; Labels DM Mono 11px versal +0.04em", "vorfuehrung": "Zeitraffer 24 h in 6000 ms ab 06:00 (ohne Tween), dann 14:30 mit Tween, Saat tippen „Illerufer 2027“ (110 ms je Zeichen) und zurück zu „Cambo“, drei Tage weiter (je 1500 ms)" }, "ausloeser": "dauer", "touch": "Gleiches Verhalten per Antippen. Unter 820 px eine Spalte, Bühne oben und nicht sticky; Woche als Raster mit 4 Spalten, Team-Karten zweispaltig, unter 520 px einspaltig. Regler-Knopf 28 px, Felder 50 px hoch.", "reduziert": "Statische Form des Tages: Uhrzeit fest 12:00, Zufall aus, kein Tween, keine Live-Uhr. Die Vorführung wechselt Saat und Tage ohne Zeitraffer und ohne Übergang.", "korrekturen": { "umsetzung": "Zeichen als SVG aus Parametern zeichnen. Gerüst fest (hier Ring mit Öffnung und Signalpunkt), Ausschnitte über , damit der Export transparent bleibt. Regeln als reine Funktionen: Uhrzeit → Winkel der Öffnung, Wochentag → Zahl der Schnitte, Saat-Text → FNV-1a-Hash → mulberry32 → Ringe und Öffnungsweite. Zufall pro Besuch: @property --zufall { syntax: ''; inherits: true; initial-value: .5 } und @supports (opacity: random(0, 1)) { .buehne { --zufall: random(0, 1) } }; JS liest den berechneten Wert, sonst mulberry32 mit einer Saat aus sessionStorage. Übergänge: alle Zahlen mit expo.out 1200 ms tweenen, Winkel auf kürzestem Weg, diskrete Werte über Präsenz 0 → 1. Download: SVG-Text mit festen Farben als Blob. Für Druck und Favicon eine feste Grundform festlegen (z. B. 12 Uhr, Saat = Markenname). Browserstand (02.11.2026): random() ist seit Chrome 156 stabil (20.10.2026) und in Safari seit 26.2, Firefox fehlt noch; deshalb bleibt die @supports-Weiche mit JS-Rückfall. Für einen Wert je Element gilt das Schlüsselwort element-scoped, das ältere per-element lehnt Chrome 156 ab.", "reduzierte_bewegung": "Statische Form des Tages: Uhrzeit fest auf 12 Uhr, kein Zufall, kein Tween, keine Live-Uhr. Änderungen an den Reglern erscheinen sofort." }, "geprueft": "02.11.2026", "notiz": "Welt: Rezept kreativstudio-buehne, erfundenes Studio Cambo für Bewegung und Marke aus Kempten (Name nach Cambodunum). Schwarz-Weiß mit Signalorange #FF5A1F, TikTok Sans wdth 75/800 und DM Mono, eine Kurve expo.out; kein Beige. Bühne invertiert zwischen Tag und Nacht, vier Eckenlabels wie ein Kontaktbogen, Regelliste mit Live-Werten, Regler für Saat, Uhrzeit, Datum und Zufall, Download als SVG. Variante Team zeigt Visitenkarten mit Namen als Saat (Prinzip MIT Media Lab). Im Headless-Chromium greift der JS-Rückfall für random(); CSS-Zweig nicht in Safari 26.2 geprüft. Referenzen: thenextweb.com, neue.no, dezeen.com, developer.mozilla.org. AD-Review 02.11.2026: Note 4. Zugang 02.11.2026: Erzeugte Zeichen-SVGs ohne Titel bekommen aria-hidden (Name kommt vom umgebenden role=\"img\" bzw. Knopf, der Download behält seinen ); Knopf-Rahmen im Kontrastmodus. Korrektur 02.11.2026: Status random() (Chrome 156 stabil seit 20.10.2026, element-scoped) in korrekturen.umsetzung nachgetragen. Demo unverändert, sie prüft per @supports.", "varianten": [ { "id": "tag", "name": "Tag und Woche", "wann": "Studio- oder Kulturseite, deren Zeichen im Kopf und auf der Startseite mit Uhrzeit und Datum lebt; die Woche zeigt die Verwandtschaft.", "werte": { "saat": "Cambo", "leiste": "7 Zeichen Mo–So, gleiche Uhrzeit, Tippen setzt das Datum" } }, { "id": "team", "name": "Team-Karten", "wann": "Visitenkarten, Signaturen oder Ausweise je Person (wie beim MIT Media Lab), auch Plakate je Veranstaltung: Saat ist der Name.", "werte": { "saat": "Name der Person", "leiste": "4 Karten auf #F2F2F2 mit Zeichen 64 px, Tippen setzt die Saat" } } ] } }