Blob-generator

Organiska SVG-blobbar på några sekunder

Blobbar är de mjuka, oregelbundna former du ser bakom hero-sektioner, profilbilder, illustrationer och introduktionsskärmar i appar. De bryter upp stela rutnät av rektanglar och ger en layout en vänlig, handgjord känsla. Den här blob-generatorn skapar dem som rena SVG-banor: välj några parametrar, se formen uppdateras och kopiera koden direkt in i ditt projekt.

Eftersom en blob bara är en enda SVG-bana är den mycket liten, kan skalas utan kvalitetsförlust och kan färgas om med CSS eller animeras genom att morfa mellan två banor med samma antal punkter.

Hur formen byggs upp

Generatorn placerar ett valt antal ankarpunkter runt en cirkel. Slumpmässighet drar varje punkt inåt med olika slumpmässiga avstånd, medan storlek skalar hela konturen inom arbetsytan. Ankarpunkterna förbinds sedan med en sluten Catmull-Rom-spline som konverteras till kubiska Bézier-kurvor, vilket garanterar mjuka övergångar utan synliga hörn. Med tre eller fyra punkter får du enkla småstensformer, medan tio eller fler punkter med hög slumpmässighet ger vingliga, molnliknande former. Vid 0 % slumpmässighet blir resultatet en regelbunden form som rundas av till en perfekt cirkel.

Färger, konturer och återanvändning

Fyll blobben med en enda färg eller en diagonal gradient i två färger, och lägg till en kontur på 1 till 16 pixlar när du vill ha ett klistermärkes- eller märkesutseende. Varje blob kommer från ett numeriskt frö (seed): samma frö och inställningar ger alltid samma form, så du kan spara fröet, justera ett värde senare och behålla allt annat identiskt. Ladda ned en SVG för webben eller en PNG på 800 gånger 800 pixlar med transparent bakgrund för presentationer och designverktyg. All bearbetning sker lokalt i din webbläsare och ingenting laddas upp.