Generatore Pattern

Pattern di sfondo CSS/SVG geometrici e organici.

Stile del pattern

PuntiGrigliaStrisceOnde

Colore del pattern

Colore di sfondo

Dimensione del pattern40px

Raggio del punto4px

Opacità del pattern30%

Rendering del pattern in tempo reale utilizzando SVG inline altamente efficienti. Responsive e perfettamente allineato.

Codice sfondo CSS

background-image: url("data:image/svg+xml;base64,");
background-color: #0f0f11;

Codice XML SVG grezzo

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="4" fill="#ff6b35" fill-opacity="0.3" />
</svg>

Come funziona

I pattern vengono generati proceduralmente e si piastrellano senza giunzioni; le texture irregolari disegnate a mano sono fuori ambito.
I pattern molto densi aumentano la dimensione dell'SVG: mantieni la densità moderata per sfondi leggeri.

Sì: si piastrellano senza giunzioni visibili, quindi possono riempire in modo pulito uno sfondo di qualsiasi dimensione.

Il CSS inline è più rapido per uno sfondo web; l'SVG grezzo ti dà una risorsa autonoma che puoi modificare o riutilizzare altrove.

No. I pattern vengono generati interamente nel tuo browser.