CSS-patroonachtergrondgenerator

De meeste 'patroongenerator'-tools gebruiken stilletjes dezelfde herhalende lineaire gradiëntformule voor elke optie en veranderen alleen de cijfers. Deze niet: elk van de zes patroontypen hier is opgebouwd uit de specifieke CSS-techniek die die vorm feitelijk produceert. Strepen gebruiken een enkel herhalend lineair verloop met twee kleurbanden. Punten maken gebruik van één radiaal verloop dat puur door de achtergrondgrootte wordt betegeld (de klassieke truc met CSS-punten) in plaats van een zich herhalend radiaal verloop, dat een cirkelvormige stip niet netjes op een rechthoekig raster kan plaatsen. Dambord maakt gebruik van de echte conische gradiëntformule met vier kwadranten: een conische gradiënt gecentreerd in een vierkante tegel splitst zich op natuurlijke wijze op in vier kwadrantvierkanten op grenzen van 90 graden, en het afwisselen van twee kleuren over die kwadrantentegels in een echt schaakbord, geen benadering.

Raster en diagonaal kruisarceren beide lagen van twee zich herhalende lineaire gradiënten als afzonderlijke achtergrondafbeeldingen in plaats van de tweede richting na te bootsen met randtrucs. Grid combineert een herhalend verloop 'naar rechts' en 'naar beneden' voor scherpe horizontale en verticale regellijnen. Crosshatch brengt een herhalende gradiënt van +45 graden en -45 graden aan voor een diagonaal weefsel in basketweave-stijl - de moeite waard om precies te zijn: dit is een eerlijke crosshatch, geen echte visgraatgeometrie, en de tool bestempelt het op die manier in plaats van te veel te claimen. Driehoeken gebruiken de conische gradiënttechniek met vier wiggen van het schaakbord, maar starten de gradiënt 45 graden geroteerd, waardoor de wiggrenzen van de middelpunten van de tegelrand naar de hoeken worden verschoven en dezelfde vier wiggen in vier hoek-tot-hoekdriehoeken veranderen in plaats van vier kwadrantvierkanten.

Bij elk patroontype zijn alleen de besturingselementen zichtbaar die er feitelijk op van toepassing zijn - er verschijnt een hoekschuifregelaar voor strepen, de puntradius en -afstand verschijnen voor punten, de lijndikte verschijnt voor raster en kruisarcering - en het grote betegelde voorbeeldvenster wordt bij elke wijziging opnieuw getekend, zodat u verschillende volledige herhalingen kunt zien voordat u een waarde vastlegt. Schakel de uitvoermodus om naar SVG en hetzelfde patroon verschijnt opnieuw als een <pattern>-element opgebouwd uit eenvoudige rect-, cirkel-, pad- of polygoonprimitieven, klaar om in de <defs> van elk SVG-document te plakken, met een download met één klik voor een zelfstandig .svg-bestand.

Alles draait lokaal in uw browser: geen afbeeldingsuploads, geen serverrondreis, geen account. Voor effen of verloopvullingen zonder herhaling is de CSS-gradiëntgenerator op deze site het juiste hulpmiddel; deze is specifiek bedoeld voor tegelbare geometrische achtergronden die zijn opgebouwd uit nul afbeeldingsitems.