Softonic

SVG punktmönster-generator

Steg 1 / 3
Nästa

Punktmönster är den diskreta arbetshästen i moderna webbakgrunder, tänk på det subtila prickade rutnätet bakom en Notion-sida, polkaprickarna på en hero-sektion eller den kornliknande texturen på ett kort. Den här generatorn bygger en enda SVG med en inline <pattern>-definition, så att filen förblir liten (oftast under 500 byte) och kaklar perfekt i valfri storlek. Du styr arbetsytan, avståndet mellan prickar, radien, prickfärgen och bakgrunden.

Så bygger du ett punktmönster

  1. 1

    Ställ in arbetsytan

    Bredd och höjd i pixlar. För CSS-bakgrunder kan den förbli liten (t.ex. 800×600) och kaklas.

  2. 2

    Välj avståndet

    Avstånd mellan centrum av angränsande prickar. 20-40 px ser rent ut; 10 px blir stökigt.

  3. 3

    Ställ in prickradien

    1-3 px för subtil textur, 4-8 px för avsiktliga polkaprickar.

  4. 4

    Välj färger

    Prickfyllning (förgrund) och arbetsytans bakgrund. Sätt bakgrunden till `transparent` för ett äkta överläggsmönster.

  5. 5

    Kopiera SVG:n

    Klistra in i din HTML eller använd som `background-image: url("data:image/svg+xml,...")` i CSS.

Så definieras mönstret

Generatorn matar ut ett <pattern>-element inuti <defs> och fyller en arbetsytetäckande <rect> med fill="url(#dots)":

<defs>
  <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
    <circle cx="15" cy="15" r="2" fill="#6366f1" />
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="url(#dots)" />

patternUnits="userSpaceOnUse" låser kakelstorleken till pixlar, så att skalning av den överordnade SVG:n inte förvränger prickarna.

Fusklapp för mönsterjustering

Utseende Avstånd Radie Kontrast
Viskning (knappt synlig) 30-40 1-1.5 5-10% opacitet
Subtil bakgrund 25-30 2 15-20% opacitet
Ärligt punktmönster 20 2-3 Full färg
Avsiktliga polkaprickar 40-60 8-15 Full färg
Rastereffekt 10 1 Gradientfyllning

Använda det som en CSS-bakgrund

Koda SVG:n som en data-URL och applicera den på valfritt element:

.bg-dots {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' ...");
  background-repeat: repeat;
}

Att kakla SVG:n via CSS är snabbare än att skicka en PNG, webbläsaren rasteriserar den i den slutliga visningsstorleken, så den förblir skarp på varje DPR (1x-, 2x-, 3x-displayer).

När prickar skadar läsbarheten

Ett punktmönster direkt bakom brödtext kan skapa en flimrande moaré mot fin text. Om du måste lägga text ovanpå, antingen:

  • Öka avståndet till 40+ px så att prickar hamnar mellan raderna, eller
  • Sänk mönstrets opacitet under 10%, eller
  • Lägg texten inuti ett solitt kort över mönstret.

Vanliga frågor

Sätt bakgrundsfärgen till transparent, så är den enda färgen prickarna själva. Placera SVG:n över vilken färg eller bild du vill ska synas igenom.

Inte med den här generatorn, den producerar ett kvadratiskt rutnät. För en hex-layout behöver du en mönsterkakel som är sqrt(3) gånger så hög som den är bred, med två cirklar per kakel förskjutna med hälften. Överväg SVG-pathbyggaren eller en dedikerad hex-generator.

SVG i sig är skarp i valfri storlek, men om du rasteriserar den i en upplösning mindre än mönsterkakeln får du aliasing. Exportera i 2x eller 3x din avsedda visningsstorlek.

Ersätt fill="#hex" på cirkeln med fill="url(#gradient-id)" och lägg till en <linearGradient>-definition inuti samma <defs>. Varje prick renderas då med den gradienten, vilket kan vara kostsamt om arbetsytan har tusentals prickar.

Den vanliga editorn skickar yta, mellanrum, radie och färger till servern för att rendera förhandsvisningen. I det guidade flödet visas dessa inställningar även i sidans URL. Ange inte känslig information; verktyget sparar inget återanvändbart mönsterprojekt.

Relaterade verktyg

Material Design-färgväljare

Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.

Pixelgrafikverktyg

Rita pixelgrafik från grunden på ett rutnät från 4×4 till 64×64. Använd penna, fyllning, pipett, symmetri och ångra, och exportera sedan skarp transparent PNG, SVG eller projektfil.

Skapa kontaktkarta

Ordna foton på utskrivbara kontaktkartor i A4 eller Letter med bildtexter och beskärning, förhandsgranska och hämta JPEG eller PDF.

Rutpappersgenerator

Skapa utskrivbart rutpapper online: välj rutnät eller punktnät, ange avståndet i mm, välj A4 eller Letter och en egen linjefärg, och skriv sedan ut eller ladda ner en skarp SVG.

Konverterare för bildformat

Konvertera bilder till JPG, PNG eller WebP direkt i webbläsaren, med kvalitetskontroll för de förlustbehäftade formaten och bevarad transparens i PNG och WebP.

Invertera färger i bilden

Vänd varje RGB-kanal i en bild om för att få en negativbild – användbart vid kreativa redigeringar och när du ska titta på filmskanningar.

Verktyget finns på andra språk