Softonic

SVG-blobgenerator

Steg 1 / 2
Nästa

Blobformer ersatte perfekta cirklar runt 2018 som den “vänliga rundade bakgrunden” i modern UI, de dyker upp bakom hero-illustrationer, som avatarmasker och som färgklickar på landningssidor. Den här generatorn bygger en blob från en slumpvandring runt en cirkel, jämnar sedan ut polygonen med kvadratiska Bézier-kurvor till den organiska, lätt vingliga form som designers är ute efter. Du styr hur många kontrollpunkter (komplexitet), hur vild vandringen blir (kontrast) och slumpfröet, sedan kopierar du SVG:n.

Så byggs bloben

  1. 1

    Välj färg och komplexitet

    Komplexitet anger antalet kontrollpunkter (3-12). Fler punkter betyder fler bucklor.

  2. 2

    Ställ in kontrasten

    Kontrast styr hur långt varje punkt driver från basradien. Låg kontrast = nästan cirkulär; hög = aggressivt flikig.

  3. 3

    Välj en seed

    Seedet är det slumptal som låser blobformen. Samma seed, samma blob; tryck på randomize för att få en ny.

  4. 4

    Kopiera SVG:n

    Du får en enda `<path>` inuti en 400×400 viewBox. Släpp in den var som helst där SVG stöds.

Blobpathens anatomi

Generatorn fördelar N punkter jämnt runt en 400×400 viewBox (centrum 200, 200; basradie 130), stör varje radie med ±contrast och kopplar sedan ihop varje par med en kvadratisk Bézier-kurva:

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

midx, midy är mittpunkten mellan den aktuella och nästa punkt, att placera varje kurvas slut där är vad som rundar polygonen till en organisk form.

Parameterfusklapp

Inställning Intervall Effekt
Komplexitet 3-12 Antal flikar. 5-7 är den optimala punkten för UI.
Kontrast 0-100 Slumpvandringens amplitud. 30-60 ser naturligt ut.
Seed 1-9999 Deterministisk; samma seed = samma blob mellan körningar.
Färg hex Enkel fyllning, ingen kontur. Lägg till fill-opacity manuellt vid behov.

Var blobbar fungerar bäst

  • Bakgrundsdekoration, bakom rubriker, i tomma hörn av hero-sektioner.
  • Avatarmasker, applicera pathen som en clip-path för organiska porträttramar.
  • Illustrationsaccenter, färgklick i varumärkesfärg under ikoner eller siffror.
  • Bildmasker, med CSS mask-image klipper en blob foton till organiska utskärningar.

Tips

  • Håll blobbar konturfria för bakgrunder; en kontur gör att de ser klistermärkesaktiga ut.
  • För animerad morfning, generera två blobbar med samma komplexitet och olika seed, animera sedan d-attributet med ett bibliotek som flubber eller svg-morpheus.
  • Inline:a SVG:n istället för att använda <img src=blob.svg>, det låter dig ändra fyllningsfärgen med CSS-variabler vid körning.
  • Behåll viewBox men ta bort det explicita width="400" height="400" om du vill att bloben ska skala till valfri behållare.

Vanliga frågor

Seedet initierar PHP:s srand() före slumpvandringen. Samma seed = samma sekvens av rand()-anrop = samma punktförskjutningar = identisk path.

Ja, men bara om båda pathar har samma antal kommandon och punktantal. Håll komplexiteten identisk och variera bara seedet för att få interpolationsvänliga par. Använd ett tweening-bibliotek som GSAP MorphSVG eller flubber för själva animationen.

Ersätt fill="#hex" på pathen med fill="url(#gradient-id)" och lägg till en <linearGradient>- eller <radialGradient>-definition inuti ett <defs>-block. CSS-anpassade egenskaper fungerar också om du inline:ar SVG:n.

Den är ren men inte minifierad. Kör den genom SVGO en gång om du bryr dig om bytestorlek; du kan vanligtvis ta bort 20-30% av tecknen.

Nej. SVG:n genereras direkt från parametrarna i URL-formuläret och inget loggas.

Relaterade verktyg

ASCII-tabellreferens

Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.

HTML-teckenreferens

En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.

Referens för kortkommandon

Sök dokumenterade standardkommandon för VS Code, Chrome och Bash med GNU Readline i macOS, Windows och Linux.

CSS-pilgnerator

Skapa lokalt en CSS-pil med riktning, färg, storlek och ramens tjocklek och kopiera sedan regeln.

Generator för platshållarbilder

Skapa en bild på 1–4000 px med egna färger och text, ladda ned PNG eller kopiera webbadress och HTML.

Markdown-förhandsvisare

Skriv Markdown och se den renderade HTML:en uppdateras live. GitHub-flavored syntax med tabeller, uppgiftslistor, inramad kod och autolänkar.

Verktyget finns på andra språk