SVG bakgrundsmönster generator
Generera ett sömlöst SVG-bakgrundsmönster – prickar, rutnät, ränder, vågor, kvadrater, hexagoner eller topografi – som SVG, CSS eller Tailwind-klass.
SVG bakgrundsmönster generator
Välj ett motiv – prickar, rutnät, diagonala ränder, vågor, kvadrater, hexagoner eller topografi – och det här verktyget skapar ett sömlöst SVG-mönster som du kan placera direkt i en webbplatsbakgrund, en app-skärm eller en utskrivbar design. Mönstret är byggd från en enskild upprepad dil, så filen förblir liten oavsett hur stort området den täcker är.
Mönsterstorlek styr avståndet mellan upprepningar, och linjetjocklek styr hur feta linjerna är – den anger även prick- och kvadratstorlek för dessa två motiv. Förgrund och bakgrund accepterar vilken hexfärg som helst (#RRGGBB eller den kortare formen #RGB), opacitet tonar motiv mot bakgrunden utan att röra själva bakgrundsfärgen, och rotation vrider hela dilen – diagonala ränder börjar redan på 45° och vrider vidare från där. Byt utdataformat för att få exakt vad du behöver: rent SVG-markering för att spara som fil, en färdig CSS-regel med mönstret inbäddat som data-URI, eller en Tailwind godtycklig värdeklass som du kan droppa direkt på en class-lista.
Varje alternativ uppdaterar förhandsvisningen direkt när du justerar det, och summan under utdata rapporterar dilens dimensioner, det exakta antalet tecken i den genererade koden och det aktiva utdataformatet. Eftersom mönstret är en liten vektordil snarare än en bitmap, förblir det skarpt på alla zoomnivåer och skalas till vilken skärmstorlek som helst utan extra kostnad.
Allt körs lokalt i din webbläsare – ingenting du designar här laddas upp någonstans. När du är nöjd med resultatet, kopiera det, ladda ner det som en .txt-fil, eller skicka utdata tillbaka till inmatningen för att fortsätta förfina det.