Tien naadloze SVG-achtergrondpatronen: stippen, raster, golven, zeshoeken en meer. Stel grootte, lijndikte, kleuren, dekking en hoek in en kopieer dan CSS of SVG met een pattern-element.
Kies een van tien tegelvormen, stel de tegelgrootte, lijndikte, kleuren, dekking en hoek in en krijg een naadloze SVG-achtergrond. Kopieer hem als CSS background-image data-URL die op elk element herhaalt, of als SVG-bestand op basis van het pattern-element voor gebruik in illustraties, allebei getekend en getoond in uw browser.
SVG-tegel of patroon met een CSS-gradient?
Behoefte
Kies voor
Waarom
Bochten, zeshoeken, golven, plustekens
SVG-tegel (deze tool)
Elke vorm die SVG kan tekenen
Gewone strepen, stippen, ruiten
CSS-gradients
Helemaal geen afbeelding, zie de CSS-achtergrondgenerator
Patroon binnen een SVG-illustratie
<pattern>-element
Vult elke SVG-vorm
Met gradienttrucs teken je strepen en stippen, maar golven, zeshoeken en contouren gaan lastig. Een kleine SVG-tegel kan alles tekenen en blijft scherp op elk zoomniveau, en als data-URL voegt hij geen extra verzoek aan de pagina toe.
Kies een patroon. Het voorbeeld vult een groot paneel, zodat u de textuur op ware grootte kunt beoordelen.
Pas de tegelgrootte en de lijndikte of stipstraal aan en kies dan de inkt- en achtergrondkleur.
Verlaag de dekking van de inkt voor een subtiele textuur en stel een hoek in als u de tegels gedraaid wilt hebben.
Kopieer de CSS voor een achtergrond, de SVG van één tegel of de volledige SVG met een pattern-element.
Achtergrondtexturen horen te fluisteren. Een inktdekking tussen 0.1 en 0.25 op een getinte achtergrond botst zelden met tekst.
Laat de tegelgrootte aansluiten op uw spacingschaal, bijvoorbeeld 16, 24 of 32 pixels, zodat lijnen gelijk lopen met het grid van uw layout.
Als u een patroon draait, schakelt de tool over naar de vorm met het pattern-element, omdat een gedraaide losse tegel niet meer naadloos aansluit.
Zet patronen op een wrapper of een pseudo-element achter de inhoud, zodat u ze op één plek kunt wijzigen of verwijderen.
Veelgestelde vragen
Waarom # en < coderen in de data-URL?
In een URL begint # een fragment en wordt de afbeelding afgekapt, en sommige parsers weigeren losse punthaken. Door ze te coderen als %23, %3C en %3E blijft de SVG intact. Dubbele aanhalingstekens worden enkele, zodat de string in url("...") past.
Wat doet patternUnits="userSpaceOnUse"?
Het meet de breedte en hoogte van de tegel in dezelfde eenheden als de tekening, zodat een tegel van 24 overal waar hij gebruikt wordt 24 pixels breed is. De standaard, objectBoundingBox, maakt tegels in plaats daarvan een fractie van de gevulde vorm.
Kan ik het patroon in Tailwind gebruiken?
Ja. Voeg de CSS-regel als class toe aan uw stylesheet, of gebruik arbitrary values zoals bg-[url(...)] met de data-URL. Een class leest makkelijker als de URL lang is.
Zijn deze patronen gratis te gebruiken?
Ja. Elke tegel wordt door de code op deze pagina uit eenvoudige vormen getekend, dus het resultaat is van u, zonder bronvermelding.
Hoe een naadloze tegel werkt
Een tegel herhaalt van rand tot rand, dus alles wat aan de rechterkant verdwijnt, moet links terugkomen. Het diagonale patroon tekent bijvoorbeeld in twee hoeken korte extra stukjes, zodat de lijnen zonder onderbreking over de tegelgrenzen doorlopen.
Lijnen die op de tegelrand gecentreerd zijn, zoals in het raster, worden door de tegel gehalveerd. Twee naastliggende tegels vormen samen dan één lijn op volle dikte, en daarom ziet het raster er gelijkmatig uit.
Twee manieren om het te leveren
Voor achtergronden is een CSS-data-URL het eenvoudigst: één regel, geen bestand om te hosten, en background-size bepaalt de schaal. De browser decodeert de tegel één keer en herhaalt hem.
Definieer binnen een SVG-illustratie een pattern in defs en vul vormen met url(#id). Met patternTransform kunt u het hele patroon draaien of schalen zonder het opnieuw te tekenen.
Attributen van een SVG-patroon
Attributen van het pattern-element die de generator gebruikt
Attribuut
Standaard
Wat het doet
width / height
Grootte van één tegel; een waarde van 0 tekent niets
patternUnits
objectBoundingBox
Eenheden voor x, y, width, height; deze tool gebruikt userSpaceOnUse
patternContentUnits
userSpaceOnUse
Eenheden voor de vormen binnen de tegel
patternTransform
none (identiteit)
Het hele patroon draaien, schalen of scheeftrekken
Verschuift waar de eerste tegel begint
Patroon als CSS-achtergrond
Textuur van zeshoekcontouren achter een kaart
Een zeshoektegel van 28 pixels op halve dekking. Wijzig background-size om de textuur te schalen.
Dezelfde tegel met het pattern-element
Gebruik dit binnen inline SVG-illustraties. Elke vorm kan fill="url(#p)" krijgen.
Polkadots
Ruitjespapier
Diagonale lijnen
Plustekens
Zigzag
Golven
Driehoeken
Dambord
Ringen
Zeshoeken
Patroongenerator
Patronen: Polkadots, Ruitjespapier, Diagonale lijnen, Plustekens, Zigzag, Golven, Driehoeken, Dambord, Ringen, Zeshoeken. Stel grootte, lijndikte, kleuren, dekking en hoek in en kopieer dan CSS of SVG.