CSS-Musterhintergrundgenerator

Die meisten „Mustergenerator“-Tools verwenden für jede Option stillschweigend dieselbe Formel für sich wiederholende lineare Farbverläufe und ändern lediglich die Zahlen. Dies ist hier nicht der Fall: Jeder der sechs Mustertypen hier basiert auf der spezifischen CSS-Technik, die diese Form tatsächlich erzeugt. Streifen verwenden einen einzelnen sich wiederholenden linearen Farbverlauf mit zwei Farbbändern. Punkte verwenden einen radialen Farbverlauf, der ausschließlich durch die Hintergrundgröße gekachelt wird – der klassische CSS-Punkte-Trick – und nicht einen sich wiederholenden radialen Farbverlauf, der einen kreisförmigen Punkt nicht sauber auf einem rechteckigen Raster kacheln kann. Checkerboard verwendet die echte konische Gradientenformel mit vier Quadranten: Ein konischer Gradient, der in einer quadratischen Kachel zentriert ist, teilt sich auf natürliche Weise in vier Quadrantenquadrate an 90-Grad-Grenzen auf, und zwei Farben wechseln sich über diese Quadrantenkacheln ab, sodass ein echtes Schachbrett entsteht, keine Annäherung.

Sowohl das Gitter als auch die diagonale Kreuzschraffur überlagern zwei sich wiederholende lineare Farbverläufe als separate Hintergrundbildeinträge, anstatt die zweite Richtung mit Randtricks vorzutäuschen. Das Raster kombiniert einen sich wiederholenden Verlauf „nach rechts“ und „nach unten“ für klare horizontale und vertikale Regellinien. Kreuzschraffur überlagert einen sich wiederholenden Farbverlauf von +45 Grad und -45 Grad für ein diagonales Gewebe im Korbgeflecht-Stil – es lohnt sich, genau zu sein: Dies ist eine ehrliche Kreuzschraffur, keine echte Fischgrätengeometrie, und das Werkzeug beschriftet sie so, anstatt sie zu überbewerten. Bei Dreiecken wird die Technik des konischen Farbverlaufs mit vier Keilen des Schachbretts wiederverwendet, der Farbverlauf beginnt jedoch um 45 Grad gedreht, wodurch die Keilgrenzen von den Randmittelpunkten der Kachel zu den Ecken verschoben werden und dieselben vier Keile in vier Dreiecke von Ecke zu Ecke statt in vier Quadrantenquadrate umgewandelt werden.

Jeder Mustertyp stellt nur die Steuerelemente zur Verfügung, die tatsächlich auf ihn zutreffen – ein Winkelschieberegler wird für Streifen angezeigt, Punktradius und -abstand werden für Punkte angezeigt, Linienstärke wird für Raster und Kreuzschraffur angezeigt – und das große gekachelte Vorschaufeld wird bei jeder Änderung neu gezeichnet, sodass Sie mehrere vollständige Wiederholungen sehen können, bevor Sie sich auf einen Wert festlegen. Wechseln Sie den Ausgabemodus zu SVG, und das gleiche Muster erscheint wieder als <pattern>-Element, das aus einfachen Rechteck-, Kreis-, Pfad- oder Polygongrundelementen besteht und zum Einfügen in die <defs> eines beliebigen SVG-Dokuments bereit ist. Mit einem Klick können Sie eine eigenständige SVG-Datei herunterladen.

Alles läuft lokal in Ihrem Browser: keine Bild-Uploads, kein Server-Roundtrip, kein Konto. Für durchgehende oder verlaufende Füllungen ohne Wiederholung ist stattdessen der CSS-Verlaufsgenerator auf dieser Website das richtige Werkzeug; Dieses ist speziell für kachelbare geometrische Hintergründe gedacht, die aus null Bildelementen erstellt wurden.