Seamless Pattern Maker: Kacheln & Wiederholungen

Was ist der Seamless Pattern Maker?

Der Seamless Pattern Maker nimmt ein einzelnes Kachelbild und rendert es auf einer konfigurierbaren Leinwand, um ein nahtloses Kachelmuster zu erstellen und zu exportieren. Sie steuern Skalierung, Rotation, Abstand und wählen aus vier Kachelmodi — normales Raster, Halbversatz, Diagonal und Gespiegelt — um genau zu sehen, wie die Kachel bei der Wiederholung aussieht. Nach der Vorschau exportieren Sie das Ergebnis als großes PNG-Bild oder kopieren ein fertiges CSS-background-image-Snippet. Die gesamte Verarbeitung erfolgt lokal im Browser ohne Datei-Uploads an einen Server.

Hauptfunktionen

• Kachelbild per Drag & Drop oder Klick hochladen: Der Upload-Bereich akzeptiert Drag & Drop und Klick-zum-Durchsuchen. Dateien größer als 10 MB werden mit einer Fehlermeldung abgelehnt. Die Abmessungen der geladenen Kachel werden unterhalb der Vorschau angezeigt.
• Live-Kachelvorschau: Bei jeder Einstellungsänderung wird die Leinwand sofort neu gezeichnet. Die Leinwand rendert genug Kacheln, um den gesamten Vorschaubereich zu füllen, einschließlich zusätzlicher Kacheln an den Rändern für Rotationsüberlauf.
• Skalierung 5 % bis 400 %: Ein Schieberegler in 5 %-Schritten skaliert die Kachel relativ zu ihren ursprünglichen Pixelabmessungen. Bei 100 % wird die Kachel in natürlicher Größe dargestellt.
• Rotationssteuerung 0 bis 360 Grad: Dreht jede Kachel um ihren Mittelpunkt. Funktioniert mit jedem Kachelmodus.
• Abstand zwischen Kacheln: Ein Schieberegler von -50 bis 50 px steuert den Abstand. Positive Werte fügen Zwischenraum in der Hintergrundfarbe hinzu; negative Werte lassen Kacheln überlappen.
• Vier Kachelmodi: Normal — Standardraster ohne Versatz. Halbversatz — abwechselnde Reihen werden um eine halbe Kachelbreite versetzt, wie bei einem Mauerwerk. Halbabsenkung — abwechselnde Spalten werden um eine halbe Kachelhöhe nach unten versetzt. Gespiegelt — abwechselnde Spalten werden horizontal gespiegelt, abwechselnde Reihen vertikal gespiegelt, was Kaleidoskop-ähnliche Symmetrie erzeugt.
• Konfigurierbare Leinwandgröße: Breite und Höhe akzeptieren 100–4096 Pixel. Vorschau und exportiertes PNG verwenden diese genauen Abmessungen.
• Als PNG exportieren: Lädt die gerenderte Leinwand als pattern-[Breite]x[Höhe].png herunter.
• CSS-Hintergrundsnippet kopieren: Generiert eine Einzelkachel-Leinwand und kopiert drei CSS-Eigenschaften in die Zwischenablage: background-image, background-repeat und background-size.

So verwenden Sie den Seamless Pattern Maker

Schritt 1: Kachelbild hochladen

Ziehen Sie eine Bilddatei in den Upload-Bereich oder klicken Sie, um eine Datei auszuwählen. Jedes von Ihrem Browser nativ unterstützte Bildformat wird akzeptiert. Die Kachelabmessungen werden unterhalb der Vorschau angezeigt — zum Beispiel „64 x 64px". Bei Dateien über 10 MB zeigt das Tool den Fehler „Datei zu groß" und lehnt sie ab. Nach einem erfolgreichen Upload rendert die Vorschau das Kachelmuster sofort mit Standardeinstellungen.

Gute Kachelbilder sind solche, die ohne sichtbare Nähte natürlich kacheln — nahtlos kachelbare Texturen, Symbolmuster, geometrische Formen oder Bilder, die Sie speziell zum Kacheln gestaltet haben. Regelmäßige Muster wie Zickzack, Punkte oder Webmuster funktionieren besonders gut.

Schritt 2: Kachelmodus auswählen

Im Abschnitt Steuerungen erscheinen vier Modusschaltflächen:

• Normal: Standardraster, alle Kacheln in Reihen und Spalten ausgerichtet.
• Halbversatz: Ungerade Reihen werden um die Hälfte eines Kachelschritts nach rechts verschoben — genau wie ein klassisches Mauerwerkmuster.
• Halbabsenkung: Ungerade Spalten werden um die Hälfte eines Kachelschritts nach unten verschoben, was ein vertikales Staffelmuster erzeugt, das häufig in Tapeten und Stoffmustern vorkommt.
• Gespiegelt: Jede zweite Spalte wird horizontal gespiegelt (ctx.scale(-1, 1)) und jede zweite Reihe vertikal gespiegelt (ctx.scale(1, -1)), was symmetrische Reflexionen über Kachelgrenzen hinweg erzeugt.

Klicken Sie auf jeden Modus, um die Wirkung sofort auf der Leinwand zu sehen.

Schritt 3: Skalierung, Rotation und Abstand anpassen

Drei Schieberegler verfeinern das Kacheln:

• Skalierung (5 %–400 %): Bei 100 % wird die Kachel in natürlicher Pixelgröße gerendert. Erhöhen Sie auf 200 %, um das Muster auffälliger zu machen; verringern Sie auf 50 % für ein dichtes Mikromuster.
• Rotation (0°–360°): Drehen Sie die Kacheln, um diagonale Streifeneffekte zu erzeugen oder einem Muster Dynamik hinzuzufügen. Eine 45°-Rotation einer Streifenkachel ergibt ein diagonales Streifenmuster.
• Abstand (-50 bis 50 px): Positive Werte fügen Abstand zwischen Kacheln hinzu, der mit der Hintergrundfarbe gefüllt wird. Negative Werte lassen benachbarte Kacheln überlappen.

Schritt 4: Leinwandgröße und Hintergrundfarbe konfigurieren

Geben Sie die Ausgabeleinwandbreite und -höhe (je 100–4096 px) in die zwei Zahlenfelder ein. Die Live-Vorschau skaliert sich für Ihren Bildschirm, aber die tatsächliche Leinwand wird in den angegebenen Abmessungen gerendert. Für einen CSS-Hintergrundtest sind 800×600 ausreichend. Für einen druckfertigen Export verwenden Sie 2400×2400 oder größer.

Klicken Sie auf das Hintergrundfarben-Farbfeld, um die Füllfarbe zwischen und um Kacheln herum auszuwählen.

Schritt 5: Als PNG exportieren oder CSS kopieren

Klicken Sie auf die Schaltfläche PNG, um die gerenderte Leinwand als pattern-[Breite]x[Höhe].png herunterzuladen.

Klicken Sie auf CSS, um ein fertiges CSS-Snippet in die Zwischenablage zu kopieren. Das Snippet kodiert eine einzelne Kachel als Base64-Daten-URI. Die drei kopierten Eigenschaften sind:

background-image: url("data:image/png;base64,...");
background-repeat: repeat;
background-size: 72px 72px;

Die background-size-Werte entsprechen der skalierten Kachelbreite plus Abstand und der skalierten Kachelhöhe plus Abstand. Fügen Sie dies direkt in Ihr Stylesheet ein.

Praktische Beispiele

Mauerwerk-Hintergrund für eine Website

Laden Sie eine 128×64 Ziegelstein-Kachel hoch. Wählen Sie den Modus „Halbversatz", setzen Sie die Skalierung auf 100 %, Abstand auf 2 px und Hintergrundfarbe auf #2c1810 (dunkles Mörtelbraun). Stellen Sie die Leinwand auf 800×600. Die Vorschau zeigt ein realistisches Mauerwerkmuster. Kopieren Sie das CSS-Snippet und fügen Sie es in eine .hero-section-CSS-Regel ein.

Halbabsenkungs-Streifenmuster für ein Banner

Laden Sie eine 40×40 Streifenkachel (ein einfarbiger diagonaler Streifen auf transparentem Hintergrund als PNG) hoch. Wählen Sie „Halbabsenkung", setzen Sie Skalierung auf 150 %, Rotation auf 45°, Abstand auf 0 px. Die Streifen kombinieren sich mit dem Halbabsenkungsversatz zu einem dichten, gestaffelten Streifenmuster. Exportieren Sie als 1200×400 PNG für einen Banner-Hintergrund.

Kaleidoskop-Kachel für ein Druckdesign

Laden Sie eine 100×100 geometrische Kachel mit einem farbigen Muster in einem Quadranten hoch. Wählen Sie „Gespiegelt", Skalierung 100 %, Rotation 0°, Abstand 0 px. Der gespiegelte Modus spiegelt die Kachel horizontal und vertikal in einer 2×2-Wiederholungseinheit. Exportieren Sie mit 2400×2400 für ein hochauflösendes druckfertiges Muster.

CSS-Hintergrundmuster für eine Kartenkomponente

Laden Sie eine kleine Punkttextur-Kachel (32×32 PNG) hoch. Wählen Sie „Normal", Skalierung 75 %, Abstand 6 px, Hintergrund #f8f8f8. Leinwand 400×400. Kopieren Sie das CSS-Snippet. In Ihrem Stylesheet:

.card-background {
  background-image: url("data:image/png;base64,...");
  background-repeat: repeat;
  background-size: 30px 30px;
}

Die Punkte kacheln nahtlos über die Karte, unabhängig von ihrer Größe.

Tipps und bewährte Praktiken

Verwenden Sie speziell für nahtloses Kacheln entworfene Kacheln. Das Tool rendert, welche Kachel Sie auch hochladen; es macht Kacheln nicht automatisch an ihren Kanten nahtlos. Wenn Ihr Kachelbild Inhalt hat, der nicht an den Rändern übereinstimmt, sehen Sie sichtbare Nahtlinien. Entwerfen oder beschaffen Sie Kacheln, die bereits nahtlos kachelbar sind.

Der gespiegelte Modus eliminiert sichtbare Wiederholungen. Selbst nicht-nahtlose Kacheln sehen im gespiegelnden Modus oft akzeptabel aus, weil die Reflexionen die Kanten verbergen. Probieren Sie zuerst den gespiegelten Modus, wenn Ihre Kachel nicht zum Kacheln entworfen wurde.

Rotation fügt Leinwand-Randkacheln hinzu. Das Tool berechnet einen Rand gleich 2 × Math.max(KachelB, KachelH) und rendert Kacheln über die Leinwandgrenzen hinaus, um eventuelle Lücken durch Rotation zu füllen.

Das CSS-Snippet verwendet eine Einzelkachel-Daten-URL. Der CSS-Export erstellt eine neue Leinwand in der Größe (KachelB + Abstand) × (KachelH + Abstand) für das Snippet. Dies hält die Daten-URL klein und lässt den Browser das unendliche Kacheln nativ über background-repeat: repeat übernehmen.

Einstellungen sind über URL teilbar. Das Tool kodiert Ihre aktuellen Einstellungen (Skalierung, Rotation, Abstand, Leinwandgröße, Hintergrundfarbe, Kachelmodus) in die URL. Teilen Sie die URL mit einem Mitarbeiter und er sieht Ihre genaue Konfiguration.

Die Abstandssteuerung reicht von -50 bis 50 px. Für fugenbettige Effekte ist ein positiver Abstand von 3–8 px mit einer kontrastreichen Hintergrundfarbe typisch realistisch. Werte über 20 px erzeugen sehr weit voneinander entfernte Kacheln, die für Symbolraster oder weiträumige geometrische Muster geeignet sind.

Häufige Probleme und Fehlerbehebung

Fehler „Datei zu groß": Das Tool lehnt Dateien über 10 MB ab. Komprimieren Sie Ihr Kachelbild auf unter 10 MB, bevor Sie es hochladen.

Fehler „Ungültiges Format": Das Tool erfordert eine gültige Bilddatei (file.type.startsWith('image/')). Nicht-Bild-Dateien werden abgelehnt.

Muster zeigt sichtbare Nahtlinien: Die Kachelkanten stimmen nicht überein. Das Tool rendert, welche Kachel Sie hochladen. Für ein nahtloses Ergebnis verwenden Sie ein Bild, das speziell für nahtloses Kacheln entworfen wurde. Der gespiegelte Modus kann nicht-nahtlose Kanten teilweise verbergen.

Leinwand erscheint nach dem Hochladen leer: Die Live-Vorschau rendert nur, wenn ein Kachelbild geladen ist. Wenn der Upload erfolgreich war (Miniaturansicht ist sichtbar), aber die Leinwand leer ist, versuchen Sie, das Bild neu hochzuladen. Stellen Sie auch sicher, dass Leinwandbreite und -höhe nicht auf Werte gesetzt sind, die das Rendering verhindern.

Toast „Kein Bild geladen" beim Exportieren: Klicken Sie auf PNG oder CSS, ohne ein Bild geladen zu haben. Laden Sie zuerst ein Kachelbild hoch.

CSS-Snippet hat eine sehr große Daten-URL: Die Einzelkachel-Leinwand ist proportional zur Skalierungseinstellung. Bei Skalierung 400 % auf einer großen Kachel kann die CSS-Daten-URI recht groß werden. Für Produktions-CSS empfiehlt es sich, die Kachel als separate Bilddatei zu speichern und mit einer regulären URL zu referenzieren.

Datenschutz und Sicherheit

Der Seamless Pattern Maker verarbeitet alle Bilder vollständig in Ihrem Browser. Kachelbilder werden über die FileReader-API geladen und als speicherinterne Daten gespeichert. Alle Canvas-Operationen (Zeichnen, Skalieren, Drehen, Spiegeln) verwenden die Canvas 2D-API des Browsers ohne Server-Kommunikation. Der CSS-Export kopiert Daten nur in Ihre lokale Zwischenablage. Das Tool funktioniert offline, nachdem die Seite einmal geladen wurde.

Häufig gestellte Fragen

Ist der Seamless Pattern Maker kostenlos? Ja, vollständig kostenlos. Alle vier Kachelmodi, alle Steuerungen, PNG-Export und CSS-Kopieren sind ohne Kosten und ohne erforderliches Konto verfügbar.

Funktioniert der Seamless Pattern Maker offline? Ja. Nach dem ersten Seitenladen verwendet das gesamte Rendering die Canvas 2D-API in Ihrem Browser. Während der Mustererstellung oder des Exports werden keine Netzwerkanfragen gestellt.

Sind meine Daten mit dem Seamless Pattern Maker sicher? Ihre Kachelbilder verlassen Ihr Gerät nicht. Die FileReader-API lädt sie in den lokalen Browser-Speicher, und alle Verarbeitungs- und Exportvorgänge erfolgen clientseitig. Nichts wird an einen Server übertragen.

Welche Bildformate kann ich als Kacheln verwenden? Jedes Bildformat, das Ihr Browser nativ unterstützt: JPEG, PNG, WebP, GIF, SVG (als Bildelement) und in neueren Browsern AVIF und HEIC. Animierte GIFs verwenden nur den ersten Frame.

Was ist die maximale Kacheldateigröße? Das Tool erzwingt eine Dateigrößenbeschränkung von 10 MB. Dateien größer als 10 MB lösen den Fehler „Datei zu groß" aus und werden abgelehnt.

Wie funktioniert der Halbversatz-Kachelmodus? Im Halbversatz-Modus verschiebt jede ungerade Reihe (Reihenindex % 2 === 1) ihre Start-X-Position um SchrittX / 2 nach rechts. Dies erzeugt das klassische Mauerwerk-Verbundmuster, bei dem horizontale Fugen versetzt sind.

Wie funktioniert der gespiegelte Kachelmodus? Die Spiegelung wird pro Kachel während des Canvas-Renderings angewendet. Für jede Kachel prüft das Tool, ob ihr Spaltenindex ungerade ist (horizontal spiegeln) und ob ihr Reihenindex ungerade ist (vertikal spiegeln). Es wendet ctx.scale(-1, 1) und/oder ctx.scale(1, -1) an, bevor die Kachel gezeichnet wird, und stellt anschließend den Canvas-Zustand wieder her.

Kann ich das CSS-Snippet in der Produktion verwenden? Ja, aber für den Produktionseinsatz ist eine separate Bilddatei generell vorzuziehen. Eingebettete Daten-URLs in CSS können nicht unabhängig vom Browser gecacht werden, erhöhen die Stylesheet-Größe und sind schwer zu aktualisieren.

Wie wirkt sich Rotation auf das Kachelraster aus? Die Rotation wird auf jede Kachel einzeln angewendet, mit ctx.save(), ctx.translate(), ctx.rotate() und ctx.restore(). Das Kachelraster selbst wird nicht gedreht — nur das Kachelbild innerhalb jeder Position wird gedreht.

Kann ich meine Mustereinstellungen speichern? Ja. Einstellungen werden automatisch über useShareableState in der URL kodiert, sodass das Setzen eines Lesezeichens oder das Teilen der URL Ihre aktuelle Konfiguration beibehält. Premium-Unterstützer können auch benannte Voreinstellungen speichern.

Verwandte Tools

• Demnächst verfügbar: SVG Pattern Generator — Skalierbare Vektormuster programmatisch erstellen, ohne ein Quellkachelbild zu benötigen.
• Demnächst verfügbar: Placeholder Generator — Einfarbige Platzhalterbilder als schnelle Kacheleingaben zum Testen des Muster-Makers generieren.
• Demnächst verfügbar: Noise Texture — Prozedurale Rauschtexturen generieren, die gut als nahtlose Kacheleingaben funktionieren.
• Demnächst verfügbar: Image Effects — Filter auf Ihr Kachelbild anwenden, bevor Sie es als Eingabe für den Muster-Maker verwenden.

Jetzt Seamless Pattern Maker ausprobieren: Glyph Widgets Seamless Pattern Maker