Blobgenerator

Organische SVG-blobs in enkele seconden

Blobs zijn de zachte, onregelmatige vormen die je ziet achter herosecties, profielfoto's, illustraties en onboardingschermen van apps. Ze doorbreken strakke rasters van rechthoeken en geven een lay-out een vriendelijk, handgemaakt gevoel. Deze blobgenerator maakt ze als nette SVG-paden: kies een paar parameters, zie de vorm direct veranderen en kopieer de code rechtstreeks naar je project.

Omdat een blob slechts één SVG-pad is, is hij piepklein, schaalt hij zonder kwaliteitsverlies en kun je hem met CSS een andere kleur geven of animeren door te morphen tussen twee paden met hetzelfde aantal punten.

Hoe de vorm wordt opgebouwd

De generator plaatst een gekozen aantal ankerpunten rond een cirkel. Willekeurigheid trekt elk punt over een andere willekeurige afstand naar binnen, terwijl grootte de hele contour binnen het canvas schaalt. De ankerpunten worden daarna verbonden met een gesloten Catmull-Rom-spline die wordt omgezet naar kubische Bézier-curves, wat zorgt voor vloeiende overgangen zonder zichtbare hoeken. Met drie of vier punten krijg je eenvoudige kiezelvormen, terwijl tien of meer punten met veel willekeurigheid wiebelige, wolkachtige vormen opleveren. Bij 0% willekeurigheid is het resultaat een regelmatige vorm die is afgerond tot een perfecte cirkel.

Kleuren, contouren en hergebruik

Vul de blob met één kleur of met een diagonaal verloop van twee kleuren, en voeg een contour van 1 tot 16 pixels toe als je een sticker- of badge-look wilt. Elke blob komt voort uit een numerieke seed: dezelfde seed en instellingen leveren altijd dezelfde vorm op, dus je kunt de seed bewaren, later een waarde aanpassen en al het andere identiek houden. Download een SVG voor het web of een PNG van 800 bij 800 pixels met transparante achtergrond voor dia's en ontwerptools. Alle verwerking gebeurt lokaal in je browser en er wordt niets geüpload.