Softonic

SVG Blob-generator

Stap 1 / 2
Volgende

Blobvormen vervangen rond 2018 de perfecte cirkels als het ‘vriendelijke, afgeronde achtergrondelement’ van het moderne gebruikersinterface: ze verschijnen achter heldillustraties, als avatarsmaskers en als kleurvlekken op landingpagina’s. Deze generator genereert een blob door middel van een willekeurige wandeling rond een cirkel en gladstrijkt het poligon vervolgens met kwadratische Bezier-krommen tot de organische, licht schommelende vorm die ontwerpers nastreven. U bepaalt het aantal controlepunten (complexiteit), hoe wild de wandeling is (contrast) en de willekeurige startwaarde, en kunt daarna het SVG-bestand kopiëren.

Hoe de blob wordt gebouwd

  1. 1

    Kies kleur en complexiteit

    De complexiteit bepaalt het aantal controlepunten (3–12). Hoe meer punten, des te meer onregelmatigheden.

  2. 2

    Stel de contrastinstelling in

    Contrast bepaalt hoe ver elke punt afwijkt van de basisradius: lage contrast betekent bijna cirkulair, hoge contrast leidt tot een duidelijk gebogen vorm.

  3. 3

    Kies een zaad

    Het zadengetal is het willekeurige getal dat de vorm van de blob bepaalt. Hetzelfde zadengetal leidt tot dezelfde blob; wanneer je opnieuw een zadengetal gebruikt, wordt de vorm willekeurig gewijzigd en krijg je een nieuwe blob.

  4. 4

    Kopieer de SVG

    U krijgt één `<path>` binnen een 400×400-box. Plaats deze op elk punt waar SVG wordt ondersteund.

Anatomie van de blobpad

De generator verdeelt N punten gelijkmatig over een kubus met afmetingen 400 × 400 (centrum 200, 200; basisradius 130), verandert elke radius met ±contrast en verbindt elk puntpaar vervolgens met een kwadratische Bezier-kromme.

M x₀ y₀ Q x₁ y₁ midx midy Q x₂ y₂ midx midy ... Z

De midx, midy vormt het middenpunt tussen het huidige en het volgende punt; door het einde van elke curve daar te plaatsen wordt het poligon afgerond tot een organische vorm.

Handboek met parameters

Instelling Bereik Effect
Complexiteit 3–12 Aantal loben; 5–7 is het optimale aantal voor UI.
Contrast 0–100 Amplitude van de willekeurige wandeling; een waarde tussen 30 en 60 lijkt natuurlijk.
#Zaad 1–9999 Deterministisch; dezelfde zaad leidt tot dezelfde resultaat bij elke uitvoering.
Color hex Enkelvoudige vulling, zonder lijn. Voeg fill-opacity handmatig toe indien nodig.

Waar blobs het beste werken

  • Achtergronddecoratie, achter koppen en in lege hoeken van hoofdsecties.
  • Avatarmaskers – toepas de padlijn als clip-path voor organische portretframes.
  • ** illustratieve accenten**, een vlek van het merkkleur onder iconen of cijfers.
  • Beeldmaskers – met CSS mask-image worden foto’s met behulp van een blob in organische uitsneden geplaatst.

Tippen

Houd voor achtergronden vlekken zonder lijnen; een lijn geeft ze een plakkaartachtige uitstraling.

  • Voor animatie van morfing genereren twee blobs met dezelfde complexiteit en verschillende zaden, en animeren vervolgens het attribuut d met een bibliotheek als flubber of svg-morpheus. – Gebruik SVG in plaats van <img src=blob.svg>; dit maakt het mogelijk de vultkleur tijdens uitvoering te wijzigen met CSS-variabelen. Houd de viewBox behouden, maar verwijder het expliciete width="400" height="400" als u wilt dat de blob schaalbaar is naar elke container.

Veelgestelde vragen

De zaadwaarde initialiseert de srand() van PHP voordat de willekeurige wandeling begint. Dezelfde zaadwaarde leidt tot dezelfde reeks oproepen van rand(), eveneens dezelfde puntverschuivingen en een identieke route.

Ja, maar alleen als beide paden dezelfde aantal commando’s en punten hebben. Houd de complexiteit gelijk en wissel alleen het startpunt om paren te verkrijgen die geschikt zijn voor interpolatie. Gebruik een tweenbibliotheek zoals GSAP MorphSVG of Flubber voor de daadwerkelijke animatie.

Vervang fill="#hex" op de pad met fill="url(#gradient-id)" en voeg een definitie van <linearGradient> of <radialGradient> toe binnen een <defs>-block. CSS-aangepaste eigenschappen werken ook als je het SVG inline plaatst.

Het is schoon, maar niet geminificeerd. Voer het één keer door SVGO als u belang hecht aan de bytesize; u kunt meestal 20–30% van de karakters verwijderen.

Nee. De SVG wordt op de spot gegenereerd uit de parameters in het URL-vormulier en er wordt niets geregistreerd.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

JavaScript-obfuscator

Obfusceer JavaScript met string-array-codering, hernoemen van variabelen, control-flow-flattening en injectie van dode code ter bescherming van de front-end.

Tool beschikbaar in andere talen