Softonic

SVG-puntpatroongenerator

Stap 1 / 3
Volgende

Puntpatronen zijn de veelgebruikte basisvorm van moderne webachtergronden: denk aan het subtiele gestreepte netwerk achter een Notion pagina, de polka-punten in een hoofdsectie of de korrelachtige textuur op een kaart. Deze generator genereert één enkele SVG met behulp van een inline-definitie van <pattern>, waardoor het bestand klein blijft (meestal onder 500 bytes) en perfect op elke schermgrootte past. U kunt de canvas, de afstand tussen punten, de straal, de puntkleur en de achtergrond instellen.

Hoe bouwt u een puntpatroon?

  1. 1

    De canvas instellen

    breedte en hoogte in pixels. Voor CSS-achtergronden kan deze waarde klein blijven (bijvoorbeeld 800×600) en kan worden gedeeld over meerdere vakjes.

  2. 2

    Kies de afstand

    De afstand tussen de centra van aangrenzende punten: een waarde van 20–40 px oogt netjes, terwijl een waarde van 10 px onnatuurlijk storend is.

  3. 3

    Stel de straal van het punt in

    1–3 px voor een subtiele textuur; 4–8 px voor bewust gebruikte polkadots.

  4. 4

    Kleuren kiezen

    Puntvulling (voorgrond) en achtergrond van het doek. Stel de achtergrond in op `transparent` voor een echte overlappingspatroon.

  5. 5

    Kopieer de SVG

    Plak het in uw HTML of gebruik het als `background-image: url("data:image/svg+xml,...")` in CSS.

Hoe het patroon wordt gedefinieerd

De generator produceert een <pattern>-element binnen een <defs> en vult een volledig schermoppervlak van <rect> met 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" beperkt de grootte van de vakjes tot pixels, waardoor het schalen van het moeder-SVG geen vervorming van de punten veroorzaakt.

Handboek voor het afstellen van patronen

Beeld Afstand Radius Contrast
Gefluister (nagenoeg onzichtbaar) 30–40 1–1,5 5–10% transparantie
Subtiel achtergrond 25–30 2 15–20% transparantie
Echte puntpatroon 20 2–3 Volledig in kleur
Opzettelijke polka-strepen 40–60 8–15 Volledig in kleur
Halftone-effect 10 1 Gradiëntvulling

Gebruik als CSS-achtergrond

Codificeer de SVG als een gegevens-URL en pas deze toe op elk element:

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

Het tileen van een SVG met CSS is sneller dan het verzenden van een PNG-bestand: de browser rasteriseert het bij de uiteindelijke weergavegrootte, waardoor het scherp blijft op alle DPR’s (1x-, 2x- en 3x-weergaven).

Wanneer punten de leesbaarheid belemmeren

Een puntpatroon direct achter de hoofdtekst kan een schitterend moiré-effect veroorzaken op fijne tekst. Als u tekst bovenop wilt plaatsen, kunt u kiezen voor één van de volgende opties:

  • Verhoog de afstand tot meer dan 40 px zodat de punten tussen de regels vallen, of
  • Verlaag de transparantie van het patroon tot onder 10%, of
  • Plaats de tekst in een vaste kaart boven het patroon.

Veelgestelde vragen

Stel de achtergrondkleur in op transparent; dan zijn alleen de punten zelf te zien. Plaats het SVG-bestand bovenop de gewenste kleur of afbeelding die u wilt weergeven.

Met deze generator werkt het niet: deze genereert een vierkantig raster. Voor een hexagonaal ontwerp hebt u een patroonsteen nodig die sqrt(3) keer zo hoog is als breed, met twee cirkels per steen die met een halve afstand van elkaar zijn geplaatst. Gebruik in plaats daarvan de SVG-padbuilder of een speciale hexagonengenerator.

De SVG-bestand zelf is altijd scherp ongeacht de afmeting; wanneer je het echter rasteriseert met een resolutie lager dan die van het patroon, kan aliasing optreden. Exporteer het bij twee keer of drie keer de bedoelde weergaveafmeting.

Vervang fill="#hex" op de cirkel door fill="url(#gradient-id)" en voeg een definitie van <linearGradient> toe binnen dezelfde <defs>. Elke punt wordt dan weergegeven met deze gradient, dit kan kostbaar zijn als het doek duizenden punten bevat.

De gewone editor stuurt canvas, afstand, straal en kleuren naar de server om het voorbeeld te tonen. In de begeleide stroom staan deze instellingen ook in de pagina-URL. Vul geen gevoelige informatie in; de tool bewaart geen herbruikbaar patroonproject.

Gerelateerde tools

Material Design-kleurkiezer

Blader door het Material Design-kleurenpalet. Kopieer elke tint (van 50 tot A700) als HEX-, RGB- of HSL-waarde met één tik.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Kruissteekpatroon maken

Zet JPEG, PNG of WebP om in een afdrukbaar kruissteekpatroon van 10–150 steken met 2–40 eigen kleuren, symbolen, exacte aantallen en stofmaten.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Tool beschikbaar in andere talen