Wat is een SVG-blob?

Een blob is een zachte, organische vorm zonder rechte randen, ergens tussen een cirkel en een spat. Blobs zijn een populaire decoratie in modern webdesign: achter hero-afbeeldingen en illustraties, als avatarframes, als achtergronden voor secties of als speelse knoppen en badges. Omdat het vectorafbeeldingen zijn, blijven ze op elke grootte scherp en nemen ze slechts enkele honderden bytes in beslag.

Beschrijving van de tool

Deze tool genereert willekeurige blobvormen als schone SVG-code in je browser. Klik op ‘Willekeurig maken’ totdat je tevreden bent met de vorm en verfijn vervolgens het aantal uitstulpingen, de mate van onregelmatigheid en de rondheid van de rondingen. Vul de vorm met een effen kleur of een verloop, teken haar als contour of laat haar optioneel in een vloeiende lus tussen verschillende vormen morphen. Download het resultaat als SVG of PNG, of kopieer het als SVG-opmaakcode, CSS-achtergrond of CSS-clip-path.

Functies

  • Reproduceerbare willekeurige blobs: dezelfde seed en instellingen leveren altijd dezelfde vorm op
  • Instelbare complexiteit, willekeurigheid en vloeiendheid, van ronde kiezelstenen tot puntige sterren
  • Effen, verloop- of contourvulling met elke gewenste kleur
  • Morphinganimatie die tussen vormen blijft herhalen, ingebouwd in de SVG zonder JavaScript
  • Downloaden als SVG of transparante PNG op het formaat van jouw keuze
  • Direct te kopiëren code voor SVG, CSS-achtergrond en CSS-clip-path

Hoe het werkt

De tool plaatst punten rond een cirkel, verplaatst elk punt met een willekeurige afstand naar binnen en tekent er een vloeiende gesloten kromme doorheen. De kromme wordt exact gemeten en geschaald, zodat de blob de afbeelding van rand tot rand vult. Een generator voor willekeurige getallen met een seed bepaalt elk punt, zodat een seednummer of -woord later dezelfde blob opnieuw oplevert. Voor de animatie worden verschillende blobs met hetzelfde aantal punten in één SVG-animate-element geplaatst, waarna de browser vloeiend tussen de vormen overgaat.

Tips

  • Vijf tot acht punten met een gemiddelde mate van willekeurigheid leveren klassieke blobvormen op; minder willekeurigheid oogt rustiger en professioneler.
  • Zet de vloeiendheid op 0% voor polygonen met een kristal- of edelsteenachtige uitstraling.
  • Gebruik de CSS-clip-path-code om een foto of video in de blobvorm uit te snijden.
  • Noteer de seed of typ je eigen woord als seed om later exact dezelfde blob opnieuw te maken.
  • Houd de morphinganimatie langzaam, ongeveer 8 tot 15 seconden per lus, zodat de animatie op de achtergrond rustig blijft.