SVG-patroongenerator

Wat is SVG-patroongenerator?

De SVG-patroongenerator is een gratis tool in de browser voor webdesigners en front-end-ontwikkelaars die een lichte, herhaalbare achtergrond nodig hebben zonder een grafische editor te openen. Je kiest een patroon uit een dropdown (stippen, raster, strepen, diagonaal, schaakbord), stelt een voorgrondkleur voor de vormen en een achtergrondkleur voor de tegel in, en gebruikt de getalvelden voor schaal en dikte om de tegelgrootte en lijndikte te bepalen. Het resultaat is één tegel, getekend als haarscherpe SVG en ontworpen om naadloos te herhalen, zodat de bestanden minuscuul blijven en het patroon zonder vervaging schaalt. Gebruik de Formaat-schakelaar om de kopieerbare uitvoer te wisselen tussen pure SVG-markup en een CSS-background-image-regel, kopieer die vervolgens of download het .svg-bestand voor sites, kaarten, hero-secties en UI-mockups.

SVG-patroongenerator gebruiken

1. Kies een patroon uit de dropdown: Stippen, Raster, Strepen, Diagonaal of Schaakbord.
2. Typ of kies een voorgrondkleur voor de vormen en een achtergrondkleur voor de tegel.
3. Stel de getalvelden Schaal (tegelgrootte in pixels) en Dikte (puntstraal of lijndikte) in.
4. Open Instellingen en gebruik de Formaat-schakelaar om de uitvoer te wisselen tussen SVG en CSS.
5. Bekijk hoe het live voorbeeld het patroon herhaalt, kopieer dan de SVG of CSS, of klik op Downloaden om het .svg-bestand op te slaan.

Voorbeelden

Veelgestelde vragen

Welke patronen kan ik genereren?

Vijf herhaalbare patronen: stippen, raster, strepen, diagonale lijnen en een schaakbord. Elk wordt getekend als één kleine SVG-tegel die naadloos herhaalt, dus het blijft scherp op elk formaat en houdt het bestand minuscuul.

Wat regelen Schaal en Dikte?

De schaal is de grootte van één tegel in pixels, die bepaalt hoe ver de herhalende vormen uit elkaar staan. De dikte is de puntstraal of lijndikte binnen de tegel. De dikte wordt automatisch begrensd ten opzichte van de schaal, zodat het patroon de tegel nooit overvult.

Wat is het verschil tussen de SVG- en de CSS-uitvoer?

SVG geeft je de pure markup voor een losstaand .svg-bestand of inline gebruik. CSS geeft je een background-image-regel met een data-URI plus background-repeat: repeat, klaar om in een stylesheet te plakken. Gebruik de Formaat-schakelaar in Instellingen om tussen beide te wisselen.

Kan ik kleuren visueel kiezen in plaats van HEX te typen?

Ja. Klik op het kleurvlak naast het voorgrond- of achtergrondveld om de native kleurkiezer van je browser te openen, of typ rechtstreeks een HEX-waarde zoals #4f86f7. Het voorbeeld en de uitvoer worden bijgewerkt terwijl je wijzigt.

Worden mijn kleuren of bestanden ergens geüpload?

Nee. Het patroon wordt volledig in je browser opgebouwd als een SVG-string en de download wordt lokaal als een Blob aangemaakt. Er worden nooit kleuren, code of bestanden naar een server gestuurd, dus het werkt offline en houdt je werk privé.