SVG-blobgenerator

Wat is SVG-blobgenerator?

De SVG-blobgenerator is een gratis browser-tool voor ontwerpers en front-end-ontwikkelaars die zachte, organische blobvormen willen voor achtergronden, hero-secties, avatars of decoratieve accenten zonder ze met de hand te tekenen. Je bepaalt twee waarden: de complexiteit (het aantal ankerpunten rond de vorm) en het contrast (hoe ver elk punt afwijkt van een perfecte cirkel). Een seed in de state, opgehoogd door de knop Opnieuw genereren, laat je eindeloze variaties doorlopen terwijl complexiteit en contrast vast blijven. De uitvoer wordt gerenderd als één vloeiend gesloten Bézier-pad, zodat je schone SVG-markup kunt kopiëren, een CSS-clip-path()-regel kunt pakken om elk element te maskeren, of een kant-en-klaar .svg-bestand kunt downloaden. Gebruik het om snel merkgerichte decoraties te maken of om te leren hoe blobpaden worden opgebouwd uit punten rond een cirkel.

SVG-blobgenerator gebruiken

1. Open Instellingen en stel de complexiteit (aantal punten, 3-16) voor de vorm in.
2. Stel het contrast (0-100) in om te bepalen hoe onregelmatig en golvend de randen zijn.
3. Kies een vulkleur met het kleurvlak of door een HEX-waarde te typen.
4. Klik op Opnieuw genereren om vanuit de volgende seed een nieuwe willekeurige variatie te trekken totdat je de vorm mooi vindt.
5. Kopieer de SVG-markup of de CSS-clip-path-regel, of klik op Downloaden om een .svg-bestand op te slaan.

Voorbeelden

Veelgestelde vragen

Wat bepalen complexiteit en contrast?

Complexiteit is het aantal ankerpunten dat gelijkmatig rond een cirkel wordt geplaatst (3 tot 16) — meer punten geven een gedetailleerdere contour. Contrast is hoe ver elk punt willekeurig naar binnen of buiten wordt geduwd ten opzichte van de basisstraal (0 tot 100), dus 0 ligt dicht bij een gewone cirkel en 100 is zeer onregelmatig.

Hoe werkt de knop Opnieuw genereren?

Elke blob wordt opgebouwd uit een numerieke seed plus jouw complexiteit en contrast. Opnieuw genereren verhoogt de seed met één en berekent de vorm opnieuw, zodat je bij elke klik een nieuwe willekeurige variatie krijgt terwijl complexiteit, contrast en kleur hetzelfde blijven.

Wat is het verschil tussen de SVG- en de clip-path-uitvoer?

De SVG-uitvoer is een compleet, op zichzelf staand <svg>-bestand dat je kunt insluiten of downloaden. De clip-path-uitvoer is één CSS-regel met path() die je op elk HTML-element kunt toepassen om het op dezelfde blobcontour bij te snijden.

Kan ik de kleur wijzigen en het bestand downloaden?

Ja. Stel de vulkleur in met het kleurvlak of een HEX-waarde; het voorbeeld, de SVG en de download gebruiken die allemaal. Klik op Downloaden om een blob.svg-bestand op te slaan dat volledig in je browser wordt gegenereerd.

Worden mijn vormen of instellingen naar een server verzonden?

Nee. De blob wordt gegenereerd met een lokale seed-gebaseerde willekeurige functie en alle SVG- en clip-path-strings worden in je browser gebouwd. Er wordt niets geüpload, dus de tool werkt offline en je werk blijft privé.