Softonic

SVG-Punktmuster-Generator

Schritt 1 / 3
Weiter

Punktmuster sind die unauffälligen Arbeitstiere moderner Webhintergründe, denken Sie an das subtile gepunktete Gitter hinter einer Notion-Seite, die Polka-Dots in einem Hero-Bereich oder die körnige Textur auf einer Karte. Dieser Generator erstellt ein einzelnes SVG mit einer Inline-<pattern>-Definition, sodass die Datei klein bleibt (normalerweise unter 500 Bytes) und in jeder Größe perfekt gekachelt wird. Sie steuern die Leinwand, den Abstand zwischen den Punkten, den Radius, die Punktfarbe und den Hintergrund.

So erstellen Sie ein Punktmuster

  1. 1

    Leinwand festlegen

    Breite und Höhe in Pixeln. Für CSS-Hintergründe kann dies klein bleiben (z. B. 800×600) und gekachelt werden.

  2. 2

    Wählen Sie den Abstand

    Abstand zwischen den Mittelpunkten benachbarter Punkte. 20-40 px sieht sauber aus; 10 px wird unruhig.

  3. 3

    Setzen Sie den Punkt-Radius

    1-3 px für subtile Textur, 4-8 px für absichtliche Polka-Dots.

  4. 4

    Farben wählen

    Punktfüllung (Vordergrund) und Leinwandhintergrund. Setzen Sie den Hintergrund auf `transparent` für ein echtes Overlay-Muster.

  5. 5

    SVG kopieren

    In Ihr HTML einfügen oder als `background-image: url("data:image/svg+xml,...")` in CSS verwenden.

So wird das Muster definiert

Der Generator gibt ein <pattern>-Element innerhalb von <defs> aus und füllt ein vollflächiges <rect> mit fill="url(#dots)":

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" fixiert die Kachelgröße auf Pixel, sodass das Skalieren des übergeordneten SVG die Punkte nicht verzerrt.

Muster-Tuning-Spickzettel

Aussehen Abstand Radius Kontrast
Flüstern (kaum sichtbar) 30-40 1-1.5 5-10% Opazität
Subtiler Hintergrund 25-30 2 15-20% Opazität
Ehrliches Punktmuster 20 2-3 Volle Farbe
Absichtliche Polka-Dots 40-60 8-15 Volle Farbe
Halftone-Effekt 10 1 Farbverlauf

Verwendung als CSS-Hintergrund

Kodieren Sie das SVG als Daten-URL und wenden Sie es auf jedes Element an:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Das Kacheln des SVG über CSS ist schneller als das Versenden eines PNG, der Browser rasterisiert es in der endgültigen Anzeigengröße, sodass es auf jedem DPR (1x, 2x, 3x Displays) scharf bleibt.

Wenn Punkte die Lesbarkeit beeinträchtigen

Ein Punktmuster direkt hinter dem Fließtext kann ein schimmerndes Moiré gegen feinen Text erzeugen. Wenn Sie Text darüber legen müssen, entweder:

  • Erhöhen Sie den Abstand auf 40+ px, damit die Punkte zwischen den Zeilen fallen, oder
  • Senken Sie die Musteropazität unter 10%, oder
  • Platzieren Sie den Text in einer soliden Karte über dem Muster.

Häufig gestellte Fragen

Setzen Sie die Hintergrundfarbe auf transparent, dann ist nur die Farbe der Punkte sichtbar. Platzieren Sie das SVG über der Farbe oder dem Bild, das Sie durchscheinen lassen möchten.

Nicht mit diesem Generator, er erzeugt ein quadratisches Gitter. Für ein hexagonales Layout benötigen Sie ein Musterkachel, die sqrt(3) mal so hoch ist wie sie breit ist, mit zwei Kreisen pro Kachel, die um die Hälfte versetzt sind. Ziehen Sie den SVG-Pfad-Builder oder einen speziellen Hex-Generator in Betracht.

SVG selbst ist in jeder Größe scharf, aber wenn Sie es in einer Auflösung rasterisieren, die kleiner ist als die Musterkachel, erhalten Sie Aliasing. Exportieren Sie bei 2x oder 3x Ihrer beabsichtigten Anzeigengröße.

Ersetzen Sie fill="#hex" im Kreis durch fill="url(#gradient-id)" und fügen Sie eine <linearGradient>-Definition innerhalb des gleichen <defs> hinzu. Jeder Punkt wird dann mit diesem Farbverlauf gerendert, was teuer sein kann, wenn die Leinwand Tausende von Punkten hat.

Der Standardeditor sendet Fläche, Abstand, Radius und Farben zur Vorschau an den Server. Im geführten Ablauf erscheinen diese Einstellungen zusätzlich in der Seiten-URL. Gib keine sensiblen Daten ein; das Tool speichert kein wiederverwendbares Musterprojekt.

Verwandte Tools

Material Design Farbpicker

Durchsuchen Sie die Material Design Farbpalette. Kopieren Sie jeden Farbton (50 bis A700) als HEX, RGB oder HSL mit einem Klick.

GIF komprimieren

Reduziere die Größe animierter GIFs direkt im Browser, indem du Abmessungen verkleinerst, weniger Frames behältst und die Kodierungsqualität anpasst. Vorschau vor dem Download inklusive.

Flaggen-Generator

Entwirf im Browser eine einfache eigene Flagge im Format 3:2 mit sechs Layouts, Farben, Text und einem Symbol. Lade SVG oder PNG herunter oder öffne den Druckdialog des Browsers.

Vision Board erstellen

Verwandeln Sie Ihre Ziele in ein visuelles Board: Bilder hochladen, persönlichen Titel und Bildunterschriften ergänzen, Farben und Layout wählen und ein druckbares PNG herunterladen. Alles bleibt in Ihrem Browser.

Kontaktbogen erstellen

Ordnen Sie Fotos auf druckbaren A4- oder Letter-Kontaktbögen an, ergänzen Sie Beschriftungen und laden Sie die Seiten als JPEG oder PDF herunter.

Bildrahmen hinzufügen

Fügen Sie um jedes Foto einen einfarbigen Rahmen mit einstellbarer Dicke, einer kontrastierenden Innenlinie und Live-Vorschau hinzu, alles in Ihrem Browser.

Tool in anderen Sprachen verfügbar