Softonic

Generatore di Pattern a Punti SVG

Passaggio 1 / 3
Avanti

I pattern a punti sono il cavallo di battaglia discreto degli sfondi web moderni, pensa alla sottile griglia a punti dietro una pagina di Notion, ai pois in una sezione principale o alla texture simile a grana su una scheda. Questo generatore crea un singolo SVG utilizzando una definizione <pattern> inline, quindi il file rimane piccolo (di solito sotto i 500 byte) e si ripete perfettamente a qualsiasi dimensione. Controlli la tela, la spaziatura tra i punti, il raggio, il colore dei punti e lo sfondo.

Come costruire un pattern a punti

  1. 1

    Imposta la tela

    Larghezza e altezza in pixel. Per gli sfondi CSS può rimanere piccolo (ad es. 800×600) e essere ripetuto.

  2. 2

    Scegli la spaziatura

    Distanza tra i centri dei punti vicini. 20-40 px appare pulito; 10 px diventa rumoroso.

  3. 3

    Imposta il raggio del punto

    1-3 px per una texture sottile, 4-8 px per pois deliberati.

  4. 4

    Scegli i colori

    Riempimento del punto (primo piano) e sfondo della tela. Imposta lo sfondo su `transparent` per un vero pattern sovrapposto.

  5. 5

    Copia l'SVG

    Incolla nel tuo HTML o usalo come `background-image: url("data:image/svg+xml,...")` in CSS.

Come è definito il pattern

Il generatore produce un elemento <pattern> all’interno di <defs> e riempie un <rect> a tutta tela con 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" blocca la dimensione della piastrella ai pixel, quindi scalare l’SVG genitore non distorce i punti.

Scheda di sintesi per la regolazione del pattern

Aspetto Spaziatura Raggio Contrasto
Sussurro (appena visibile) 30-40 1-1.5 5-10% opacità
Sfondo sottile 25-30 2 15-20% opacità
Pattern a punti onesto 20 2-3 Colore pieno
Pois deliberati 40-60 8-15 Colore pieno
Effetto mezzotono 10 1 Riempimento a gradiente

Utilizzarlo come sfondo CSS

Codifica l’SVG come URL di dati e applicalo a qualsiasi elemento:

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

Ripetere l’SVG tramite CSS è più veloce che spedire un PNG, il browser lo rasterizza alla dimensione finale di visualizzazione, quindi rimane nitido su ogni DPR (display 1x, 2x, 3x).

Quando i punti danneggiano la leggibilità

Un pattern a punti direttamente dietro il testo del corpo può creare un moiré scintillante contro un testo fine. Se devi mettere del testo sopra, o:

  • Aumenta la spaziatura a 40+ px in modo che i punti cadano tra le righe, oppure
  • Riduci l’opacità del pattern sotto il 10%, oppure
  • Metti il testo all’interno di una scheda solida sopra il pattern.

Domande frequenti

Imposta il colore di sfondo su transparent, quindi l’unico riempimento sono i punti stessi. Posiziona l’SVG sopra qualsiasi colore o immagine che desideri far vedere.

Non con questo generatore, produce una griglia quadrata. Per un layout esagonale hai bisogno di una piastrella di pattern che è sqrt(3) volte più alta che larga, con due cerchi per piastrella spostati di metà. Considera il costruttore di percorsi SVG o un generatore esagonale dedicato.

L’SVG stesso è nitido a qualsiasi dimensione, ma se lo rasterizzi a una risoluzione inferiore rispetto alla piastrella del pattern, ottieni aliasing. Esporta a 2x o 3x la dimensione di visualizzazione prevista.

Sostituisci fill="#hex" sul cerchio con fill="url(#gradient-id)" e aggiungi una definizione <linearGradient> all’interno dello stesso <defs>. Ogni punto verrà quindi renderizzato con quel gradiente, il che può essere costoso se la tela ha migliaia di punti.

L’editor standard invia tela, spaziatura, raggio e colori al server per renderizzare l’anteprima. Nel flusso guidato, queste impostazioni compaiono anche nell’URL. Non inserire dati sensibili; lo strumento non salva un progetto di pattern riutilizzabile.

Strumenti correlati

Selettore Colori Material Design

Sfoglia la palette di colori Material Design. Copia qualsiasi tonalità (da 50 a A700) in HEX, RGB o HSL con un solo tocco.

Convertitore Pantone in HEX

Converti i colori Pantone PMS nei valori HEX, RGB e CMYK più vicini per la corrispondenza su schermo e stampa, con anteprima del campione.

Convertitore da foto a disegno

Trasforma foto JPEG, PNG o WebP in disegni a grafite, matita morbida o carboncino nel browser, quindi esporta in PNG o JPEG.

Creatore di bandiere

Progetta nel browser una semplice bandiera personalizzata 3:2 con sei layout, colori, testo e un simbolo. Scarica SVG o PNG, oppure apri la finestra di stampa del browser.

Creatore di giornali

Crea una prima pagina di giornale con titoli e articoli tuoi, poi copia o scarica il testo semplice oppure usa la finestra di stampa del browser.

Creatore di provini a contatto

Disponi le foto su provini a contatto A4 o Letter con didascalie, ritaglio e anteprima, quindi scarica le pagine JPEG o un PDF.

Strumento disponibile in altre lingue