Hoe worden blobvormen algoritmisch gegenereerd?

Blobs worden gemaakt door N ankerpunten op gelijke hoekintervallen rond een cirkel te plaatsen. Elk punt wordt vervolgens willekeurig naar binnen of buiten verplaatst. Kubische Bézier-curves — via Catmull-Rom naar Bézier-conversie — verbinden alle punten tot een vloeiend gesloten pad.

Wat is het verschil tussen complexiteit en willekeurigheid?

Complexiteit bepaalt het aantal ankerpunten (6–10). Meer punten maken meer lokale variatie mogelijk. Willekeurigheid bepaalt hoeveel elk punt kan afwijken van de basiscirkel. Bij 0 liggen alle punten op de cirkel; bij 100 wijken ze maximaal af.

Welk SVG-padformaat genereert het hulpmiddel?

Het hulpmiddel genereert een standaard SVG-pad met kubische Bézier-curves (commando "C"). De volledige markup is een -element met viewBox "0 0 300 300", met absolute coördinaten en eindigend met "Z".

Hoe gebruik ik een blobvorm in een echt project?

Je kunt de gedownloade SVG gebruiken als -bron, als CSS background-image, of de -code direct in je HTML insluiten. In CSS kun je clip-path toepassen met de path()-functie.

Werkt het hulpmiddel in alle browsers?

Ja. SVG en kubische Bézier-curves worden ondersteund in alle moderne browsers. Het gedownloade bestand is een SVG XML-bestand compatibel met Figma, Illustrator, Inkscape en Sketch.

Blob Generator

Genereer willekeurige organische blobvormen als SVG. Pas complexiteit en willekeurigheid aan, kies je kleur en download of kopieer de SVG-code.

Direct SVGPad kopiërenGratis download

① Pas complexiteit, willekeurigheid en kleur aan ② Klik op Willekeurig om te genereren ③ Kopieer SVG of download PNG

Complexiteit (punten)6

Willekeurigheid50

Seed

Vulkleur#C9B89A

Hoe het werkt

De blob wordt opgebouwd uit N gelijkmatig verdeelde punten op een cirkel, elk willekeurig naar binnen of buiten verplaatst. Kubische Bézier-curves verbinden de punten via Catmull-Rom-conversie.

Complexiteit

Bepaalt het aantal ankerpunten (6–10). Meer punten creëren complexere, onregelmatige silhouetten. Minder punten produceren eenvoudigere, rondere blobs.

Willekeurigheid

Bepaalt hoe ver elk punt kan afwijken van de basiscirkelradius. 0 geeft een perfecte cirkel; 100 geeft maximale organische onregelmatigheid.

Wat is een blobvorm en hoe wordt deze gegenereerd?

Blobvormen zijn zachte, organische, amoebe-achtige silhouetten die veel worden gebruikt in modern webdesign voor achtergronden, illustraties, avatars en UI-accenten. Ze worden algoritmisch gegenereerd door ankerpunten op gelijke hoekintervallen op een cirkel te plaatsen en elk punt radiaal willekeurig te verplaatsen. Kubische Bézier-curves — via Catmull-Rom-conversie — verbinden de punten vloeiend. Het resultaat is een SVG-pad dat kan worden ingesloten in HTML of CSS via background-image, clip-path of inline <svg>, exporteerbaar naar Figma, Illustrator en Inkscape.

Veelgestelde vragen

Een blobvorm is een zachte, organische, afgeronde vorm die lijkt op een natuurlijke amoebe. In tegenstelling tot geometrische vormen hebben blobs onregelmatige, vloeiende contouren. Ze worden veel gebruikt in modern webdesign voor achtergronden, illustraties en UI-decoraties.

Blobs worden gemaakt door N ankerpunten op gelijke hoekintervallen op een cirkel te plaatsen. Elk punt wordt willekeurig naar binnen of buiten verplaatst. Kubische Bézier-curves via Catmull-Rom-conversie verbinden alle punten tot een vloeiend gesloten pad.

Complexiteit bepaalt het aantal ankerpunten (6–10). Meer punten geven meer lokale variatie. Willekeurigheid bepaalt hoe ver elk punt afwijkt van de basiscirkel. Bij 0 liggen alle punten op de cirkel; bij 100 wijken ze maximaal af.

De tool produceert een standaard SVG-pad met kubische Bézier-curves (commando "C"). De volledige markup is een <svg>-element met viewBox "0 0 300 300", met absolute coördinaten en eindigend met "Z".

De vorm is deterministisch bij dezelfde seed, complexiteit en willekeurigheid. Zeer hoge willekeurigheid met lage complexiteit kan soms zelf-kruisende paden produceren. SVG schaalt oneindig zonder kwaliteitsverlies.

Je kunt de gedownloade SVG gebruiken als <img>-bron, als CSS background-image, of de <svg>-code direct in je HTML insluiten. In CSS kun je clip-path toepassen met de path()-functie.

Ja. SVG en kubische Bézier-curves worden ondersteund in alle moderne browsers. Het gedownloade bestand is een eenvoudig SVG-XML-bestand compatibel met Figma, Illustrator, Inkscape en Sketch.

Wat is een blobvorm en hoe wordt deze gegenereerd?

Veelgestelde vragen

Ontdek ons netwerk