Deze tool bouwt het patroon op als platte SVG-markup, waardoor het resultaat op elk zoomniveau en elke schermdichtheid haarscherp blijft en meestal maar een paar honderd bytes weegt, veel lichter dan een PNG-tegel. Kopieer de CSS om een herhalend background-image direct in een stylesheet te plakken, of download het losse SVG-bestand als asset. Niets wat je maakt wordt ergens naartoe gestuurd: het patroon wordt volledig op je eigen apparaat getekend, dus het blijft ook offline werken zodra de pagina geladen is.
Gratis SVG patroon generator
Draait volledig in je browser - niets uploaden, geen account.
Patroon
Stijl
Voorgrond
Achtergrond
Wat is een SVG patroon generator?
Een SVG patroon generator bouwt een naadloze, herhalende achtergrond op uit geometrische vormen zoals stippen, lijnen, rasters en zigzaglijnen. Je kiest de vorm, kleuren, tegelgrootte en lijndikte, en het levert een piepklein, resolutie-onafhankelijk SVG-bestand plus kant-en-klare CSS op. Alles gebeurt in je browser, dus er wordt niets geüpload.
Zo werkt het
- 1Kies een patroon. Kies een vorm uit de stalen - stippen, ringen, vierkanten, raster, diagonaal, kruisarcering, plus, zigzag en meer.
- 2Stel kleuren en vorm in. Kies een voorgrond- en achtergrondkleur (of maak de achtergrond transparant), en pas daarna de schuifregelaars voor grootte, dikte en dekking aan terwijl de preview live meebeweegt.
- 3Kopieer of download. Wissel tussen de tabbladen CSS en SVG, kopieer de code, of download het losse .svg-bestand om overal te gebruiken.
Voor wie
- Webontwikkelaars die een subtiele, lichte achtergrondtextuur aan een hero, kaart of sectie willen toevoegen zonder een los afbeeldingsbestand.
- UI- en merkontwerpers die naadloze texturen in huisstijlkleuren prototypen en als scherpe SVG-asset exporteren.
- Makers van e-mails en presentaties die een klein, tegelbaar patroon nodig hebben dat op elk scherm scherp blijft.
- Studenten en hobbyisten die willen leren hoe SVG
<pattern>en CSS-tegeling werken door zelf waarden aan te passen en de output te lezen. - Contentmakers die snel een decoratieve achtergrond nodig hebben voor thumbnails, banners en mockups.
Veelgestelde vragen
Is de SVG patroon generator gratis?
Ja, hij is volledig gratis, zonder account en zonder limieten. Elk patroon wordt in je browser gegenereerd, dus je kunt er zoveel maken en kopiëren als je wilt, zelfs offline zodra de pagina geladen is.
Zijn deze patronen echt naadloos?
Ja. Elke vorm is zo getekend dat de randen precies aansluiten op de aangrenzende tegel, en het patroon herhaalt zich op een vast raster. Zowel de CSS background-image als het SVG <pattern>-element tegelen dezelfde cel rand aan rand, zonder zichtbare naden.
Moet ik de CSS- of de SVG-output gebruiken?
Gebruik de CSS om een herhalende achtergrond meteen in een stylesheet te plakken - dat is het snelst voor websites. Download de SVG wanneer je een los bestand nodig hebt, bijvoorbeeld als afbeelding in een ontwerptool of rechtstreeks ingebed in HTML.
Waarom een SVG-patroon in plaats van een PNG?
SVG is vectorgebaseerd, dus het blijft op elk zoomniveau en elke schermdichtheid perfect scherp en pixelt nooit. Een geometrische SVG-tegel weegt meestal maar een paar honderd bytes, veel minder dan een vergelijkbare PNG, en je kunt de kleuren altijd aanpassen zonder opnieuw te exporteren.
Kan ik de achtergrond transparant maken?
Ja. Vink Transparant aan en de achtergrondvulling valt weg, zodat alleen de voorgrondvormen van het patroon zichtbaar blijven. Zo kun je het patroon over een bestaande kleur, afbeelding of gradient leggen.
Wordt mijn ontwerp ergens geüpload?
Nee. Het hele patroon wordt lokaal in je browser opgebouwd met platte SVG-markup en er gaat niets naar een server, dus je kleuren en instellingen blijven privé op je eigen apparaat.