Vad är en SVG-blobb?

En blobb är en mjuk, organisk form utan raka kanter, någonstans mellan en cirkel och ett stänk. Blobbformer är en populär dekoration i modern webbdesign: bakom hero-bilder och illustrationer, som avatar-ramar, som sektionsbakgrunder eller som lekfulla knappar och märken. Eftersom de är vektorgrafik förblir de skarpa i alla storlekar och tar bara några hundra byte.

Verktygsbeskrivning

Det här verktyget genererar slumpmässiga blobbformer som ren SVG-kod i din webbläsare. Tryck på Slumpa tills du gillar formen och finjustera sedan hur många utbuktningar den har, hur oregelbunden den är och hur runda kurvorna är. Fyll den med en enfärgad fyllning eller en gradient, eller rita den som en kontur, och låt den valfritt morfas mellan former i en jämn loop. Ladda ner resultatet som SVG eller PNG, eller kopiera det som SVG-kod, en CSS-bakgrund eller en CSS-clip-path.

Funktioner

  • Slumpade blobbformer som kan återskapas: samma seed och inställningar ger alltid samma form
  • Justerbar komplexitet, slumpmässighet och mjukhet, från runda stenar till spetsiga stjärnor
  • Enfärgad fyllning, gradient eller kontur med valfri färg
  • Morfanimering som loopar mellan former, inbyggd i SVG utan JavaScript
  • Ladda ner som SVG eller transparent PNG i den storlek du väljer
  • Kopieringsklar kod för SVG, CSS-bakgrund och CSS-clip-path

Så fungerar det

Verktyget placerar punkter runt en cirkel, flyttar varje punkt inåt med ett slumpmässigt avstånd och ritar en jämn, sluten kurva genom dem. Kurvan beräknas exakt och skalas så att blobbformen fyller bilden från kant till kant. En slumptalsgenerator med seed bestämmer varje punkt, så ett seed i form av ett tal eller ett ord återskapar samma blobb senare. För animeringen placeras flera blobbformer med samma antal punkter i ett SVG-animate-element, och webbläsaren interpolerar mellan dem.

Tips

  • Fem till åtta punkter med medelhög slumpmässighet ger klassiska blobbformer; lägre slumpmässighet ser lugnare och mer professionellt ut.
  • Sänk mjukheten till 0 % för kristall- eller ädelstensliknande polygoner.
  • Använd CSS-clip-path-koden för att beskära ett foto eller en video till blobbformen.
  • Skriv ner seed-värdet eller skriv in ett eget ord som seed för att återskapa en blobb exakt senare.
  • Håll morfanimeringen långsam, omkring 8–15 sekunder per loop, så att den förblir lugn i bakgrunden.