Bild: https://codepen.io/mhsenkow/pen/OyQOVx (Screenshot, MIT License)</em>

Vor dem Start von edulabs hatte ich nebenher noch einige WordPress-Seiten entwickelt, bei der Gestaltung kamen auch bewegte Grafiken zum Einsatz. Mit solchen bewegten Elementen sollte man es nicht übertreiben, sie können das Thema einer Seite aber manchmal besser vermitteln als ein statisches Bild. Hier eine kleine Übersicht.

Was mit automatisch generierten Grafiken alles möglich ist, zeigt sich bei der Auswahl an “picked pens” mit CSS- und Javascript-Beispielen auf der Seite Codepen.io:

Leider lassen sich diese Grafiken nur begrenzt einsetzen; der Browser wird sonst zu langsam. Mit etwas Zufall wirken WordPress- und andere Seiten aber weniger langweilig.

Eine hübsche Kombination ist auch die Polygonisierung von Stockphotos (z.B. bei unsplash.com) mit dem kostenlosen Tool Polyvia, ich habe diese Technik bereits für einige Titelbilder verwendet.

Die Effekte lassen sich relativ einfach mit einfachen <div>-Elementen und etwas Javascript einfügen, ein Tutorial dazu findet sich z.B. hier.

Weitere Beispiele für autogenerierte Grafiken:

Autogenerierte Bilder sind auch sehr praktisch für lizenzfreie Titelbilder, da die Codepen-Programme unter einer MIT-Lizenz stehen. Für weitere Anregungen lohnt sich eine Twittersuche nach #generativeart, #proceduralart, oder (mit wenigen Ausnahmen) der folgende Twitter-Bot:

Bild: https://codepen.io/mhsenkow/pen/OyQOVx (Screenshot, MIT License)